BRANDING • UX/UI DESIGN
Making local cafe discovery more intentional and enjoyable
Company
Cafe Hopper ↗
Timeline
February - January 2026
Contributions
UX Audit, User Flow Redesign, UI Design, Branding
Team
Designer (Me), Client Collaboration + Feedback
Overview
Making cafe discovery more intentional and enjoyable.
A client approached me with an early concept for Café Hopper, an app designed to help users seamlessly discover local cafés based on their preferences and location. While a basic structure had been in place before my contributions, the app lacked cohesion and clarity. My role was to elevate the product by developing a fresh brand identity, designing a consistent UI, and improving the overall user experience.
About the Application
What is Cafe Hopper?
Café Hopper is a mobile app that helps users discover local cafés and hidden gems that match their unique preferences. The app provides users with business information such as up-to-date business hours, signature drink menus, exclusive in-app deals, and more.
Solution Highlight
A glimpse of the redesigned application.
Screenshots of key pages of Cafe Hopper app
The Problem
I identified opportunities for improvement in the initial design mockups.
Through a detailed exploration, I annotated usability concerns and visual design inconsistencies that could hinder user experiences.
Annotated screens of key issues and areas for improvement - Log-in, Map, Categories
Annotated screens of key issues and areas for improvement - Café Details, coupons, Contact Us
Key observations:
Interface inconsistencies
Inconsistent button styles, unclear icon placements, and lack of visual hierarchy reduces the overall cohesion.
Usability gaps
Limited menu discoverability, absence of status indicators, and ambiguous color semantics, limits users to navigate confidently.
Information Architecture
I reorganized the app's flow to prioritize ease of navigation, user goals, and key tasks.
Mapping out the primary and secondary flows helped align and communicate with the client on how users interact with the key features, shaping our design priorities with clarity.
Primary flow outlines the core navigation of the app + secondary flow supports the core journey
Design System
A new visual identity for Cafe Hopper.
Primary and secondary logo designs
Illustrations on onboarding pages
Collection of component designs
Final Design
Key design highlights – The final prototypes.
Feature #1
Onboarding Pages
Introduces the app's core features and benefits with my illustrations to ease users into the experience.
Feature #2
Home Page (Map View + Search)
The map-based home screen enables users to search cafés by location or address input.
Feature #3
Categories Page
Browse cafés by curated categories, offering a more personalized discovery experience beyond just location.
Feature #4
Promotions & Coupons
Highlights special offers, exclusive deals, and time-limited promotions, encouraging users to explore new spots.
Feature #5
My Account Page
Consolidates user settings: profile editing, notification preferences, app info, contact support, and logout.
Conclusion
So, what are the next steps for Cafe Hopper?
With the first phase of the redesigned Café Hopper app complete, the next stage is to move into development in collaboration with a software developer. As we transition into this phase, we will begin to test core features, gather feedback, and refine the user experience through iterative improvements. This collaborative process will focus on ensuring technical feasibility, optimizing performance, and fine-tuning UI interactions to deliver a polished and user-centred final product.
In parallel, we will begin to reach out to local cafés to introduce the app and explore potential partnerships for featured listings, exclusive promotions, and early onboarding opportunities. Stay tuned for more updates—Café Hopper is just getting started.