Coffee Journey: A UX Case Study

Creating a digital space for coffee enthusiasts to find, share, and enjoy their favorite cafés.

The Problem

Users struggle to find coffee shops that match their specific preferences using existing platforms like Yelp or Google Maps.

Current pain points include:


✔️ Cluttered search results – Users must scroll through endless lists with no clear way to filter by their actual needs.


✔️ Inconsistent reviews – It’s difficult to gauge a café’s atmosphere from scattered ratings.


✔️ Lack of real-time data – Users want to know how busy a coffee shop is before going.


✔️ No community interaction – People want a space to ask questions and share experiences.

The Goal

Our goal was to design a seamless, user-friendly experience that helps users:


✔️ Easily discover coffee shops that fit their atmosphere, noise level, and amenities preferences.


✔️ Connect with the coffee community through shared reviews, recommendations, and real-time insights.


✔️ Simplify the decision-making process by providing curated results tailored to their needs.

✔️ Support local businesses by giving coffee shop owners a platform to showcase their offerings, events, and promotions.

My Role

I worked as a UX/UI Designer focusing on:


✔️ Branding – Establishing a cohesive visual identity with colors, typography, and styles.


✔️ Typography & Layout – Ensuring readability and a clean, structured interface.


✔️ Wireframing & Prototyping – Creating interactive prototypes in Figma to test user interactions.


✔️ User Research & Testing – Conducting Think-Aloud Protocol usability testing to refine our design.

Early Concepts & Wireframes

Before diving into high-fidelity designs, we started with brainstorming sessions to explore the core functionality and user flow of Coffee Journey. Through hand-drawn sketches and low-fidelity wireframes, we refined our approach based on user needs and pain points.

Our initial sketches focused on:

  • A streamlined search experience with advanced filters for study-friendly cafés, social atmospheres, and specialty drinks.

  • A community-driven review system to provide more authentic insights compared to competitors.

  • An interactive map to enhance coffee shop discovery with real-time navigation.

  • A wishlist & saved feature to help users plan their visits.

By iterating on our wireframes, we ensured a clean, intuitive layout that minimizes cognitive load and improves accessibility. These early-stage designs set the foundation for the final high-fidelity prototype.

Hand-drawn Sketches

Low-Fidelity Wireframes

User Research & Insights

Understanding the Users

To ensure Coffee Journey effectively meets user needs, we conducted research to understand how people currently search for coffee shops and what challenges they face. Through this process, we identified key user personas, their goals, and their frustrations with existing solutions.

User Personas & Goals

We focused on five primary user groups, each with unique needs:

  • Young Adults – Want to explore new coffee spots, attend events, and socialize.

  • Working Professionals – Need a productive café with reliable Wi-Fi and good coffee.

  • Coffee Enthusiasts – Look for specialty coffee, unique roasters, and new trends.

  • University Students – Seek quiet, affordable, study-friendly cafés.

  • Tourists – Need a reliable way to find well-rated, locally loved coffee shops.

Key User Pain Points

Through research and user interviews, we identified common frustrations users faced when searching for coffee shops:

  • Cluttered search results – Existing platforms lacked relevant filters, making it hard to find cafés that matched specific preferences.

  • Inconsistent reviews – Users struggled with unreliable ratings and vague feedback on noise level, seating, and Wi-Fi quality.

  • Lack of real-time availability – No way to check if a coffee shop was too crowded or had enough seating.

User Tasks & Needs

Our research revealed key actions users wanted to accomplish:

  • Find the right coffee shop based on atmosphere, noise level, and seating.

  • Check amenities like free Wi-Fi, outlets, and menu options.

  • Save & organize cafés for future visits.

  • Read reliable reviews from like-minded coffee lovers.

  • Engage with the community by asking or answering questions.

Usability Testing, Key Insights & Takeaways

What Worked Well

✔ Personalization Features – Users successfully organized coffee shops into folders based on preferences (e.g., coffee type, atmosphere).
✔ Clean & Modern Design – The interface was visually appealing and easy to navigate.
✔ Simple Navigation (Overall) – The app’s structure allowed users to explore coffee shops effortlessly.

Challenges & Areas for Improvement

  • Navigation Issues – Some pages were confusing, especially when filtering search results, due to an unclear menu structure.

  • Non-Interactive Elements – Users struggled with selecting reviews and photos that were not interactive, limiting usability.

  • Limited Community Features – Testers wanted interactive forums for coffee shops, which were planned but not implemented in the prototype.

Key Takeaways & Future Improvements

  • Enhanced Navigation – Improved menu organization and search filtering for a smoother experience.

  • Fully Interactive Reviews & Photos – Ensured all elements were clickable and functional.

  • Community Features Expansion – Added discussion forums and a way to view a list of visited coffee shops.

  • Refined Rating System – Incorporated review count into shop ratings and introduced community challenges for engagement.

By focusing on usability and refining features based on real user feedback, Coffee Journey evolved into a more intuitive and community-driven app.

Final Design & UI System

After multiple iterations and user testing, we refined Coffee Journey to create an intuitive and visually appealing experience. Our final design prioritizes usability, accessibility, and community engagement, ensuring users can seamlessly discover and explore coffee shops tailored to their preferences.

High-Fidelity Wireframes

We developed high-fidelity wireframes to bring the app’s functionality and aesthetics together. These screens showcase:

  • An improved navigation system based on user feedback.

  • Enhanced search and filtering for better personalization.

  • A clean, modern UI that aligns with our style guide.