top of page
Timeline
4 months
(shipped)
My role
Lead UX&UI Designer
Coquo is an E-Commerce platform offering customizable modular kitchen furniture.
Deliverables
User Flow
Wireframes
Prototyping
Annotated High-Fi Mockups
CURRENT SITUATION
Become a member
Coquo gives loyalty discounts exclusively to its members based on their annual account spent.
PROBLEM
However, the current steps to be part of a member require lots of manual effort. Users have to download this form, fill it out and then send it back to Coquo to get approval.
OPPORTUNITIES
Building a new seamless flow and effortless approach to become a member.
User Data
After diving deeper into the problem, I realized it was more complicated than I expected. This is because Experienced users and New users have different ways to get this form.
For Experienced Users Coquo’s office knows everyone that fills out the form.
-
They are informed of the memberships from Coquo's direct link to an application form.
-
90% of them are not satisfied to fill it out manually.
For New Users There are no new users becoming a member.
-
Because they don't know this option. ( Low visibility: CTA "Become member" button is at the bottom footer.)
CURRENT USER FLOW
Define Success
PAIN POINTS
Experienced Users
Time-consuming to apply for the membership manually.
USER GOALS
I can finish this process quickly and effortlessly.
New Users
Not being aware that they can become members to unlock more benefits.
I can be informed with this option.
DESIGN PRINCIPLES
PRODUCT REQUIREMENTS
SUCCESS METRICS
Inform at the right moment
Users should have clear expectations around the membership option and how to become a member in a timely manner to make an informed decision upfront.
Easy to apply
We should provide a digital solution to avoid manual efforts and tedious steps.
Intercept the natural entry point of becoming a member.
New member
-
Increase in the number of new members
Less intimidating form design that can be submitted on the website and navigated easily.
Efficiency
-
Reduction in the time spent on the application process
Exploration
1
Banner on the Homepage
2
CTA on the top navigation menu
3
Pop up modal dialogs
Banner on the Homepage
CTA on the top navigation menu
Idea-
Persuasive and actionable banner on the homepage to give users access to membership option.
Why rejected-
Although it has high visibility, it fails to intuitively intercept the natural user journey when navigating the website.
Idea-
Use the primary CTA button to encourage users interaction.
Why rejected-
-
Tradeoff decision - it has high visibility but "Become member" is not Coquo's priority.
-
Actionable but not persuasive. It fails to demonstrate the value of becoming a member.
Pop up modal dialog
Idea-
This dialog appears after the user first landed on the site’s homepage
Why rejected-
-
It interrupts the user's current flow without the user having done anything
-
It provides almost no context and gives users no time to glean any value from that page.
-
The dialog demands information that is not essential for users.
4
Merge create account flow with membership application process
Chosen solution
Idea-
Provide a "Business" account option to meet both experienced and new users' goals.
Why accepted-
-
The user’s journey of becoming a member from this "create an account" entry point is natural, intuitive, and logical.
-
It’s immediately clear what is being offered and what needs to be done.
-
It’s much more likely to encourage a positive response with demonstrated value.
PAIN POINTS
Experienced Users
Time-consuming to apply for the membership manually.
Novice Users
Not being aware that they can become members to unlock more benefits.
USER GOALS
I can finish this process quickly and effortlessly.
I can be informed with this option.
SOLUTION
Merge create account flow with the membership application process.
How I got there
NEW USER FLOW
WIRES
RECAP
DESIGN DECISION 1
Fill out the form online
For both experienced and new users, they don't need to download the document and fill it out manually and then send it back to Coquo's email.
DESIGN DECISION 2
Individual vs Business
New users will be aware of there is a business account option to become a member in the first place when they want to create an account.
DESIGN DECISION 3
Merge two flows
It's a more seamless flow to allow users create a business account directly rather than letting them do it twice and separately.
Design for Accessibility: design for forms
CHALLENGE
HMW design a less intimidating, easy to navigate, and highly-contextual form?
DESIGN DECISION 1
Validation after submission VS Inline validation on errors
Visibility of system status is one of Jakob Nielsen’s 10 usability heuristics. Under this context, error messages are a key indicator of system status. After browsing and testing hundreds of error states, I've made some design decisions on error validation.
-
I decided to go with inline validation.
-
Because validating after submission would cause frustration on receiving all errors at once, which can be overwhelming for the user.
-
Inline validation allows fixing the error immediately after the field has been completed.
When testing those form patterns, I ask myself
HMW make it even more effortlessly?
Then I checked if there were technical limitations and then wrote these requirements to make it more intuitive.
-
Avoid showing an error message when the user just navigates between fields without starting typing in that field.
-
Avoid using real-time validation, as this is likely to report errors before the input is complete.
DESIGN DECISION 2
Multi-step form &
progress indicators
-
Breaking up that long form into digestible multi-step chunks.
-
Displaying a progress indicator.
-
Making each step less overwhelming and reducing users' cognitive load.
Reflection
Handoff my design to engineering
Never assume other people can read your mind!! When I review the dev's work, I found that the progress indicators have a hover effect and they are clickable! This is not what I want, but I quickly realized that I should provide details as specific as possible to explain my design. It's a good learning experience and now I always have annotated final design and specific specs to ensure we are aligned on everything.
Explore other work
bottom of page