Café Finder App

Craft a café finder app for remote workers that facilitates café discovery and community engagement
PLATFORM
Mobile
DURATION
01/22-05/22
TEAM
2 UX Designers, 1 UX Researcher, 1, UX Writer, 1 Brand Designer
Café Finder App

Overview

Before going to a cafe, I often spent a lot of time searching for a perfect place. The cafes I go usually end up repetitive, and planning them is quite an effort. Remote working has been a trend for a while. Coffee shops are becoming the new remote workplace.

Problem: Lack of customized cafe-finding solutions

People turn to a general solution like Google Maps or Yelp since there's no customized cafe-finding product on the market. Considered factors like music genre, chair softness, wifi speed are hard to discern.

How might we let remote workers find a cafe that matches their preferences conveniently and time-savingly?

Goal

Create a product or service that can let people browse and find a coffee shop based on their expectations, and assist them in finding their favorite place to work or study.

Research

How remote workers look for an ideal café?

Our team directed individual interviews with 6 participants from ages 23 to 30 with remote working habits at a café to understand how people currently look for coffee shops and what they care about the most.

Interview key findings:

  1. Social media, Google Maps, and friends' recommendations are the main information source.
  2. Atmosphere, interior design, wifi speed, music genre, coffee taste, etc., are all compared and considered when deciding which cafe to visit.
  3. Photos and reviews are the two most essential mediums when searching.

Then, how important is each factor in a café?

I wanted to know how participants prioritize different factors, so I conducted an online survey and gathered 57 effective responses, showing Wifi and Sockets are the most crucial aspects.

Ideation

With our takeaways, the team ideated around the critical features of the cafe finder solution. We brainstormed the ideas and listed them in affinity mappings.


  1. Filter: letting users choose what kinds of cafes they want to visit
  2. Coffee Community: encouraging cafe lovers to share the trends and connect
  3. Review: a detailed review function4. Label System: categorizing cafés

App Blueprint

Design System

The logo combines two images; a coffee bean and a GPS map pin. This metaphor captures the intent of the app to help people locate a coffee shop.


The color scheme borrows some language from the coffee roasting process. The use of green is similar to the "green" coffee bean, which references the raw, unroasted bean. The yellow color references a blonde roast, while the orange references the heat used in the roasting process.

User Testing & Iteration

We had 20 participants in four rounds of usability testing in online and in-person settings to iterate the product from mid-fi to high-fi mockups.

Design & Prototype

How to navigate Caffinder?

Users will be directed to the "Homepage," which shows the coffee shops nearby with the essential information.
On the second tab, "Favorite," users can view the coffee shops they saved. They can tap the heart icon on the top-right of the café image to favorite or cancel a favorite shop.

The third tap, "News," displays the news feed. The fourth tap, "Profile," has the user account information.

Utilize sorting, labels and icons to locate cafés

Use café filters like table type and seat condition

Create reviews to critique different factors

Search friends to follow their activities

Reflection

User testing is key for refining solutions

User testing is imperative in the iterative process. Throughout the testing phase, we engaged participants ranging from friends and coffee shop owners to users from usertesting.com. Their invaluable feedback aided us in making incremental improvements. By conducting testing from low-fidelity to high-fidelity prototypes across multiple rounds, we avoided the need for drastic changes. For instance, when participants struggled to locate the "filter" icon on the homepage due to its unclear representation, we promptly replaced it with a "funnel," effectively resolving the issue. Every testing iteration proved fruitful, contributing to the refinement of our product.