top of page
About the project
Firstleaf had developed and maintained 6 different checkouts for purchases throughout the website. This not only hurt the user experience, but was also difficult to maintain from the developers side. The project’s aim was to consolidate the multiple checkouts and to give it a refresh.
Role: UX research & design, product management
Team: Subi, Evan, Santi
Duration: Ongoing
Mapping out the differences between checkouts
The first thing I did was to understand why we had multiple checkouts and if there’s a possibility of unifying them. I went through each field in detail, mapped out the differences and took screenshots to discuss it with the team.
Researching about checkout abandonment
-
Users didn’t trust the site with credit card information
-
Not enough payment methods
-
Checkout was too long / complicated
-
Website had errors / crashed
-
Couldn’t see order details / total upfront
Insights from competitors
-
Forms are usually single column
-
Omit unnecessary fields
-
Reduce the number of form fields
-
Reduce distractions
-
Make the checkout look short at first glance
-
Use auto-fills and suggestions
-
Multiple payment methods
Running some usability tests
We conducted some basic user-experience tests on the existing cart and checkout. The target audience (21-55 years old, interested in wine and e-commerce) were given some tasks to perform, to uncover the pain-points of the site.
Key findings
_edited.png)
Site has the basic functionality
User questions security of payments
Low brand recognition & trust
Poor UX
Ideation phase
Designers, developers and product managers came together and ideated. We discussed functionalities, features, problems, KPIs and questions. Everyone’s unique suggestions were noted down. I went ahead and created a list of features / improvements that we needed to make and what returns we would get from each of them.
Laying out features & pay-offs
Using the previous brainstorm as a base, I went ahead and sorted the ideas into different features and the pay-offs that we would get by making those improvements. This helped to portray ideas clearly and to convince the stakeholders as well.
Building out a design system
We made use of the brand refresh which was going on and created a new style guide for the company. This demanded a lot of collaboration between the designers so that the style guide is in sync.
Drilling down to a wireframe
For the major features, I initially created several wireframes which was then reduced to 2, and then finally to 1 based on brainstorm sessions with developers and product members. We ended up selecting designs that were not only user-friendly but something that would also support our back-end and make managing easier.
Third-party integrations
In order to realize some of the planned features, we had to connect with our Payment integrator Stripe. They suggested a couple of complex back-end changes and a design layout for checkout - which led to a lot of discussions between us. Keeping time and practicality in mind, we moved to our next step.
Divide and conquer
In the middle of the process, we were facing obstacles and we realized that we bit off more than we could chew. Even from the developers’ side, it was too many features and changes at the same time. To make the project more manageable, we broke it down into several phases, which made it easier for everyone involved.
Easily accessible cart
We added the Cart to the main navigation, so that users can access it even if they navigate elsewhere and come back.
Final Design
Creating a base that will support future features
The 6 checkouts were consolidated into one simple, user-friendly flow. The design was made to suit every aspect of our business - be it adhoc orders or subscriptions. It would also be a strong base that would support the addition of different features in the future - both design and development wise.
Delivery based on user's schedule
Sometimes while placing orders, users realize that they will be out of town or won’t be available during the delivery date. We gave those users an option to select their own delivery date as per their convenience.
Easy gifting
In the previous checkout experiences, the option to gift an order wasn’t easy. In the redesigned experience, we made it easy for the user to create a gift order, optionally letting them add a gift message.
Concise error states & promo codes
Error states and their placements were re-imagined, so that the user understands and corrects the error, without frustration. The promo code flow was also improved.
Auto-fills to save time
In order to save time for the user and to ensure a short and efficient checkout experience, we used auto-fills wherever we could.
Respecting the user's privacy
In this age, privacy of users is of utmost importance. In order to respect the privacy of users, we gave them the option of saving their payment method if they wanted to or continue without saving.
Delivery options
Review Page
Saved credit cards
FedEx Pickup Locations
Order Summary
Payment details
Status: In development
We completed reviewing the designs with leadership and developers and the project is now in the development phase. Frequent check-ins are being done and questions are being cleared promptly.
Future Phases
For the next phases of the project, we have decided to focus on the following features :
-
Third-Party payments
-
One-click checkout
-
Upsells and cross-sells
-
Converting adhoc members into subscribers
-
Cart design and development
-
Subscription (checkout) design and development
-
Thank you page
-
Gift cards redemption
-
Guest checkout
bottom of page