Third Wave Cafe Mobile App Design

Client

Google UX Design Project

Location

Bangalore, KA

Services

UX/UI Design

User Research

Visual Design

Prototype

The Institute for New Economic Thinking (INET), New York launched a new narrative in Economics “Samvaad” event at IIT Bombay. Samvaad embodies the spirit of creative thinking and open dialogue, breaking intellectual barriers to embrace new approaches to economics focussed on solution-based impact for society. The inaugural lecture of Samvaad was given by Prof Oliver Hart, the co-recipient of the 2016 Nobel Prize in Economics, on 14th January 2020.

Cover2.png

Overview:


Third Wave Coffee Roasters was born out of the dream to introduce India to specialty coffee or the ‘Third Wave movement’ — a movement dedicated to providing high-quality coffee that’s brewed to perfection from farm to cup. They have 30+ cafes in 4 cities across India.

Roles:
UX/UI Designer | User Researcher | Visual Design | Prototyping

Responsibilities:
Conducting interviews, wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Problem Statement


Busy workers and commuters lack the ability to make orders store locality wise.

 

It features 3 key functionalities:

  • To place the order storewise 

  • Custom menu with respect to the store locations

  • Having multiple sign in and payment options

The Goal


To design an efficient and simplified user experience to Third wave cafe App to make orders on a day to day basis and attract and retain customers in our online system.

My Design Process

TWC-CS-P1.png
UX-Persona1.png

Research Analysis


User Research: Summary 

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who were looking to make orders, book a table or order for takeaways in advance store locality wise and be able to have a delivery option available onto the App. This user group confirmed initial assumptions about Third wave customers, but research also revealed that pick up time was not the only thing lacking but also the feature to make the orders in advance was missing.

User Research: Pain points

Custom Search — The users were unable to look for menu on store wise availability
Access — Users preferred to be able to access the app without logging in
Visual — Users wanted more images of the food and also info onto classifications

User Persona

User Journey Map

UX-Journey1.png

User Flow

UX-Flow1.png

Competitive Analysis

Compt.png

Wireframe(Lo-fi/Skecthing/Prototype)


Wireframe Overview 

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a search location and stores nearby display to help users save time.

BC1D54BF-5BBB-47D9-B7C4-78951007CD7A.JPEG

Digital Wireframe  

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research

Max no of users have issues with not having multiple log in options and skip option

digi-wire2.png

Digital Wireframe  

Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.

Easy access to navigation that’s screen reader friendly.

digi-wire1.png

Low-fidelity prototype   

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was from sign in to completing making an order, so the prototype could be used in a usability study.

lofi.png

Usability study: Findings   

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

usability-study.png

Interface Design

Mokcups 

Early designs allowed for some custom search but default display was not specific to the current location tracked, thus after the usability studies, I refined the display options to reflect stores nearby current location detected and also to search for another locality. I also added the options as main navigation so the user see all the available options like Reservation, Delivery, and Pick at store when they first land on the home screen.

The second usability study revealed the frustration with the checkout flow. to streamline this flow, I consolidated the “Current order” and “Checkout screens” to “Order summary” screen and “Payments” screen with multiple modes of payment options.

usability2.png

Key Mockups

Key-Mockups.png

High-fidelity prototype 

The final high-fidelity prototype presented seamless user flows for ordering and checkout. It also met the users needs for a custom ordering on store location basis and with multiple options provided for signup and checkout.

hifi-proto.png

Accessibility considerations

Provided access to users who are vision impaired through adding alt text to images for screen readers. Used icons to help make navigation easier. Used detailed imagery for food items to help all users better understand the designs.

usability1.png