Redesigning an e-commerce checkout flow to retain more customers
Brief
Urban Leaf is a company selling simple DIY hydroponic plant kits through a responsive e-commerce website. Urban Leaf has worked with a previous UX Team to re-imagine the end-to-end checkout experience of the site. They then asked my team to apply our design skills in order to establish and enhance the feel of the brand. This included interaction design, behaviors, and the overall look and feel within the site.
Problem
Urban Leaf kept losing customers during the check out process of their user flow.
Clients
Nathan Littlewood (Co-founder, CEO)
Robert Elliott (Co-founder, Chief of Product)
Role
My role on this assignment was to manage the user interface and take charge on any visual/aesthetic changes that needed to be made throughout the project. I worked with a team of two other students both within the same UI/UX tract as myself.
Timeline
This project took 6 weeks. (February 7th - March 22nd)
Tools
Sketch
Invision DSM Manager
Adobe Illustrator
Zeplin
Provided
Personas
User Data (Including conversion ratios)
Low-fidelity wireframes (annotated)
Outline of current user flow
Action Items
This project focuses on the creation and application of a UI treatment throughout the entire website. Over the course of 6 weekly sprints my team completed the following:
Round 1: Prototyping and User Testing
After reviewing the wireframes that were given to us from the UX team, we implemented our design skills to create the first prototype.
We then conducted the first round of user testing:
For this round, we wanted to validate the visual aesthetic to make sure everything on the website was clear and obvious. Most importantly we wanted to test the user flow of purchasing an item since the client's main goal is to increase conversion rate.
Location
Testing was held in various locations, as well as remotely.
Users
6 users were tested in total.
Equipment
Otter transcribing app
Smartphones
Zoom
Macbook
Round 2: Prototyping and User Testing
After synthesizing our findings we did another round of user-testing on our new designs. This round, we wanted to validate that our criteria tested the usability, and make sure there were no more obstacles to the user flow. This was important since optimizing the conversion rate is the client's main goal.
During this round, we collected more viable research on other screens in terms of the design and how to further enhance the brand through visual design.
Final Design
For our final round of user testing we wanted to validate that our implemented design solutions were correct. It was also necessary to produce a checkout flow that improved the conversion rate for any purchases. This was to make future customers more confident in their purchases from the site.
After 3 rounds of user testing, testing a total of 18 users and also having weekly meetings with the stakeholders, my team and I came to a final design that was approved by the stakeholders.
Conversion Rate Variables
Developer Handoff
After the stakeholders approved the design, we passed the final deliverables onto the developers in a Design System Management Library.
The developers asked us to use Invision for our final handoff, so we created a Design System Management (DSM) library for them to use to implement our final designs.
While this was a recent project, the stakeholders are currently tracking the website conversion rate and how our designs and research will positively impact the conversion rate.