Rodan + Fields
Improving Account Validation and 6 Different Checkout Flows
Role: Product Designer
Tools: Figma, Coda, Miro, & Jira
Rodan + Fields is best known for their innovative multi-med therapy (regimens) approach with skincare products founded by dermatologists, Dr. Katie Rodan and Dr. Kathy Fields. Another part of the business are the consultants, people given opportunities to sell their favorite products to gain extra income. With new skincare brands like Murad and more sites using third party CMS like Shopify, checkout is becoming increasingly easy and fast.
The current checkout flow is split into 6 different pages for each persona which creates additional costs and overhead for the business from updating or adding new features in the U.S., Canada, and Australia regions.
I was the main Product Designer for the responsive web redesign of the e-commerce checkout flow with the UX lead and product manager. I also created a detailed dev handoff file with all user flows and synced with the functional leads plus engineers during weekly story grooming to ensure the design was feasible before the go live date in December 2021.
- Designed hi-fi screens for 6 user flows in mobile, tablet, and desktop formats for the U.S., Canada, and Australia regions
- Presented design reviews to business stakeholders to get alignment
- Testings mocks on Usability Hub with a UX Researcher and copywriter to gain data insight to validate design and copy decisions
- Conducting an internal audit for each pain point in our 6 different user types plus competitive audits on different skincare plus e-commerce sites’ checkout process.
- Created rapid prototypes in Figma to show developers how interactions should work in specific modules to remove the guesswork
How might we route users and consolidate pages to improve checkout rates plus lower overhead costs?
Defining the checkout funnel for every customer type to improve user routing by consolidating guest, account creation, and login as the first step to checkout. This will lead to an increase of checkout completion rate in parallel to reducing LOE to make checkout improvements.
Updated User Flows
Each user type Guest, Registered Customers (RC), Preferred Customers (PC), and Consultants have their own different set of rules, so mapping out where the dynamic modules would appear for each user flow helped developers, business stakeholders, and product managers visualize each user’s journey.
Painpoints in Internal Audit
- Routing modal on mobile makes it difficult for users to proceed to checkout as guests.
- Checkout flow interactions can be jarring to customers.
- Copy is not reflective of where customers are in the checkout journey and doesn't provide enough clarity.
- How can we simplify the modal experience?
- What are the friction points of the current interactions within the checkout flow?
- Are there areas of opportunity to simplify the language for checkout?
- How can we create a single checkout flow with modular components that utilizes only the components needed per persona?
UI Patterns and Features
- Checking out as guest is the first option with account creation being less prominent along with other express checkout options
- Collapsed order summary at the top with option to expand to view entire order
- Radio button UI patterns are used in payments and other choices in checkout that requires one selection
- Progress bar treatment is persistent to show the next steps
Conducted 3 rounds of design preference and copy testing to test hypotheses and gain user feedback from Usability Hub.
75 females ages 25-65
College level education
PT + FT employment
$40k - $100k
Understanding proper placement of modules and the right verbiage to better understand what resonates with users, increase account creation, and consultant attachment conversions
- Is the login / register modal a friction point for new customers?
- Are users comfortable providing their email address at the beginning of the checkout flow?
- Are new customers more inclined to choose guest checkout vs register an account?
- Which is a greater friction point for new customers: account creation choice or Consultant attachment choice?
- Would guest customers consider Consultant attachment?
- Do new customers understand their current progress in the checkout flow?
Project Design System
Defining the Design Patterns and Components
To decrease level of efforts for developers, the designs repurpose components from previous projects. The goal of the new UI patterns was to have 1 module design that can handle multiple dynamic content and variations that correlated to each user type after account validation.
Existing UI patterns:
- radio button pattern
- input fields instead of lines to fill out information
- expand and collapse interaction once a user completes each section
New UI patterns developed:
- email validation module
- dynamic progress bar depending on user type
- consultant attachment banner (only shows up in order confirmation for guests and RCs)
- order summary view + variations for other countries and users
Modal and Banner Interaction
Consultants gain commission when they are attached to users that complete purchases. There are 2 entry points that users can attach to a consultant in checkout; either through the consultant module if they have an account or on the order confirmation page.
The search again link caused a lot unnecessary back and forth interactions.
During search or match, users will see the search bar through each step in the modal to select a Consultant and easier to edit choices.
The old banner placement was shown in checkout and on order confirmation with no call to action.
The new banner has improved web responsiveness and the placement only appears on the order confirmation page with a simplified value prop and CTA button to find consultants, which is also stress tested for the Spanish translation update.
Persistent Sticky Compact Order Summary
Compact order summary that can expand before placing an order.
This view contains the latest added product, item total, and order total.
The design accounts for the iOS15 update where the search bar will be at the bottom of Safari browser screens.
Current Checkout Issues
Guests Are Not Prioritized on the Account Modal
Leading with ‘returning customers’ and ‘create an account’ messaging implies commitment which may lead to cart abandonment for guests. Also guests CTA are cut off from the mobile breakpoint.
Interactions in Shipping + Verify Address Needs Simplification
“Enter Manually” link is repetitive since a dropdown with addresses activates once an address is entered. The verify address modal interaction is inconsistent plus recommended address is not first.
Payment Methods’ UI Isn’t Scalable
Current UI toggle buttons for payment isn’t scalable for new payment methods like Klarna. It’s also confusing to see if previously entered billing address is saved along with the credit card.
Need Clarity on Consultant Value Proposition
Instructional copy doesn’t tell users that attaching a consultant is optional for RC users. It also doesn't emphasize on how it's a free service that is included for both registered and preferred customers.
Visual Conflict with the Upsell Modules in Order Confirmation
The upsell modules to create account and attach to a consultant have an unclear hierarchy of what what the user needs to do. Also, the order confirmation messaging is easy to miss at a first glance.
Improvements in Checkout
Step 1: Contact
Removing Friction with New Email Validation
Users are identified as a new or returning user type through email validation since research showed that 65% preference to checkout as a guest. After the account validation, the progress bar will update to show the appropriate steps for each customer type.
Step 2: Shipping + Verify Address
Smoother Interaction UX
User can complete the shipping section with no interruption of the Verify Address modal until they click “Save & Continue.” 90% of users from testing felt the updated Verify Address modal with the toggle button UI was much more clearer in what actions to take.
Step 3: Payment and Billing
Updated Payment UI
Using a radio button UI pattern allows scalability for additional payment methods. Input fields display full credit card information
Returning users can now see their billing address and if they want to add a new credit card
Step 4: Consultant
Stronger Value Proposition and Clarity for Consultant Step
For RC users, “optional” was added to the section header, so users can still place an order with or without a consultant attached. PC users' updated copy is more clear about the attached consultant being included and how to select one.
Step 5: Order Confirmation
Clear Call to Actions in Order Confirmation
Depending on the user type, the next call to action will be different and the module will turn on or off accordingly. Also, breaking up the content with a variety of UI designs helps condense the amount of modules and visual noise.
After less than 2 months of launch, ther was a 30% relative CVR lift among new customers post-launch of the new checkout flow.
For next steps, there are still some bugs that need be resolved in Jira plus some data layers that need to be corrected to collect the right analytics to see which other areas have been impacted to see if the redesign improved the increase for purchases and creating accounts.