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.)

old user flow_2x.png

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

Web 1920 – 2_2x.png

WIRES

2.png
1.png

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.

Wanna hear more stories? Let's Connect!

Explore other work

design system_cover.png

#DESIGN SYSTEM

Design System for Health Portal

Created color theme, typography, reusable components, UI Patterns, and design documentation for our Quebec government projects.

property_info___3.jpg
5cb0633d80f2cf201a4c3253.png
search_result.jpg
5cb0633d80f2cf201a4c3253.png

#MOTION DESIGN

Propamap

Shipped a contract project to help renters easily find the best places to rent and help landlords post ads effortlessly.

Unauthenticated.png
5cb0633d80f2cf201a4c3253.png
RefreshedFailed.png
5cb0633d80f2cf201a4c3253.png

#UXUI #IA

Vaxicode: Vaccination Passport

MVP - Created an authenticated state of Vaxicode - The user can create an account, declare their rapid test results, and edit their account info.