summary.
Neostrata.com is a skincare eCommerce platform aimed at providing science-backed solutions for its customers. I addressed critical usability issues and refreshed the visual style by leveraging competitive market research and user testing insights. Within the first year, the redesign reduced cart abandonment by 28% and increased the conversion rate by 28%. Following its successful implementation on Kenvue’s luxury skincare brand, Neostrata, the updated design was adopted across the entire direct-to-consumer portfolio.
the issue.
Neostrata wanted a checkout experience that brought in higher conversion rates and decreased cart abandonment rates. The project was already underway when I joined, which came with its own set of challenges: my deadline was tighter so there was limited flexibility to explore solutions, and 2 designers had previously worked on the project, leaving stakeholders dissatisfied and hesitant, requiring me to rebuild trust and align expectations.
my role.
As the sole UX Designer, I was responsible for uncovering any user pain points, defining core problems with the current design and using data to inform the new design. I realigned expectations with stakeholders and collaborated closely with the Product Manager throughout the project in weekly meetings.
Our agile team was made up of two developers, a product manager, a business manager, a data analyst, two creative designers, a quality analyst and a copywriter.
Tools & Techniques Employed
- Insight-Driven Design
- User Testing via UserZoom
- Competitor Analysis
- Mocks & Prototyping via Adobe XD
the original design file that was handed off to me.
research.
With a timeline of 2 weeks, I wanted to seek out whatever low hanging fruit I could pick. For the first 2-3 days I worked with the Product Manager, looking over the research she did before I came onto the project, then combining it with my own.
common reasons for cart abandonment.
I employed Google and Baymard Institute to find top reasons why users ditch their carts:
- 49%: Extra costs are too high (shipping, tax, fees)
- 24%: Site requires account creation
- 19%: Delivery times were too slow
- 18%: Checkout process was too long or complicated
- 17%: Didn't trust the site
- 17% Unclear on the total cost
Other reasons that were interesting to note, but not within the scope of this project:
- Returns policy wasn't enticing
- Website crashed or had errors
- There weren't enough payment methods
- Credit card declined
visual audit.
Since I didn't have time to do an in-depth look with the team's Data Analyst, nor did we have any access to user tracking applications, I conducted a visual audit. I analyzed the current checkout experience and in conjunction with all of the research we had, worked with the Product Manager to highlight areas we believed were potential pain points.
- Long checkout flow
- Unclear on total cost
stakeholder buy-in with a flow chart.
Remember how I mentioned I was the 3rd designer that came onto the project? Clearly I needed to establish some trust with my stakeholders, and get buy-in on why I wanted to change what I wanted to change.
So I presented our current checkout flow in a flow chart compared to an average competitor's. This was visually impactful with the combination of research.
our checkout flow was nearly twice as long as our average competitor's.
the last designer still incorporated the interstitial sign-in screen, I made the case to remove it for guest purchases.
synthesis & goals.
I'd now be able focus on a few key outcomes in the design. Address the long flow, get rid of the required account creation, and make sure the price was always clear.
How can I address the main pain points and create a more intutive checkout flow that encourages users the complete their transaction?
With a goal now established, I collaborated with the team's data analyst to define and set up measurements of success. Our initial KPIs would be:
- Checkout abandonment rate
- Time spent in checkout
- User drop off at beginning and middle points in checkout
various mobile screen states in adobe xd.
design.
I had just 1 week to create high-fidelity mocks to present to our stakeholders. Major updates are shown on three pages: cart, shipping and billing.
cart page.
The cart page had key pain points, including the total price being hidden on mobile, express payment options lacking visibility, and a UI that didn’t align with the site’s branding. These issues made the shopping bag feel disconnected and less user-friendly.
To resolve this, I added an item counter to the heading, introduced a sticky component on mobile for the subtotal, checkout button, and express payment options, and refreshed the UI to match the site’s branding. Additional updates included a modal sign-in link under the heading and updated content slots in the Order Details section to highlight business incentives.
before & after of the cart page, desktop.
shipping & billing.
After a user clicked checkout, they were immediately faced with an interstitial screen asking to sign in or checkout as a guest. I removed this screen and only included an interstitial if the user had a subscription item in their cart. I removed any excessive exit points, and added a sticky View Order Details module to keep the total cost and order summary visible. Additional updates included improving the UI across the board like simplifying the footer and making next step CTAs more prominent.
the total cost was more transparent as a sticky module at the top of the screen.
the billing section had a major UI update, the flow also completed after the billing section.
prototyping.
To verify the new interactions, I created a prototype in Adobe XD to verify technical feasibility with the development team. I also presented the prototype to my stakeholders.
prototypes were created to present to stakeholders & to development.
handoff.
Final designs as seen below was handed off to our development team after 2 iterations. There was no time for testing prior to launch. We would launch, test, and then iterate again based on the initial results.
approved desktop version.
approved mobile version.
results.
The new checkout flow was launched October 2022.
after 1 month.
-0%
Checkout Abandonment Rate-0%
Time Spent in Checkout+0%
Drop Off - Beginning-0%
Drop Off - Mid to EndThe Checkout Abandonment Rate was down 7% (65% to 60%), the Time Spent in Checkout was down 17% (1m 18 sec to 1 m 5 sec), dropoff at begin checkout increased 61% (15% to 39%), dropoff at billing (mid point) decreased 38% (13% to 8%).
The increase in drop offs after the initial results led to a quick iteration where we made a quick swap of the contact and shipping information sections. We hypothesized that users maybe felt a little wary of entering their email right away.
the last iteration.
after 1 year.
-0%
Checkout Abandonment Rate+0%
Checkout CompletionThe Checkout Abandonment Rate was down 49% (65% to 33%) and the Checkout Completion Rate was up 48% (35% to 67%).
update.
The checkout design was a success and it was duplicated across the DTC portfolio: Neutrogena, Rogaine, and Exuviance. In 2024 Kenvue migrated platforms. Moving all of their DTC brands from Salesforce Marketing Cloud to Shopify. Shopify has its own proprietary checkout, similar in fact to the one designed here, so this project was ultimately archived.