Project Overview
A UX case study on widget design across platform
My role: UX generalist that handles interaction design and user testing.
The goal here is to design customized widget based on individual client site experience and business requirements. Most of the designs are based on data acquired from user testing to yield higher revenue and conversion rate.
Identifying Problems with Existing UI
-
Clickable area of the buttons are not well defined
Combining two opposing button sets makes it difficult for the user to identify the clickable area of each. Where is the line between the two? Can they click on the grey box or only the radio buttons? How do we define the line so it maximize conversion rate but also don’t upset the user?
-
Warning color for “decline protection” needs more color study
Warning color for decline needs more color study. While red signals warning, it also suggests stop. We don’t want the user to stop at decline, so yellow might suit our purpose better here.
-
Two primary action buttons lack affordance
Using the same style for two opposing buttons, we are not visually recommending one over the other. Simply putting “recommended” does not provide enough visual clues.
-
Legal section is very bulky
While we can’t trim any legal languages in this section, we should be able to provide design solutions to make it appears more pleasant to the user.
-
Background P logo creates distractions
Grey brand logo has less contrast ratio with the text than when it’s on a white background. Although still passing the WCAG AAA line, it creates visual distraction at glance, making it harder for the user to gasp the entire sentence.
-
Overall UI proportion needs more balance
Information section is overwhelming and action section is underrepresented
Competitive Analysis
A two-step user interaction in widget
Checkboxes lack a sense of completion. Usually it will be followed by a “save” or “next step” button to complete the user selection, like the two examples above. However, what differentiate the two examples here is in example A, checkboxes are used for selecting multiple options. This is usually what they work best for.
For our widget design, we need to think about if this extra step is necessary. Why do we want user to confirm their choices after they made one?
A two-step interaction can add to both user and company values in only one use case. That is when we don’t have this: *Selection Required
A continue button can prevent user from skipping our widget when selection is not required. However, a simpler solution would be making our widget a requirement in order to proceed.
This would be difficult for a toggle design. For a binary yes/no toggle like this, how do we make sure we record opt-out choices correctly?
Picture: Google Material Design
We can’t set the default toggle state as “on” according to the regulation, which means we are risking the possibility that user might overlook our widget by scrolling through.
Although a toggle design is much cleaner and takes less space, it will put us at a lot of risk.
Customized Solution
Tone Analysis
For this particular client, Patron, we added customized icons and styling to fit their business requirements. However, there are some general takeaways that we adapted as a standard solution.
To address the busy legal section, we gathered legal and “learn more” into one place and added expandable accordion design to clean up the interface.
Replaced icons with easy to understandable ones to
Process
