Cheese Coffee

Revamping mobile app: elevating UX and Brand Connection

What is Cheese Coffee?

Cheese Coffee is a modern European-style coffee chain with more than 20 branches across Ho Chi Minh City, Hanoi and Da Nang. Known for its vibrant and energetic atmosphere, it caters primarily to Gen Z customers.

The coffee offers a diverse menu that includes coffee, tea, and cakes, making it a popular destination for socializing, studying, or even remote working.

Why redesign?

As a frequent visitor and fan of Cheese Coffee, I’ve spent a lot of time in their various locations. Through my visits, I overheard customer feedback and spoke with staff, which led me to explore their mobile app.

I downloaded the app and conducted a UX audit, uncovering several issues:

• Users are confused about the app's primary function —whether it's for booking or managing loyalty points —leading to a high drop-off rate.
• The membership process is time-consuming and difficult to navigate, making it hard for users to access their membership codes.
• The iconography lacks consistency in style, with a mix of outline and solid icons, and incorrect pixel sizing.
• The font sizes are inconsistent and create a cluttered appearance.
• The app does not reflect Cheese Coffee’s branding or communicate its values effectively.
• The overall UI is outdated and fails to drive conversions.

All these factors made it clear that the app was in need of a redesign. I decided to take on the challenge, using the Double Diamond method to guide the process to exploring the core problems while designing a more user-friendly interface.

Competitive Analysis

To understand coffee users' habits and identify existing design patterns, I conducted a competitive analysis of key players in the market, such as The Coffee House and Highlands Coffee. These apps provided valuable insights into user expectations, with their own advantages and drawbacks:

User Research

I gathered feedback from customers and operational staff to understand their needs and found out they didnt know about the app. The mobile app was ineffective, leading to a low rating of 1 star on iOS, and only 500 downloads on Android, without any reviews.

User personas

Based on my research, I identified two main customer groups:
• Direct customers: Regular users of the café who order and visit in person.
• Indirect customers: Delivery staff from platforms like Grab and ShopeeFood, who interact with the app for pickup and delivery purposes.

User journey map

I mapped out the user journey for both direct and indirect customers to understand how they interact with the app, from onboarding to ordering and using membership points.

Wireframes

I began the design process by sketching wireframes. This helped visualize both the structure and the interaction points.

Design Decisions

• Problem 1: The membership code was difficult to find, requiring users to navigate through two settings menus.

• Solution: I simplified access by placing the membership code on the home screen.

• Problem 2: Inconsistent and poorly designed icons in the navigation bar disrupted the user experience.

• Solution: I revamped the iconography for consistency and accessibility.

• Problem 3: The map view on the Branches page was cluttered and difficult to use.

• Solution: I improved the layout for clearer navigation and visibility.

• New function 1: Users can now order products and earn points seamlessly.

• New function 2: I added two ways to view the menu—grid and list views—giving users more flexibility and quickly search.

• New function 3: Integrated the app with delivery platforms so that both customers and delivery staff can track orders in real-time.

• New function 4: Enhanced accessibility and provided visual tracking and feedback throughout the app.

Design System

I applied the Atomic Design System throughout this project to ensure consistency and scalability across all design components.

Keys takeaway

This was my first full case study, and it provided a valuable opportunity to refine my design decision-making process, ensuring that both user and business needs were met.

Learning

• I gained a deeper understanding of Atomic Design and how it supports building cohesive design systems.

• I improved Cheese Coffee’s app by aligning it with the brand’s identity, making it more functional and user-friendly.

Challenges

• Iteration was key to the final outcome—I made numerous refinements to reach the final UI design.

• Needed more internal data to inform key design decisions

• It will be an opportunity to build a SaaS system for efficient order management.