Cuppa

CASE STUDY

Cuppa is focused on simplifying the process of finding your personal flavours of coffee, and purchasing from your favourite shops across the city. In this 10 week solo endeavour, I discover first-hand what being a UX Designer is all about.

 

Process           Duration           Tools

Ideating                     10 weeks                       Figma                                             

Empathizing                                                     InVision                               

Prototyping                                                      Sketch

User Testing                                                     Marvel

Strategizing


afsadklfj

PROJECT OVERVIEW

INTRODUCTION

Prior to the COVID craze months ago, a friend came to me and asked me for recommendations on the best coffee beans in the city. Online research directed me towards two general realizations: firstly, that there isn’t a dedicated application anywhere to help aid in the search of coffee beans, and secondly, finding the right flavours and profiles are subjective and hard to quantify.

undraw_hang_out_h9ud

PROBLEM SPACE

Coffee remains a staple item for people all over the world, no matter the time of day. With the rapid growth and influence of coffee companies such as Starbucks, coffee culture is taking the world by storm, and it is slowly becoming a lifestyle that people are adopting. With the sudden onset of the novel coronavirus (COVID-19) pandemic, many casual coffee drinkers have no choice but to turn towards brewing a coffee at home, in opposed to buying on-the-go from coffee shops. This serves as a prime opportunity for consumers to tap into the intricate world of coffee. 

Due to this, I wanted to find a viable solution for all the coffee people out there during this isolation era - and aid them in the search for coffee-related products. With the slow transition of brewing at home for coffee, finding the perfect type of bean or roasts are becoming more important than ever. With little specialized knowledge and background on the different types of beans or roasts, finding the best suited coffee bean (or roast) can definitely pose as a challenge.

nousnou-iwasaki-myPzH34VYK4-unsplash

With ample solutions on the market today for coffee goers to confide in, this could be a valuable opportunity to develop a platform that can help users find the right selection for them. This potential solution should be made with the consideration that it will extend beyond into a post-COVID era. 

PROJECT CONSTRAINTS

In order for this product to receive any attention, connections with coffee roasters and shops from all around the city will be needed. Only then will the platform gain any traction, as it would be established that there is a database of shops and beans for potential users to browse, thus, garnering interest within its users. Popularity of the app or platform will play a huge role in determining the success of this project. As this is a capstone project meant to span multiple weeks, time serves as the biggest constraint as this runs concurrently with other projects within the course.

HOW MIGHT WE

Group-223

RESEARCH PROCESS

INTERVIEWS

USER INTERVIEW 1


USER INTERVIEW 2

To really understand the end consumer and what drives them to consume coffee or coffee related products, I prepared a set of  interview questions which aims to determine the basic pain-points, behaviours, and motivations behind their experiences. 

"I'd much rather look for things online, like on Google over going outside to a barista, and asking them."

"I think it would be interesting if, for example, this app would kind of learn from my behaviours."

Learning about the problems of potential users from these interviews is an amazing way to become inspired and motivated. Working with real world data is a fantastic starting point to avoid guesswork, assumptions, and preconceived notions about the product. The information gathered from the surveys help provide a working idea of the problem and potential solutions on how to solve it.

KEY INSIGHTS

There are three key themes and insights gained from conducting these interviews. These are seeking, sharing, and simplicity.
 

Group-222

Users want to be able to actively seek information about the things they enjoy, while being able to share their experiences, whether good or bad, with other people. Lastly, they want something that is not hard to navigate, and does not require a large cognitive load to use.

KEY INSIGHTS

From the interviews, I was able to pinpoint some pain points, motivations, and behaviours associated with finding coffee and coffee culture in general.

Group-6


With these pain points, motivations, and behaviours categorized, I was able to translate elements of these findings into more quantifiable personas.

PERSONAS

 

The results of the interviews indicated that there are multiple types of users with their own set of diverse needs. These results provided me with enough insight to figure out common patterns within the users, and with this, I created two personas which serve as a manifestation of the data in character. 


asdafa
sadas

By focusing on specific user types, I was able to keep their needs in mind and not get carried away whenever a new idea for a demand or feature pops into my head.

EXPERIENCE MAP

With the personas sorted out, it was time to begin the experience journey or map of a user. This process guides me on how the user experience might be designed to fit in with the coffee purchasing routine.

exper

TASK FLOW DIAGRAM

Up until this point, I had a brief/vague idea on how the app would’ve functioned. By sitting down and forcing myself to map out all the specific interactions of the application, it helped me with the ideation process by giving me a rough skeleton to work with, all the while consolidating ideas into actual functions and features. 

Flow-for-Capstone@2x

It also helped me figure out specific user paths and how users might go about navigating the application. This task flow diagram was briefly sketched out, then rendered digitally on whimsical.

DESIGN PROCESS

SKETCHES

Sketching was the first step in helping me realize what the application might end up looking like. Some of the key features I wanted in the app were:

  • Shop
  • Beans/shop finder
  • Profile
  • Some sort of community tab

Admittedly, due to the time constraints, I would’ve liked to spend more time in the sketching phase to really put the idea together in a more well thought-out manner.

WIREFRAMES

With the sketches done and elements sorted, it was time to bring the application to life by creating the skeletal framework on how it was going to look. This process helped me categorize and arrange certain interface elements, with primary focus on functionality rather than the visuals. 

The wire framing process is one of the most important steps when designing - the simplicity of wireframes allows me to quickly test ideas on a whim, without need to dive deep into the nitty-gritty details.  

USABILITY TESTING

To understand what can be improved for future iterations of the application, usability tests were conducted with five users in the initial usability testing round.

Without a viable platform for users to help aid users in finding the right styles for them, the goal is to create a better overall user experience for the end user. Due to this, real-time feedback was imperative to create a product that was both natural and easy to use.

With the overarching goal of "Purchasing some new coffee beans," testers were also tasked to perform five subtasks:

  • Navigate the home screen
  • Finish the quiz and update the profile.
  • Explore the “explore” page and find a specific item
  • “Buy” or purchase the item.
  • Confirm the order, and navigate back home

Usability Test Round 1 Results

USAb1

The goal of the first round of usability testing was for the user to go through the onboarding process and purchase some coffee beans. Prior to testing, the user(s) were informed of the scenario and background of the app.

The user(s) were allowed to ask questions whenever they pleased, and all users managed to reach the goal with little to no difficulty, aside from task 3, where two people were initially confused on the functionality, but eventually found their way around without any prompts.

As a follow up after the testing session, I asked the participant for potential ways to improve the usability of the application, which will be updated to help for the second iteration of testing.

Usability Testing Round 2 Results

usa2

 

The goal of the second round of usability testing was to apply some changes made from the previous round of user testing.

The tasks were the same as the first round - there was no key functionality changes within the prototypes. As predicted, the second round of user testing yielded fairly smooth results, with all participants being able to complete all the tasks with little to no difficulty.

Some valuable insight were gained to improve the viability of the prototype from the second round of user testing, which will be used to further improve the application.

 

ITERATIONS

After several rounds of usability testing, I made the necessary changes towards the wireframes. Getting constructive feedback was imperative - as a designer, I sometimes get a bit too narrow minded and only think of specific things that I want, and as a result, am often blindsided by my own thought processes. 

By heeding the advice and thoughts of others, I was able to iterate and change specific aspects of the application for the better. 

VISUAL DESIGN

INSPIRATION

Before focusing on the visual design, I gathered some inspiration as to how I envision my application to look. As this is a coffee-focused application, I wanted to give users a comforting feel when they use the application for the first time. 

asdafs

The purpose of this was to gather inspiration from other coffee-related design items, in order to learn more about the visual world around me.

COLOUR PALETTE

When one thinks of coffee beans, coffee roasts, and well, coffee in general, they instantly think of items that are brown. Brown also symbolizes strength and reliability. With that in mind, I believe that it was the best fitting primary colour of the application. I decided to go with a warm, light brown as the primary colour to fit the overall feel of the application. 

Group-368-1

Additional tones of colour was a light blue-green (minty) colour, which promotes life, youth, renewal, growth, rest and relaxation. Lastly, articles of grey, white, and black were used for supporting colours to give the rest of the application a calm and collected appearance. 

TYPOGRAPHY

Raleway is a free Google font designed by Matt McInerney. For the application, I wanted a well-balanced sans serif typeface that compliments and incorporates seamlessly into the interface. Simplicity was the driving force behind the application - and due to this, I decided to go with just one font family.

Typography

ICONS AND ILLUSTRATIONS

Icons and illustrations are an imperative part of any design - they communicate concepts and ideas which sometimes cannot be communicated with just words. Icons and illustrations also allow consistency of visual aesthetics that help establish user trust and create moments of delight during use. 

Group-368-2

Due to this, I decided to use a combination of both emojis and icons to create these moments of familiarity and discovery. Assets and illustrations are taken from undraw.co.

BRAND AND LOGO

I initially struggled with a name for the application. I definitely wanted to attribute cafes, beans or something coffee related for the name - but I just couldn’t really figure out what would be suitable. But it just came to me one day - I was enjoying a nice cup-pa coffee, and....it just clicked. Cuppa. A nice cuppa coffee.

Group-370-1

With that in mind, I started playing around with some ideas of colour, typography, and orientations for the initial design used for the cup. I wanted the finalized logo to be simple, reflecting on the everyday effortless nature of the app.

Group-370-2

I originally wanted the icon to be a bit more descriptive by adding some coffee spills of sorts, but I decided that it was important to keep things simple, and so I just settled on a tilted cup with the brand name.

Group-371-1

Shown here is the final icon design for Cuppa. Included are all the various sizes needed in accordance to the iOS Design Guidelines.

FINAL DESIGN

ONBOARDING FLOW

The goal of the onboarding flow of Cuppa is to collect information about the user’s coffee needs and transform it into their own. 

Group-372-1
Group-373-1

The most important part was to have the user fill out a short “survey” on their preferences, then have them go through a tinder-like swiping game of places they have either been to or wanted to save. This was a very interactive and simple process, which hopefully helps keep the user on track while giving Cuppa enough information to determine what’s best for the user.

PURCHASING

This element is the heart of the app. After onboarding, users receive tags on their profile which is tailored towards their tastes. When viewing a listing for specific coffee beans or shops, they can see a list of associated flavours that match their liking, so that it’s a simple way to both find the right item for them. 

Group-376-2
Group-375-3

WORKING PROTOTYPES

After designing all the necessary pages, I uploaded the working screens on InVision to bring it all to life. You can view the prototype below.

 

MARKETING SITE

SUPPORTING SITE

With the working prototypes for mobile ready, it was time to create a focused marketing website for Cuppa. I wanted to bring recognizable elements of Cuppa back towards the mobile website, while also trying to make the website as comforting and visually appealing as possible.


With the marketing site, I wanted three main sections for users to see; the landing section with a call to action for downloading, a section detailing how the application works, and a user-reviews section to help push users towards downloading the application. With the web-friendly page ready, I translated the web page elements towards a mobile front, keeping most of the elements intact for mobile-exclusive users. 

Screen-Shot-2020-10-24-at-4.58.15-PM-2

NEXT STEPS

DESIGN IMPACT

Embarking on this ten week long design project has been both rewarding and challenging. There were plenty of times over the ten weeks where I was questioning whether or not I was fit for this role of UX Design - but it was important to realize that bumps and roadblocks are common along the design process, and it was imperative for designers like myself, to trust the process and really think about who i’m designing for, and why. 

It was clear from the beginning that the biggest challenge will be to make coffee drinkers interested in something that competes with the habit and ease of just “going to a coffee shop.” I researched different markets, pinpointed and understood the needs, pain points, and motivations of users through the use of interviews and conversations. To tie it all together, I faced the momentous challenge of creating an engaging app (as well as a marketing website) from both a visual perspective, and user experience perspective. 

FUTURE THINKING

There are still a ton of things that need to be improved for the future iterations of Cuppa. Here are some of the considerations for the future.

Group-224

Some longer-term considerations include:

  • Deeper research about specific features - such as a community tab where users are able to communicate back and forth between the community 
  • Improve overall user flow of the application
  • The creation of an actual comprehensive business model to really get the product on the market, and in the hands of everyday users

FINAL THOUGHTS

Coffee is a 90 billion dollar industry that caters towards people from all walks of life. Undeniably, in our hectic daily lives that most of us lead, the convenience of being able to find a simple coffee to get us through the day is something that will not change. There is no reason to sacrifice that convenience - but what if we could add a more personalized touch to it?

The goal of this mobile application is to allow users to quickly and easily make decisions for their own coffee needs without having the need to do exhaustive and extensive research. This is where Cuppa comes into play - Cuppa is designed to help coffee drinkers find their perfect flavours, with the app providing a seamless checkout process to purchase new coffee products based on their preferences. The app also appeals to the community aspect of coffee culture by allowing users to create, post, and conversate with other like-minded individuals. 

Throughout this design process, I learned the importance of conducting user tests, and to test early, and test often. By doing so, I was able to lead a more user-centered design narrative, which provided me with valuable feedback and insight for my creations.

Following a thorough design process helped me further understand the problem space and effectively follow a human-centred design. I found myself asking "why" all too often, to every situation given in order to truly understand the crux of the problem and expose the potential solutions. This helped me find a solution while keeping in mind all the frustrations and pain points that the user may face. 

It is my hope that Cuppa will be supported by coffee shops throughout the city (and to an extent, the world), with the understanding that providing coffee enthusiasts with additional aid towards their coffee decisions is the correct way to help users discover together their perfect cup, one bean at a time. 

I want to take some time to extend my gratitude towards the instructional team at BrainStation for supporting me throughout the past 10 weeks. Their feedback and encouragement gave me enough motivation to tackle an area which I was genuinely interested in. I would also like to thank my peers and all those that helped me along the way.

Thanks for taking the time to read through my case study! Please do not hesitate to reach out to me if you have any questions or inquires.

Selected Works

Coastal ConnectDesign Sprint

Craigslist RedesignEvaluation and Redesign

CuppaCase Study