Context
After reviewing acquisition performance on Amplitude, the product team at Freshly noticed 65.1% of users were dropping out of our funnel once they reached the checkout step.
We believe this was due to friction caused by:
​
-
Long forms to fill out
-
Inefficient use of screen space
-
Phone number requirement
Duration
September 2022-November 2022
Team
I was one of two Product Designers working alongside:
-
Product Managers
-
Engineering Team
-
UX Research Team
Skills
-
Product Strategy
-
Competitive Analysis
-
Interaction & Visual Design (Mobile and Desktop)
-
Prototyping & User Testing
Problem Statement
"How might we increase the percentage of people who complete the checkout process after starting it?"
Old Checkout Flow
The old checkout flow was a 3 step process where the user entered their delivery information, then their payment information, and then they were finally brought to the order confirmation page.
.png)
Identifying Friction in Old Design
The Product Managers and Designers worked together to address different aspects of the old checkout design that might be deterring customers from reaching the end of the checkout step. These pain points were identified through our own research and studying industry standards.
.png)
User Testing
My fellow designer and I redesigned the checkout process to address the concerns our team had with the old design. We then created a prototype for a usability test that our UX research team conducted.
Study Goals
Prototype for Usability Test
What are we testing?
Key Takeaways
-
Overall, the checkout process is simple and straightforward
-
​The process is simple and similar to what people are used to seeing on other sites, but it may be unclear that people can also pay with a card, next to express checkout payment options.
-
-
People initially cannot find the promo section themselves
-
​Most expect it close to the payment section rather than in the order summary.
-
-
It can be unclear to people that they're signing up for a subscription
Final Designs
My fellow designer and I applied the feedback we received from user testing to land on our final designs.
So what design changes did we make?
Order Summary
Order summary takes up a lot of space and pushes down the form fields where actual data entry starts.
To solve this the order summary section is now sticky to the top of the screen and can expand or collapse at any point
Promo/Gift Cards
Participants of the usability test stated that the promo section was difficult to locate in the initial designs because it was nested in the order summary drop-down.
To solve for this we took the promo and gift card text links out of the order summary section and placed it as one link under the drop-down so it would be more noticeable and take up less space.
Express Checkout Options
Customers were frustrated with long forms, especially on mobile devices. Integrating express payment options from familiar providers at the beginning of the checkout experience provides a quick path to checkout for users.
Additionally the place order CTA copy was updated to make it more clear to users they were starting a subscription, since this was feedback we received from usability testing.
Standard Checkout
Based on feedback from the usability test we updated the standard checkout with a label so users clearly understand the difference between this option and express checkout.
Standard checkout is now more seamless and condensed with the new 2-step, collapsible design that translates clearer and takes up less space.
Let's review the two new checkout flows
Express Checkout Flow
Express checkout will allow the user to expedite their checkout process by choosing an express option that will redirect them to the respective page before bringing them back to the place order step which will allow them to finalize their purchase.
Standard Checkout Flow
Standard checkout allows users to still have the option to pay by credit card. The express payment options will be presented again at this point on the page should they choose to use one of these options instead.
.png)
Desktop Design
The majority of our users are on mobile platforms and that is where we see the most challenges with screen space, however we did make sure our design was responsive and could translate to desktop seamlessly.
