A responsive e-commerce artisan coffee shopping experience and backend order management system.
Intent:
Redesign of an existing E-commerce website
Role:
User research, Interaction designing, Usability testing
Tools:
Pen & Paper, Sketch, InVision
Duration:
6 months
Team:
I was the UX designer. I collaborated with the technology lead, programmers & graphic designers from an agency
The primary objective was to redesign flyingsquirrel’s existing website to create a new seamless online shopping experience for a niche coffee audience in India and introduce them to a new coffee concept called ‘Artisan Coffee’, sold directly to the users from the farm through an e-commerce platform.
The secondary objective was to design a backend order management system for the brand to manage, process and ship the coffee orders.
Flying Squirrel Coffee set out to be a pioneer in India's newly booming online direct to customer (DTC) artisan coffee business. The idea was to use the power of E-commerce and sell small-batch coffee directly to customers and eliminating middlemen or having a physical store. The brand initially launched a website but failed to generate enough sales and realized that a redesign was necessary to achieve the business goals.
There was a clear opportunity to decipher the online coffee buying process of the customers, gain their confidence, and help them purchase the coffee that they would love to consume right from their homes.
I redesigned and shipped the e-commerce platform from ground up by taking a research informed design approach. This helped me in identifying customer barriers and even gave me enough data and insights to make informed design decisions. After launching the new shopping experience, there was an 80% coffee sales for the brand.
A clear and user-friendly navigation structure delights customers during their product discovery process. All the products are categorized under the Shop tab with separate pages dedicated to coffees, brewing equipment, gifting, and more.
Returning users have an option to avoid navigating to the coffee details page and can quickly customize their coffee order from the coffees page, add their order to cart, and complete placing their order fast.
The grind size selection has an easy to use drop down menu with a nomenclature that matches the names of the customer's' brewing habits.
Extra details like the coffee origin, flavor, type of roast, and the processing method provide a sensory-like shopping experience and help the customers in imagining the taste of the coffee they are shopping for.
In the following sections, I will explain the steps I took throughout my process to arrive at the final design solution. I will also explain my rationale behind the design decisions.
Homepage: I gave the homepage a score of 2 out of 5. There was minimal feedback to the users about what was going on during their interactions. The content structure and hierarchy needed improvement. Recognition of objects and call-to-action was minimal.
I started by evaluating the existing website using Nielsen Norman Group heuristics. I decided to score the features and functionalities using a 5 point scale. My findings are below:
Navigation: The navigation scored a 2.5 out of 5. There were repeated menus with no clear navigation path. The overall information architecture of the website needed rework.
Functionality & features: I gave the functionality of the website 2 out of 5. The core task of users discovering coffee and buying it online had many drop-offs and failures. Users were expected to leave a note about how they wanted their coffee ground, roasted, etc. The homepage and the main coffee pages had competing content and information that distracted the user from completing the main goal(s) of completing the purchase.
Competing content on the homepage.
Text box used for a user's selection-based input.
Before designing, I wanted to understand the behavior of the customers. I wanted to gain insights about how they would shop for coffee online. In 2016, the concept of buying coffee online was new and people were still getting used to the new idea. So, part of the challenge was to gain the confidence of the customers that they were buying genuine fresh coffee, just the way they would if they went to a physical store.
I demystified the online coffee buyer's journey through the user interviews.
To better understand the users I was designing for I arrived at the following two personas. The following personas was based on the insights from the interviews and surveys.
I worked with the founders and other internal stakeholders to combine insights from my research and their knowledge to identify core opportunities. I also brainstormed with the technology lead to come with with possible ideas for the new E-commerce platform.
I focused on how the two personas would interact with the website and sketched out how people would interact with the website. After brainstorming multiple ideas, the following flow and features were finalized.
New Sitemap
I conducted 2 rounds of hybrid card sort sessions with the internal stakeholders and 10 customers to arrive at new information architecture. Then, I used a free online tool to mockup a clickable sitemap and tested it with 5 users. I gave them 2 tasks asking them to buy coffees and learn how to brew a coffee. The users navigated and clicked on expected tabs and took the desired navigation paths. Both tasks were a success.
I made wireframes of 3 key screens. The idea was to reuse components across the website. This was done to reduce the design to development to launch time. I started by designing the coffees page, coffee details page and the home page. The coffees page and coffee details page designs were reused for accessories and brewing equipment pages too. Then, I designed the remaining static content based pages.
Example of how User Testing was used to improve the design
By testing the Buy Coffee user flow I found that repeat users wanted a quick checkout option as they were already familiar with the details of coffee. For this purpose the main coffees landing page's coffee cards were updated to include grind size selection, coffee bag size and quantity selections and customers could directly add to cart without going into the details page.
I was the UX designer and digital consultant for the brand. I worked independently for the UX design part and collaborated with UI/ Graphic designers for implementing the brand guidelines.
During the go live phase, I collaborated and worked very closely with the technology lead and the developers to launch the new experience.