The Flying Squirrel Coffee

Aug 2016

A responsive e-commerce artisan coffee shopping experience and backend order management system.

Redesign of an existing E-commerce website

User research, Interaction designing, Usability testing

Pen & Paper, Sketch, InVision

6 months

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.


How can we simulate the browsing behavior typical of an in-store coffee shopping experience in an online environment?

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.


A completely redesigned responsive e-commerce storefront that was designed to educate the customers about artisan coffee and help them easily shop for customized coffee bags online.

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.

Above: The final design of the homepage
Above: The final design of the products page

A re-imagined online coffee shopping experience

Structured Website Navigation with an Easy to Discover Product Categorization

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.

A quick checkout option for repeat buyers

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.

A coffees details page with detailed information about the coffee and user generated reviews, to help customers with the decision making process.

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.

Heuristic Evaluation

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.

User Research

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 started with competitive analysis to draw inspiration from global brands
  • I looked into the existing Google Analytics site data
  • Then, I conducted user interviews and followed them with a survey
  • I also went into a physical store of a leading global brand to observe coffee drinkers behavior and studied their shopping habits

Main Insights from one-on-one interviews with 15 participants. The survey had 31 responses.

  • Traditionally, coffee shopping was a sensory experience in India and most of the coffee shopping happened physically in-store. 70% of the participants I interviewed expressed doubts about how the coffee would taste and smell if they shopped for it online
  • 75% of the participants said that they wanted the website to be informative to help them through the decision making process
  • All the users wanted a responsive mobile friendly website
  • Only 35% of the participants knew about small-batch artisan coffee. Most participants had limited knowledge about artisan coffee but said they would buy the coffee if the website educated them about the concept and the coffee growing methods
  • All the participants expressed the need for a clear and easy checkout path that would help them complete their order with minimal obstacles

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.

Brainstorming & ideation

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.

Above: The final stiemap based on the results from hybrid card sorts


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.

Design Highlights– The main Coffees Page

  1. The look and feel was inspired by the visual merchandising practices in physical stores. This would trigger recognition in online coffee shoppers' minds. The idea was for shoppers to view this page just as how they would glance through coffee packs in a physical store
  2. To address the requirement of having a sensory experience even online, each coffee card had a snapshot of how the coffees would smell and taste. Clicking on each of the card would give shoppers even more details of the coffee
  3. The bottom section of the page was dedicated to suggesting accessories and brewing equipment that can complement the customer's coffee purchase. This addressed the brand's business goal of selling the new idea of home brewing

Design Highlights– The Coffee Details Page

  1. The content hierarchy was based on the insights from user research where users requested for clear information and details of the coffee about how it would smell and taste
  2. High quality images were suggested for revealing details of the coffee and the packaging
  3. The coffee ordering process had multiple permutations and combinations possible, so instead of requiring the customers to enter details, the design accommodates selections for grid size and pack size through drop down menus
  4. Clear call-to-action was provided in the first fold for customers to add their order to the cart
  5. Each page had a you may also like section to address the brand's business need to sell other coffees, accessories, and brewing equipment

Design Highlights– The Homepage

  1. The new homepage design had a clearly defined single hero section with a call to action in the first fold
  2. High quality images were suggested for the homepage
  3. Sections showcasing coffees, accessories, equipment were defined
  4. A section was included explaining what artisan coffee is, so that customers can gain info straight from the homepage about the coffee and how it was grown  

Prototyping & testing

An Iterative Design Process all along

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.

Prototype of the Buy Coffee User Flow


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.

Taking a user-centered design approach to develop the new e-commerce storefront had a direct business impact after the product launch

  • This project was my first full-fledged UX project and having a business know-how really helped me see through the project to the end from a consumer’s perspective. After launching the redesigned E-commerce platform, the results were more successful than what I had expected
  • Sales grew by over 80% in less than 6 months of launch. This gave me a clear reassurance that user experience and human centered design approach is quintessential for modern day E-commerce
  • Collaborating with the tech developers right from the start of the project helped me save time and eliminated misunderstandings
  • Understanding the platform or the coding language and frameworks and approaching the design from a code capability perspective helped me in delivering the project within the quick turn around time that was expected
  • Collaborating with cross-functional teams gave me a satisfying professional and personal experience and reinforced my belief in teamwork