My Name is
Ryan Albertsun
and I am a(n)
Designer Engineer Technologist Speaker Agile Coach Delivery Lead Architect Photographer
My Process
The biggest differentiator for my design process is if the project is existing software, or new development.
For existing software I…
Create a sitemap / interaction map of all of the pages, ctas, and touchpoints
Apply all existing persona’s and their journeys to the map to understand what paths users are taking around the application and see what users are doing on the application.
Talk to the product owner or client business and confirm what our top priority journeys are through the application; and example would be on an account manager application we might define ‘Pay My Bill’ as the #1 flow/journey a user is trying to do.
I will reach out to analytics and data science team members for access to any hard data or analytics to the sitemap in relation to the priority journeys, for example, where is traffic coming from naturally, or where do users flow from page to page, and does this meet our Journey priorities
Once identifying pain-points or places we can improve I will usually take existing pages and use them to mock-up possible solutions, this will usually be in photoshop and use screenshots of the already live application so the customer understands what we are trying to accomplish
Depending on the project if we have access to test-users or a have trusted customers I will demo these designs to the customers and get their feedback to determine if the comps meet their expectation; depending on the complexity of the journey this may end up being an clickable prototype in XD or Invision (or other similar software.)
If our users are happy, we’ll confirm with our product owner and IT team to confirm that our prospective solution is viable; if it gets signed off on by all stakeholders we’ll send it to development to get worked on.
For new development I…
Identify the core value statement your new product offering delivers, and work to tie everything back to that value statement. As an example if you’re creating testing software the core value statement might be ‘Highlight the differences between two blocks of code’.
Identify who your users are and build personas around them, the core thing I want every persona to have is a ‘goal’ that that persona is trying to achieve, in the testing software example a QA Engineer may want to highlight changes in code to create a bug; while a Software Engineer persona would want to actually use the highlighted changes to fix the bug.
Create journey maps that each persona would take to reach their goal in the new application, this would usually be created on a whiteboard or in Visio.
Create wireframes of every screen in the application using the flows as a guideline. I usually create wireframes in Adobe XD
Depending on the project we may want to create a clickable prototype of the wireframes to validate that our assumptions in the flow maps are accurate to the journeys we outlined.
Use the flow documents and wireframes to identify all of the pieces you need to create, primary cta buttons, secondary, navigation, etc, and depending on the project I might work a second designer who owns branding to provide me with assets for the final comp. Alternatively I may be creating my own screen elements based on brand guidelines or using existing libraries.
Create a high fidelity mock-up of every wireframe
Create a high fidelity clickable prototype for user testing
Demo prototype to stakeholders, especially in IT, to gather feedback on our designs and make sure they are technically feasible.
Take users through testing of our prototype to gather feedback and make changes until all parties (product, design, users) are happy with the results
Iterate, working with Product/Design/Users/IT until the prototype is ready for development
Work with IT to build it
Amway
As the B2B Design Team Lead
I was responsible for leading a design team accountable for the UI/UX Design, Research, and Experience Strategy for all of our Business Users software applications.
I ensured the success of our users in our digital software offerings through strong UX Design and Research Methodologies. Our business users are core to the Amway business and ensuring their success; ensures Amway’s success.
As the team lead I was responsible for the work of a team of designers that supported a large range of software offerings and product teams. From external facing iOS/Android Apps like Creators+, so web based business tools, all the way to a creation of a stand alone LMS (Learning Management System) – from scratch!
Amway Creators+
End to End Product Design
I worked on the End to End Management team as the Experience Manager for Amway Creators+.
I partnered with a ‘three in the box’ of a Product Lead, and a Technical Lead to drive product vision forward for the app ecosystem as a whole.
I was responsible for overseeing and approving all design work for Creators+ across 5 Product Teams.
The five product teams were responsible for different verticals in the Creators+ Ecosystem:
Learning, Content Creation, Business Management, Platform, E-Commerce, Platform.
One of the most complex products was Amway Academy, our learning product.
Amway Academy - LMS
As the Design Lead on this project I architected both a CMS/LMS Back-End for Learning content authoring, as well as both a Native and Web based learning platform solution; designed to the standard of industry leaders such as Linkedin Learning or equivalent.
I was responsible for leading a team of both agency and employee designers to create hundreds of screens, and worked with product management on requirements and product strategy.
Product Reach & Success
Amway Creators+ has been a roaring success, rolling out across the globe to hundreds of thousands of business users. We maintain high reviews both on the app stores and through internal research.
Ford Credit Account Manager
Before
After
This project won a JD Power Award for "Best consumer web experience in the automotive industry"!
Ford Credit Online Credit App Case Study
www.ford.com/finance/apply
User Interface Design
User Experience Design
Agile Coaching
Architecture
My Role
As the Lead UX Architect for Ford Credit's Digital Marketing Department I was responsible for leading the UX Design across the entire Ford Credit Digital Marketing portfolio.
On this product specifically I paired with the team's Product Manager as they had been filling the UX Role for the team before I joined and had much insight and knowledge.
We worked collaboratively with the Development Team, Product Owner, and Stakeholders in Management to assure that solutions met Ford Credit's larger goals.
Discover
Discovering the Drop-Off
Shortly after joining the team a Product Manager in the department noted that there was a high drop off in the completions of the online credit application (OCA). As Ford Credit's primary business model was the servicing of leases and loans, the OCA was the primary method most new users entered the Ford Credit ecosystem.
The three leading hypotheses for the cause of the drop off were:
1. Poor user experience leading to people starting the app and abandoning it out of frustration.
2. Dealers forcing users to re-complete applications at the dealership even though they were previously approved.
3. Launch of a new integrated system coincided with the drop-off that changed how leads were sent to Dealers causing differences in the tagging, which could have been causing false negatives in abandonment.
Personas
Some details altered to protect the innocent.
Dealer Dan (Ford Dealer)
Ford Dealer who just wants to sell cars. Doesn't care about the OCA, just wants to sell cars.
Millenial Melanie
American first time Ford buyer fresh out of college who expects an easy intuitive experience. May not have great credit. Is shopping around.
Canadian Melanie
American Melanie's twin sister who's a lawyer - only cares that everything is legal and localized for Canada.
Lindsay the Returning Customer
Returning customer who has bought a Ford before and has a great credit score which makes her a good candidate for automatic approval. May have previously interacted with the OCA at a dealer.
Larry the Lincoln Dealer
Lincoln Dealer who wants to remove all of the burden from the purchaser. Aims for an 'effortless' buying experience of luxury vehicles.
Define
It Wasn't Bad Data
One of the leading hypotheses was that the launch of a new middle man system broke tagging, causing a spike in abandonments that wasn't accurate.
We reached out to a data analyst to confirm that the tags were working, and in the end determined that the increase in abandonments to the OCA was legitimate.
It Was Bad UX
User testing verified that the form was hard to use and many people would start it, especially on Mobile, only to abandon it and come back to it later on Desktop. Only to abandon it again and fill it out at the Dealership. One user could cause three or more failures in the system.
While there does exist a system for the Dealers to pull approved Credit Applications out of the system they prefer not to use it because it is cumbersome.
Why 6 Times
Our research with users showed that by the time they were filling out the Credit Application they had either already chosen a vehicle, or were trying to find out exactly how much financing they would be approved for to pick from a selection; or choose a model.
When copying the existing screens into Photoshop, I noticed that when expanded all of the accordions full of white space made the page approximately 10x longer.
Mobile was an entirely different UI developed against separate comps, with almost all of the same issues as Desktop, just with different screen elements and a faux-wizard that let users move on to the next screen with errors, which only became apparent when they clicked complete 5 screen later.
Asterisks were used for non-required fields, causing confusion.
Terms and conditions had checkboxes off-screen.
Forced 60 second wait time to complete the form, even though the back-end was finished in 10 seconds.
Design
Solution 1 - Quick Band-aid
- Take existing screens and UI elements and streamline them
- Remove all accordions
- Remove optional fields
- Low development effort
- Quicker to market than complete rewrite
- Reduce white space
- Elevate error messages
- Form field validation on de-focus
Solution 2 - Redesign & Wizardify
- Wizardify experience to reduce confusion
- Guide user through step by step
- Streamline experience
- Would require complete rewrite, large development effort
- Better UX than a Band-Aid
- Adds new functionality like drivers license scanning to pre-fill sections
Deliver
The Business is a User Too
One of the core goals of the Band-Aid fix was to meet Legal requirements as well as alleviating end user pain points. In something as legally challenging as a Credit Application each individual element, line of copy, and button must be approved by Ford's legal team.
One of the main benefits of re-using existing elements and providing a design that was a rehash of existing elements is that would limit the impact to the business as a whole because the elements had previously been approved.
Design for Developers
I was able to utilize my knowledge as a Front End Developer to minimize development effort. I designed the Band-aid fix to primarily utilize CSS changes, and require no back-end changes.
I worked closely with the Product Manager and Development team to understand the product and limit designs to things that were easily implemented.
Impactful Changes for Melanie and Lindsay
Reduction of whitespace led to a 90% reduction in page size making it easier for the users to navigate the form.
Removal of a forced 60 second wait time for approval allowing users to receive their decision in a more timely manner.
Consistent desktop and mobile experience by moving to to a responsive design.
Clarified CTAs and touch points to reduce confusion on how to progress through the application.
Simplified vehicle and dealer selection process to allow customers to more quickly complete the application.
Graphics & Art
Compuware Support Center
Wireframe
Live on Web
Wantify
When I was consulting for Pillar in Ann Arbor one of the projects we had was Wantify, an Ecommerce startup from Birmingham, and we were tasked with creating an iOS app and a companion Website to go along with it.
It was a Xamarin iOS app before Xamarin would go on to be bought by Microsoft and be greatly successful.
One of the limitations of early Xamarin development was a lot of of the UI elements we think of as 'traditional' today weren't natively supported.
As such I had to create screens in Photoshop (With the Retina versions!) and the developers would have to create touch regions on top.
It results in a bit of trial and error, but was genuinely a very fun and rewarding project.
I even got to put my photography skills to the test at one point during the project.
We were soft launching only in Birmingham Michigan and instead of using stock photos for our user orientation screens I had the idea to go photograph the city and businesses that were a part of the Wantify storefront.
Puppywarmer
Web Development
Web Design
Photography
User Experience Design
Impact
Puppywarmer is an example of what can happen when you deliver exactly what your customers want – Warm Puppies.
Puppywarmer revolutionized canine incubators and the e-commerce site I designed and built for them has helped enable record breaking month after record breaking month. We are now expanding the website from pure e-commerce to product support, on-boarding, and creating interactive troubleshooting guides.
Overall Puppywarmer sales and traffic are up over 1000%!
Context
Puppywarmer is a company that manufactures incubators for veteranarians and breeders.
They sought out my services to improve web trafffic and sales. In two years their sales and traffic have both increased over 1000%!
In 2020 Puppywarmer has been nominated for the 'Coolest Thing Made In Michigan' (How cool is that!?)
My Role
As an independent Consultant I helped Puppywarmer create a new E-Commerce solution for their business. I designed all of the screens, photographed all of their products and created the website in WordPress utilizing WooCommerce as their E-Commerce solution.
I continue to help them with updates, maintenance and marketing for new products.
Design
I began by working with Puppywarmer to look at sample templates and other e-commerce sites to get an idea of what their vision was. We then discussed what their core goals for the website were and how we could best meet them.
The result was the decision to focus on two things:
1. The Products - high quality veterinary heaters are actually quite rare.
2. The Story - Helping newborn puppies survive.
Development
We chose WordPress as our CMS and WooCommerce as our E-Commerce solution. I utilized Elementor extensively as well as custom HTML/CSS when needed.
I also integrated WooCommerce with their billing solution.
Photography
All images on the website of products were taken and edited by me.
GuitarPiQ
Web Development
Web Design
Visual Design
User Experience Design
GuitarPiQ's founder was completing a masters degree in UX and was able to provide me with architectural flows which served as the backbone of the website. I worked with him to refine the flows through the website and make key decisions.
We decided we would use a cart system - allowing venues to add a band and 'checkout' with them to request a quote.
We wanted to highlight categories and sub-categories, as most venues chose bands based on what kind of music they played, but many bands could fall into multiple sub-categories.
I build the webstie in WordPress and used modified WooCommerce for the cart and checkout sytems.
I relied on stock images from Unsplash to bring the different genres to life and ensure the users always knew where they were on the website.
Accessibility
In the modern software development process Designers are "The Voice of the Customer", we represent their interests not only throughout the design process but throughout the end to end delivery of the product.
As such it often falls to us to bear the responsibility of creating and maintaining accessibility.
Let's talk about what I consider the 5 Pillars of Accessibility:
Behavior
It does what the user expects it to do.
Journey
The Happy Path is well-marked.
Style
Your color contrast is on-point, and your <H1> is clear.
Technology
It's screen readable and properly tagged.
Legal
Your legal team gave you the nod.
Pillar #1: Behavior
Humans are pattern matching machines. Our brains have evolved to look for patterns. Have you ever wondered why Spotify can find music for you, week after week, that you love?
It's because they are finding patterns your brain likes.
We do this everywhere, door handles being push vs pull, turning a knob clockwise to open. When you go against the 'expected behavior' of anything your user is experiencing it immediately breaks the experience. Designing for behavioral accessibility comes down to anticipating what response the user expects for an action.
If they press Enter, they expect it to send a form, if they hit tab, they expect it to move to the next item in the form. This is especially important if the user is using accessibility tools like screen readers, but we'll come back to that later on.
The example below is lifted from a real web page I found while researching this case study and is live as of 2020.
By having Tab go over one column and down to 'Email' instead of across to 'First Name' you've now created confusion for the user by not only not doing the expected Behavior, but by also doing something unexpected.
Did you notice the other glaring Behavioral flaw with this page?
Last Name first is common in legal documents, but is incredibly uncommon in Job Applications. In fact this is the only time I have personally ever seen Last Name First in a job application.
Do what they expect.
Research what your common pattern is, and do it.
Consider what the user will be expecting and try to fulfill that need.
If you are ever designing a form and aren't sure if you've organized your screen in the best way, this is the perfect time to get user feedback. Ask your user to try your form out and look for any spots where their behavior didn't line up with your expectation.
Pillar #2: Journey
Let's look at a webpage I designed for Ford.
When re-designing the Lincoln Credit pages for Ford we set out to have a Primary CTA, and a Secondary CTA that were visually distinct and offered two options within the same experience.
The CTA's would often be used to met the #1 and #2 goals of the customer, or to server a Primary and Secondary Persona.
We often set out to identify the #1 thing a user wanted to do on any specific screen, and highlight that as the primary.
But what do you do if you want to give customers more choices?
Define the Journeys.
Make Happy Paths
If you ever aren't sure what Journey to take a user on, decide what the #1 thing they want to do on a screen is, and create a happy path around it. Plant some trees, build a fence, and use CTA's as your sign-posts.
Well defined Journeys reduce confusion and assure that your users know what they should be doing on a page.
Pillar #3: Style
When considering accessibility your Style is largely broken down into: Color & Text.
Let's start with color!
Intelligent application of color isn't about what colors you choose to use, but how you apply them.
Let's start with contrast, below are the 3 primary brand colors for Lincoln Automotive.
Let's try making buttons with them using white text.
Now let's try black text.
Now let's try using the brand colors for text.
When designing with accessibility in mind just because you like something aesthetically that doesn't mean it should be used.
Use Colors... Wisely
Also consider what colors mean to people before they start using your app.
When was the last time you used Green to mean something failed? or Red for a Success?
Exactly. Never.
Also beware using your brand colors for messaging. If you have an orange (usually a danger color) as part of your brand beware re-using similar colors.
Headers. Sub-Headers. Body-Font.
The other side of the style coin is Fonts - you want your users to understand what is important on a page and you direct their attention through consistent use of fonts, colors, and sizes.
Pick combinations of fonts and sizes and use them consistently. Define what your <h1> <h2> and <p> tags are and use them consistently. This will allow you to communicate clearly with your users as they will come to expect that text that looks a specific way conveys a specific message.
Header
Sub-Header
Lorem Ipsum Dolor Sit Body Font Amet Consecutor.
Another thing to keep in mind is that behaviorally - users expect bigger text to be more important. Keep in mind that the first thing a user will see is often the largest.
But no matter what - be consistent
If you decide Blue is your success color, use it anywhere in the application that something succeeds. Anytime someone embarks on the primary path in a Journey, use a Primary CTA. If you have important decision trees, make sure that the buttons for YES and NO are always consistent.
Once you have established a clear <H1> never change it. It's the same throughout the entire experience, if you decide on a specific element <H1> isn't working, move to <H2> before you change the style of that element.
Pillar #4: Technology
Screen readers at their core allow users to 'hear' your webpage, and as designers we primarily think in visuals.
It's important if you know a core part of your audience may be disabled to review the experience that a customer has when using a screen reader.
Take the Journey your users are experiencing using screen readers yourself! Make sure that the experience you're building works via screen readers first-hand. Conduct user interviews with users who rely on screen readers and look for places you can improve.
Consider the requirements that are being sent for development - add functional requirements into your stories that make sure you have <alt> tags on images and your semantic structure works in a screen reader. Work to make testing with screen readers part of your normal QA process.
A lot of this really lies on the shoulders of the developers, but we as Designers are supposed to be the voice of the user, make sure your developers are keeping screen readers in mind when developing the front end and help your team define accessibility requirements in acceptance criteria.
Pillar #5: Legal
Ask for your lawyer.
This may sound like a weird one, but the legal team at a company exists to make sure your bases are covered.
When I was designing at Ford we would regularly send screens and copy to Legal for approval because our skill-set is "Design Great Software" not "Design Software That Doesn't Get Us Sued".
The industry you are in also makes a large impact on this, when I'm designing for financial services or another heavily regulated industry how we present things to the end-user can be legally binding, or dictate legal requirements.
Don't be afraid to pump the brakes and ask for legal review.
When in doubt - go here: https://webaim.org/
Skills
User Interface Design
User Research
Prototyping
User Experience Design
Web Design
Mobile Design
Desktop App Design
Visual Design
Branding
Web Development
Testing
Architecture
Photography
Image Post Processing
Video Editting
Agile Coaching
Kanban
Scrum
3D Printing
3D Modelling
Technologies
As the B2B Design Team Lead
I was responsible for leading a design team accountable for the UI/UX Design, Research, and Experience Strategy for all of our Business Users software applications.
I ensured the success of our users in our digital software offerings through strong UX Design and Research Methodologies. Our business users are core to the Amway business and ensuring their success; ensures Amway’s success.
As the team lead I was responsible for the work of a team of designers that supported a large range of software offerings and product teams. From external facing iOS/Android Apps like Creators+, so web based business tools, all the way to a creation of a stand alone LMS (Learning Management System) – from scratch!
