top of page

Wake Cup

Designing an end-to-end product on finding cafés

Screen Shot 2023-09-11 at 8.21.48 PM.png
Screen Shot 2023-09-11 at 9.05.19 PM.png
Screen Shot 2023-09-11 at 9.09.12 PM.png

project overview

roles

timeline

UX Research

Wireframing

Brand Design

Prototyping

Usability Testing

80 hours

tools

Figma

Optimal Workshop

Maze

01 background

As a result of the pandemic, remote working has changed the professional world and will continue to be implemented in companies nationwide.

What impact does the rise of remote work have on coffee shops, and how can they benefit from this shift?

According to Forbes:

Currently, 12.7% of full-time employees work from home

28.2% of employees have adapted to a hybrid work model

By 2025, an estimated 32.6 million Americans will be working remotely, which equates to about 22% of the workforce

How does this relate to coffee?

Cafés are taking this to their advantage by creating spaces for those who "camp out" with their laptops, by bringing in better wifi, more outlets, and a quiet environment with coffee on the side. 

problem

Finding the right coffee shop that fulfills a person's desired amenities for working or studying can pose a challenge.

On numerous occasions, I visited coffee shops with the intent to be productive on work-related tasks. However, I often had to leave due to insufficient seating, limited outlets, or excessive noise that hindered my ability to concentrate.

research goals

We want to know what current café goers value about working/relaxing at a cafe so that we encourage more people to go to their local cafés to work/study.

research objectives

Determine how the goal of the person's reasoning for visiting the coffee shop are accomplished

ex: able to study with no distractions

Identify the rank of importance between the ambiance of the coffee shop vs the taste of the coffee

Identify the percentage of people that go to coffee shops often to work/study, relax, meet up with a friend, etc

02 discover

I conducted market research to understand how competitors engage with their users and discover effective solutions.

competitive analysis

Screen Shot 2023-09-09 at 5.46.10 PM.png
Screen Shot 2023-09-09 at 5.48.03 PM.png
Screen Shot 2023-09-09 at 5.48.14 PM.png

strengths

has filters of features that a user might need (ex: pets allowed)

users are able to add ratings and reviews

includes a product page of all the necessary products that are needed to run a café

features amenities (ex: moderate noise level)

users can interact with each other by asking and answering questions about the café

able to view international coffee shops

photos uploaded by users can be categorized by food, drink, inside, outside, and menu

weaknesses

newer cafés on the app do not have features or reviews, so users might skip over the café from the lack of information

doesn't list all the cafés in the area -- the user has to search for a specific shop to get to the page

unable to filter through amenities in the home page

includes all of the franchises' locations in the area -- doesn't seem efficient with the user's needs

Based on my findings, I identified an opportunity for users to filter specific amenities, enabling them to enhance productivity, find a relaxing environment, or connect with friends.

user research

I conducted user interviews to discern the needs, frustrations, and motivations stemming from individuals' experiences while working or studying at a coffee shop.

More specifically, I wanted to find out what people value about working/studying at a coffee shop and if others had the same frustrations as I did.

key takeaways

100% of participants have or currently study/work at a coffee shop

100% of participants have been frustrated with the coffee shops' lack of amenities

50% of participants have had new coffee shops that they tried meet their expectations 

03 define

The frustration stems from the lack of amenities being displayed or indicated on the website or review page.

Arriving at a coffee shop with the intention to be productive, only to find unreliable wifi, is a common frustration among people. They seek an assurance that their choice of coffee shop will provide a conducive environment for their work or tasks.

pov & hmw

To center on the user and their requirements, I developed two POV and HMW questions. These served as a foundation for brainstorming solutions to address these challenges.

POV #1:

As a person looking for a quiet place to be productive, I want to see the amenities like stable wifi, noise level, and seating, so that I don't waste my time traveling to the shop just for the place to be loud and distracting.

How might we...

Find a method to prioritize amenities as a way for users to find what coffee shop they are looking for.

POV #2:

As a coffee advocate looking for a new coffee shop, I have expectations of how my drink would taste, so that I don't waste my money on low quality coffee.

How might we...

Create a transparent list of how the baristas make the coffee so people can see how the coffee is prepared.

user persona

In order to better understand and empathize with the user, I crafted two user personas to ensure alignment with their needs and expectations.

User Persona.png
User Persona.png

With these personas, I can give a personality to each user, making the experience more relatable and human.

user & task flows

I developed user flows to plan the presentation and structure of information within the product, ensuring a clear organization of the information architecture for user navigation.

coffee user and task flows_edited.jpg
coffee user and task flows_edited.jpg
coffee user and task flows_edited.jpg

The flows I created help understand how the user approaches completing the goal or task and help eliminate extra steps to offer the most efficient path towards the end goal.

04 develop

I created wireframes to visually illustrate the functional layout and flow of the product.

mid-fidelity wireframes

I crafted mid-fidelity wireframes to outline the structure and visualize the user's navigation across each screen in the product.

Screen Shot 2023-09-11 at 11.19.38 AM.png
Screen Shot 2023-09-11 at 11.19.50 AM.png
Screen Shot 2023-09-11 at 11.25.46 AM.png
Screen Shot 2023-09-11 at 11.20.03 AM.png
Screen Shot 2023-09-11 at 11.20.26 AM.png
Screen Shot 2023-09-11 at 11.20.10 AM.png

Defining the fundamental structure of the product provided a clear overview of user flows, helping me identify essential elements required for accessing information about a coffee shop.

ui components

Prior to advancing to high-fidelity wireframes, I developed a UI kit to maintain consistency in the components across the product.

coffee ui components.png

high-fidelity wireframes

I completed the screens by incorporating color and additional elements, thereby bringing the product to life.

View cafe page

Screen Shot 2023-09-11 at 6.49.47 PM.png
Screen Shot 2023-09-11 at 6.49.58 PM.png
Screen Shot 2023-09-11 at 6.50.06 PM.png
Screen Shot 2023-09-11 at 7.53.17 PM.png

Search by filter

Screen Shot 2023-09-11 at 6.50.06 PM.png
Screen Shot 2023-09-11 at 7.58.05 PM.png
Screen Shot 2023-09-11 at 7.58.13 PM.png
Screen Shot 2023-09-11 at 7.58.21 PM.png

Leave a review

Screen Shot 2023-09-11 at 6.50.06 PM.png
Screen Shot 2023-09-11 at 8.00.52 PM.png
Screen Shot 2023-09-11 at 8.01.02 PM.png
Screen Shot 2023-09-11 at 8.02.03 PM.png

Using the key screens, I conducted a usability test with five participants, tasking them to navigate the prototype and complete assigned tasks.

usability testing

100% direct success rate across all tasks

4.6 average rate out of 5 in terms of navigation flow

All 5 participants pointed out that the "Leave a review" button was hard to find

design interations

Incorporating insights from the test, I refined the "Leave a review" button and made final adjustments to enhance the screens.

Screen Shot 2023-09-11 at 8.00.52 PM.png
Screen Shot 2023-09-11 at 8.20.21 PM.png

Participants had trouble finding where to leave a review, so I revised from a link to a secondary button.

Screen Shot 2023-09-11 at 6.50.06 PM.png
Screen Shot 2023-09-11 at 8.21.48 PM.png

I also added the logo to all of the home screens to keep the brand imagery consistent throughout the product.

final prototype

I developed a prototype to help find nearby coffee shops, including specific amenities users might want.

Filter amenities and find coffee shop

wakecup prototype.gif

next steps

Add more key features

To create an MVP, I excluded additional features such as filtering by various coffee shop aesthetics, which cater to those seeking visually appealing places as part of their coffee experience

bottom of page