Tomoro App Home - Study Case

Tomoro App Home - Study Case

Time Frame

April - May 2025

Role

UI/UX Designer

Platform

Mobile Apps

Introduction

Tomoro Coffee is an Indonesian-based coffee chain that launched in August 2022. It's known for offering high-quality coffee at affordable prices, with a mission to make specialty coffee more accessible to a wider audience.

Brand Growth

Tomoro Coffee has grown to 600+ stores across Indonesia and is rapidly expanding into China, Singapore, and the Philippines, aiming for 1,000 outlets by the end of 2024 and 3,000 across Southeast Asia in the coming years.

Background Story

While lining up at Tomoro Coffee, I struggled to find the member QR code. Its placement wasn’t familiar and was hard to reach with one hand. The screen was also crowded with banners, making it hard to focus on ordering. That experience pushed me to redesign the app for better clarity and ease of use.

Team

Worked independently as the sole designer. Based design decisions on user behavior patterns, personal observations, and industry design best practices.

Findings

  • Low visibility of key actions
    The original homepage made it difficult for users to find frequently used features like the QR code scanner, loyalty points, or ordering shortcuts. These actions were often hidden behind additional taps or buried in non-obvious placements.

  • Overcrowded and unstructured layout
    The interface felt cluttered and too many competing elements on screen. This resulted in cognitive overload and friction when navigating the app.

  • Unclear feature prioritization
    Essential actions were given the same visual weight as secondary features. For instance, promotions and banners occupied prime screen real estate while key utilities like ordering or payment were harder to spot.

  • Inconsistent experience across screens
    Navigational logic and design styles varied between different sections of the app. This inconsistency made it harder for users to build mental models and slowed down repeat use.

Defining the Problem

How might we streamline the ordering process for users who want speed, while maintaining a simple and intuitive experience?

Goals

Business goals:

Increase User Retention:
Encourage users to return daily by making the home screen more engaging and useful.


User goals:
Start Tasks or Sessions Quickly:
Users want to jump into studying, planning, or their next task with minimal friction.

Stay Focused and Organized:
Users need a clear overview of what to do today, without feeling overwhelmed.

Track Progress Easily:
Users want to feel a sense of progress—seeing what they’ve accomplished or how consistent they’ve been.

Feel Motivated and Encouraged:
Subtle encouragement, streaks, or progress badges help users feel rewarded and motivated

Process

Define Problem → Gather Feedback → Wireframe → Prototype

I started by defining the core problems in the app, unfamiliar QR code placement and visual clutter. Then I gathered feedback from other users, translated insights into wireframes, and finally built a clickable prototype to explore better solutions.

Research and Ideation

Initiated lightweight research to validate assumptions and gather inspiration for improving usability and clarity in the app’s home screen.

Responsibilities included:

  • Browsed design references and patterns from similar apps (e.g., Kopi Kenangan, Fore, Starbucks) to understand how they structure key user actions.

  • Asked a friend who regularly uses Tomoro Coffee’s app for feedback on their pain points and usage habits.

  • Synthesized insights to identify common usability issues and drafted improvement opportunities focused on better action visibility and a cleaner layout.

Location

Displaying the user's current location to ensure accurate pickup or delivery.

Last Order

To provide easy access for the users to reorder their last drink or food.

TOMORO Mission

Rework card for TOMORO Mission to make it standout from other section above or below.

Dedicated Order Type

Dedicated section for order type selection to make users focus on their order first.

Member QR

Moved from the top right page to make user easily access with their thumb. Using primary color and shadow to make it standout

Created by PTWIZ

from the Noun Project

Location

Displaying the user's current location to ensure accurate pickup or delivery.

Created by PTWIZ

from the Noun Project

Last Order

To provide easy access for the users to reorder their last drink or food.

Created by PTWIZ

from the Noun Project

TOMORO Mission

Rework card for TOMORO Mission to make it standout from other section above or below.

Dedicated Order Type

Dedicated section for order type selection to make users focus on their order first.

Member QR

Moved from the top right page to make user easily access with their thumb. Using primary color and shadow to make it standout

Challenge and Most Interesting

The challenge was bringing a fun and fresh Tomoro vibe into the redesign while keeping the experience clear and usable. The most interesting part was finding the balance between business goals like promoting vouchers and campaigns, and maintaining a focused interface. It pushed me to prioritize what matters without losing the brand’s personality.

Key Takeaways

  • Real moments reveal real problems
    Design should respond to how people actually use the app, not just how it looks on screen

  • Placement matters
    Small element like a QR code needs to be intuitive and reachable, especially in high-pressure moments

  • Less is clarity
    Too many visual elements distract from the core task. A focused layout helps users act faster

  • Listen before you design
    Gathering feedback early helps shape solutions that feel natural and truly useful.

Create a free website with Framer, the website builder loved by startups, designers and agencies.