Rodan + Fields
Role: Product Designer
Tools: Figma, Usability Hub, 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.
My Role
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.
How might we route users and consolidate pages to improve checkout rates plus lower overhead costs?
Goals
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.
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
Design Questions
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
Research Goals
Understanding proper placement of modules and the right verbiage to better understand what resonates with users, increase account creation, and consultant attachment conversions
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.
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.
Improvements
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.
Challenge
The design accounts for the iOS15 update where the search bar will be at the bottom of Safari browser screens.
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.
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.
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
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.
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.