CoffeeHouse

CoffeeHouse is an international coffee store chain with locations in New York, Chicago, San Francisco, Cleveland, London, Nantes, and more. It aims to serve quality coffee with local flair. They offer both ready-to-drink and whole or ground beans by the pound. Their specialty drinks are made to order at their counter for each of the cities they currently operate in, they have crafted an exclusive coffee-based beverage that can only be ordered in its city. They are now entering the online market to provide their users an online ordering with store pick up service. For this project I created a mobile app that would meet the goals of CoffeeHouse and their customers.

Project Overview

CHALLENGE

Creating a CoffeeHouse app to help customers place orders as a group and pick up at once so that the time spent in in-store queue can be avoided and payment process is made streamlined.

SOLUTION

Design an app that incorporates features based on the goals of the user and the business and also meets the branding to effectively communicate CoffeeHouse's unique personality.

ROLE

UI/UX Designer

DURATION

May 2022, 4 weeks

Kickoff

After studying the brief of CoffeeHouse that was presented I asked myself a few initial questions. Who is the primary user? What kind of goals do they have? Why would the users want to use this application? After researching about CoffeeHouse's daily customers to establish archetypes later on, it became evident that the goals they wanted to accomplish all fell within the same categories; place and monitor group orders without actually having to visit the store.

DISCOVER

Research

While I had an understanding of who CoffeeHouse was based on the brief, I wanted to understand the primary users better and the market. I needed to gain a better understanding of both through research.

User Persona and User Story

Based on the CoffeeHouse brief and the information about the types of customers, I created a persona to represent the primary customers of CoffeeHouse. After this I created a user story from the persona's point of view. With this, I continued to make sure that I was designing for Anush throughout the whole process.

"AS AN ambitious junior employee who places and collects coffee orders for the team I WANT TO submit and monitor group orders in advance SO THAT I can get everyone's coffee accurately and when it is fresh"

User Journey

To understand the series of experiences Anush goes through to get coffee for his colleagues, I created a user journey map.

Competitive Analysis

To understand how CoffeeHouse's competitors are providing in-app orders and what are their strengths and weakness I conducted a competitive analysis of three main competitors of CoffeeHouse: Dunkin Donuts, Starbucks and Costa Coffee. The goal of this competitive analysis is to compare the ordering experience of each competitor's app.

DEFINE

Problem Definition

While I had an understanding of who CoffeeHouse was based on the brief, I wanted to understand the primary users better and the market. I started to probe further to learn more about Immanuel's problems by formulating problem and hypothesis statements to steer my ideation process.

Crazy - 8s

During the ideation phase, I used the crazy-8s method to come up with rough solutions I could provide and select what I considered most feasible and impactful. This process helped me craft a goal statement for the project.

Goal Statement

The CoffeeHouse app will let users place group orders anytime in advance which will affect users who often place aand pick up large orders by saving them from waiting for a long time in queues.

Information Architecture

Application Map

To help users understand where they are in the application and help them find the required information easily I organised the content into an application map. The map is informed by user research and how existing similar products are structured. The map is updated throughout the process.

User Flow

I created a user flow chart to understand the path taken by Anush on the CoffeeHouse app to complete the task of placing a group order.

DEVELOP

Wireframing

P & P Wireframes

Working through a few very basic designs, I used a timer and created 3-5 wireframes for each screen. I stimulated further sketching by swiftly filter out the good and poor features, selecting features from each screen and finally creating the final screen.

Mid Fidelity Wireframes

Before concentrating on the visual aspect, I wanted to make sure that the design was user-friendly. To do this, I created a mid-fidelity prototype that would allow me to swiftly test the design with actual users and make any required adjustments before including the branding and visual design. Before building the prototype, I created mid-fidelity wireframes of the key screens that users would interact with using Figma.

Home Screen

Location Selection

Main screen

Group Screen

Order Preview

Checkout

Order Confirmed

Mid Fidelity Prototype

Using the wireframes, I worked to produce a mid-fidelity, minimally functional prototype using Figma for usability testing.

Mid Fi Prototype

Usability Testing

After completing the prototype, I worked on a test plan. I then recruited participants and conducted usability testing in order to see how users interact with my design and identify where improvements to the design can be made. I conducted a remote, moderated Think Aloud testing over Zoom. The users were asked to share what they were doing, thinking, and feeling while interacting with the prototype and trying to complete the tasks given to them.

TEST OBJECTIVES

Test if users can easily complete the tasks
Observe the different paths users take to complete tasks
Assess areas of improvement to improve the usability of the design

TASKS

Select a drink and add it to the cart.
Start a group order.
Add drinks to the group order.
Check out and place the group order.

OVERVIEW

Method: Remote, moderated usability testing (Think Aloud)
Participants: 3
Age: 20-25 years
Average Time: 7 minutes

Affinity Map

I compiled all of my notes and observations into an affinity map to summarise the results of my testing. This made it easier for me to process the many patterns I noticed while testing and to identify which revisions should be given priority in order to enhance the usability of the design. Based on the patterns observed related to the users’ pain points, I was able to uncover insights which helped in recommendations for the revisions.

PAIN POINTS

3/5 participants had trouble understanding that the location link was clickable.

5/5 participants had a hard time knowing what to do to start a group order.

4/5 saw a use for more information about the group order status.

5/5 participants were confused by the group icon.

4/5 participants were looking to be informed about when the order is ready to be picked up.

3/5 had a hard time understanding who would make the payment.

INSIGHTS

Users need better cues for understanding the functionality of location.
Users need better cues for what steps are required to start a group order.
Users need quick access to group order status information.
Users need a more intuitive way to access the group page.
Users need better queues for the information about their order status.
Users want a clear way to make the payment.

RECOMMENDATIONS

Make sure all links are clickable and add a location icon next to the link.
Display information about group ordering on the Homepage.
Add a drop down section for the active group displaying the order information and status.
Add labels to all the features and make the group icon convey it's purpose.
Display a timer with the order status on the home screen that notifies when user needs to start from their place to pick up the order.
Add group accounts to the group and display who is the host.

Priority Revisions

1. Make sure all links are clickable and add a location icon next to the link.

Before

After

2. Display information about group ordering on the Homepage.

Before

After

3. Add a drop down section for the active group displaying the order information and status.

Before

After

4. Add labels to all the features and make the group icon convey it's purpose.

Before

After

5. Display a timer with the order status on the home screen that notifies when user needs to start from their place to pick up the order.

Before

After

DELIVER

Style Guide

I worked on establishing CoffeeHouse's visual identity and developing a style tile after making the revisions to improve usability. I set the branding's visual direction to reflect their own personality.

UI Kit

Using the style tile as a guide, I incorporated CoffeeHouse's branding into the UI elements utilised for CoffeeHouse's application. To make sure the design guidelines are followed consistently, I created a UI kit to document and reference them.

Final Prototype

Finally worked on the final, high resolution wireframes using my revised wireframes and produced a finished prototype. The style tile helped me incorporate their branding into the visual elements of the application.

Final Prototype

Reflection

This project helped me better understand the critical role that research and testing play in developing products that fulfil users' actual needs rather than simply their perceived needs. If I were to push this project further, I would re-test with the high-fidelity prototype, the changes I made after the usability study. I would incorporate changes if the project needs any, add more features identified in the initial phases.