Latte
Latte was created as a mobile-first app to simplify cafe discovery through highly personalized recommendations identified during user research to provide the most effective experience.
The app emerged from a need for more intuitive tools in the cafe discovery space.
Latte was developed as a user-centered tool that improves the cafe discovery process.
Problem To Solve: Cafe discovery is fragmented with recommendations scattered across countless platforms. In this case study, I’ll dive into how Latte fills this gap.
Cafes have historical roots as social hubs.
In 17th-century England, coffee houses known as “Penny Universities,” charged a one-penny entry fee for customers to exchange ideas, read newspapers, and debate politics.
Consumers increasingly seek connection in cafes.
Grand View Research reports the global matcha market was valued at USD 4.3 billion in 2023 and is projected to reach USD 7.43 billion by 2030, exhibiting growing interest in cafe offerings.
Industry leaders like Starbucks are shifting from digital grab-and-go towards redesigned in-store to "reinvigorate the cafe experience" as a third place for community.
Yelp
Profile access
Personalized experience
Oversaturation kills discovery
Broad databases bury good options in noise from popular chains.
Background
I explored market analysis reports, nonprofit data, and media coverage to identify cultural and behavioral context around cafes and specialty beverages.
The first goal was to build a foundational understanding of both the cafe landscape, the trends in coffee and matcha consumption and gaps in current cafe discovery methods.
I looked at restaurant discovery apps, navigation apps, specialty coffee community apps, etc.
Google Maps
Maps, photos and directions
Real-time data
FINDING 1
Cafes are prime examples of the “third place.”
Sociologist Ray Oldenburg defined a "third place" as a welcoming space beyond home and work. Beverages serve as “social sacraments” that foster conversation and connection.
Coffee and matcha trends show steady demand.
Roasters
Coffee discovery
In-depth offerings
FINDING 2
Customization is key
Lack of specific filters and preferences leads to endless scrolling.
Map-based local search
User reviews
FINDING 3
Paywalled personal features
Most specialized features and insights require an in-app purchase.
Primary Research
Environment matters as much as proximity.
People aren’t strictly choosing cafes based on proximity. They’re looking for spaces that reflect the atmosphere they personally enjoy.
Participants were between the ages of mid-20s to 40s and a mix of coffee and matcha drinkers with different cafe discovery habits. Two-thirds lived in New York City and one-third in San Diego, capturing perspectives from two major urban markets with strong cafe cultures.
I conducted surveys and user interviews to validate secondary trends and uncover pain points around cafe discovery, preferences, and social connection.
Clarity matters as much as accuracy.
Users often feel frustrated trying to piece together information from multiple sources in finding a cafe right for them.
FINDING 1
FINDING 2
Research Synthesis
I grouped interview insights into themes using affinity mapping; identifying shared behaviors, frustrations, and opportunities.
Social Jobs
Be seen as someone who supports small businesses
Share discoveries that impress others
DESIGN SOLUTION
AI ambiance summaries: overviews generated from reviews and photos.
HIGHLIGHT CAFES THAT EMBODY AUTHENTICITY, CREATIVITY AND A SENSE OF BELONGING?
DESIGN SOLUTION
Features tab: reflects the cafe’s offerings at a quick glance.
These statements encapsulate user needs and core motivations.
Jobs-to-Be Done
Emotional Jobs
Ease the anxiety of visiting somewhere new
Feel connected to the community
Main Jobs
Explore cafes
Choose locations
Related Jobs
Filter cafes by preference
Compare cafe atmospheres
HELP USERS DISCOVER CAFES THAT ALIGN WITH THEIR PREFERENCES AND INTENTIONS?
How might we…
DESIGN SOLUTION
Profile cards: brings key details and highlights into one centralized place.
HELP USERS BETTER UNDERSTAND A CAFE’S AMBIANCE AND EMPOWER THEM IN THEIR DECISION-MAKING?
User Personas were created to form a deeper understanding of user goals, needs, behaviors and experiences. They represent real people for design decisions.
These insights and synthesis outputs directly informed the ideation, wireframing and high-fidelity design phases that followed.
Ideation
I translated key user needs and jobs-to-be-done into actionable user stories, keeping solutions focused on real goals.
As a…
cafe enthusiast
local explorer
remote worker
I want to…
filter the search results
discover cafes in my neighborhood
view a cafe’s details
So that I can…
find cafes that match my tastes
feel connected to the community
evaluate a cafe and plan a visit
Example: Onboarding user flow
I defined the app’s overall structure and navigation logic, creating sitemaps for hierarchy and user flows for clear task paths.
Information Architecture
Wireflows
Paper Sketches
High-Fidelity Design
I build the visual foundation to bring the brand to life.
Design System
Reliable, warm, comfort, thoughtful, competent, slightly dreamy
The core personality shaped each visual decision to embody a trusted and inviting third place.
Mood Board
Sunlight and open window emphasizes the dreamy and comfort effect
Natural light creates an airy, welcoming mood that feels that feels naturally dreamy.
Soft browns, creamy beige, matcha greens set the palette and tone
Warm yet neutral palette that embodies matcha, coffee, and cafe culture.
Minimal and neutral colors act as the ideal backdrop
Serves as a clean backdrop that keeps the focus on featured cafes.
Low-Fidelity Mockups
Medium-Fidelity Mockups
This is a portion of the high-fidelity designs that formed the clickable prototype used for usability testing, setting the stage for validation and final refinements.
Usability Tests
While completing tasks in the prototype. I guided the users to narrate their thoughts to measure how well the app felt.
Think-Aloud Protocol
“It feels like I’m choosing between the map or the list view.”
QUOTE 2
“I wish I could see both views without one disappearing.”
Toggling between map and list views felt clunky, adding unnecessary friction.
SOLUTION:
Simplify home screen by defaulting to map view with a swipe-up list panel at the bottom.
QUOTE 1
PROBLEM:
Filter management during onboarding needed refinement
SOLUTION:
Added “Skip for now” button for better reassurance
QUOTE 3
“I need both the map and list views to decide where to go.”
Landing page
PROBLEM:
Profile cards had too much information right away, reducing scannability
SOLUTION:
Showed key details upfront and moved secondary info into tabs for better readability
PROBLEM:
High Fidelity Prototype
After gathering insights from low-fidelity testing, I created a high-fidelity prototype using Figma. It incorporated refined UI elements, improved navigation, and interactive flows based on user feedback.
Welcome/Start page
Introducing…
Latte
Beverage preferences: users select their usual drink orders establishing core tastes
Environmental preferences: helps match users to locations that fit their lifestyle and needs
Dietary preferences: Promotes inclusive discovery
Permission prompts: reworded for clarity and trust
Onboarding
Optimized to deliver personalized guidance while respecting users’ time.
Both the map and list views are visible on the same screen.
List view is fixed in the bottom quarter as an overlay; no toggling needed.
Map & List View
Users can filter personalized preferences falling in categories including beverages, atmosphere, dietary, and more.
Explore Page
Tailored for swift scanning, each card includes the cafe’s address and hours, menu offerings, standout features, social media platforms, contact information, and reviews.
Cafe Profile Cards
Designing Latte taught me how to build for connection, not just usability. By gaining a deeper understanding of the users and the root of their needs, I uncovered the overlooked significance behind a seemingly routine act.
Final Reflection
This project sharpened how I create solutions for modern consumer needs, showing the value and impact of human-centered design.
