Café Béllo is a mobile app designed to improve the in-store order waiting experience. It addresses confusion caused by high customer traffic, order mix-ups, and name duplications by introducing a personalized order number, a real-time progress tracker, and estimated wait times — making the process clearer and more efficient for users.
Inspired by a classmate’s frustrating coffee run, Café Béllo was born from a real-world problem. I turned a casual suggestion into a full project, aiming to solve order confusion and improve the pickup process in crowded coffee shops.
In the Competitive Analysis phase, we reviewed four mobile apps and one local café website—Starbucks, Dunkin’, Uber Eats, Joe Coffee, and Joe’s Fine Coffee—across nine design categories. We compared features like guest access and personalization, noting that platforms like Starbucks and Uber Eats prioritize member-based ordering, which may reduce user confusion compared to guest-order models.
Building on research from Starbucks and Dunkin’s app layouts, I conducted a card sorting activity to design intuitive categories for my own coffee app. Four participants (ages 15–25) sorted terms into categories, helping shape an interface based on user familiarity and expectations. Duplications were allowed for flexible, user-driven organization and each participant had approxmiately 2 to 5 minutes to organize.
To ensure a smooth and intuitive experience, I mapped out the user flow with a focus on clarity and ease of navigation. Building on insights from the Card Sorting research, I maintained a familiar structure while incorporating enhanced features to improve the overall user journey. From launching the app to reaching the ordering stage, the flow draws inspiration from competitor platforms. However, the post-order experience introduces unique elements that set Cafe Béllo apart, emphasizing personalized tracking and a more engaging waiting process.
With the user flow defined, the next step was to structure the application's layout for clarity and consistency. The architecture begins with the Welcome Screen and transitions seamlessly to the Homepage, which serves as the main hub for navigation. Key tabs include Homepage, Menu, Location, and Settings. Among these, the Menu tab features the most complex routing, offering up to eight navigation paths based on categorized items. Bold directional lines within the architecture map highlight how the user flow is embedded within the overall structure, ensuring a coherent and user-friendly experience.
With the research insights in place, the next step was to envision how these findings translate into a real-world scenario. Building on the established user flow, a storyboard was created to illustrate the user’s interaction with the app and how it extends into the physical café experience. The scenario features a persona named Steve, an intern picking up coffee for his team, highlighting key moments where the app enhances clarity, efficiency, and the overall user experience.
Following the storyboard, we moved into the sketching phase to translate ideas into visual concepts aligned with the user flow. Each sketch was developed to explore how users would receive and interact with key information—especially during and after the ordering process. We asked questions like: How will users identify their order? How is progress communicated after an order is placed? What cues indicate that an order is nearly ready?
Guided by these considerations, we sketched out each screen—beginning with the Homepage—and annotated them with titles for clarity. Key improvements introduced in this phase include a personalized order number, a visual progress bar with percentage indicators, and estimated preparation times to help users stay informed throughout the experience.
Digital wireframes were created based on initial sketches to establish layout and flow, setting the foundation for design refinement.
Interface elements such as text, buttons, and icons were added to reflect intended interactions. Unnecessary features, like the homepage filter, were thoughtfully removed.
Visual styling, imagery, and content were finalized to elevate the user experience. Key features like the progress bar, personalized order number, and time estimate were fully integrated.
Due to time constraints, I was unable to fully explore the concept of an in-store display screen that mirrors the mobile interface—showing the user’s name and order number for seamless identification. This feature presents an opportunity for further research and iteration to determine how it can add value and create a cohesive, interactive experience between the app and the physical space.
Another future consideration is the use of secure pickup boxes for completed orders. These boxes would store ready orders until users arrive, allowing for a contact-free pickup experience. Users could access their order using a scannable QR code or a unique code provided through the app or receipt—streamlining the final handoff phase of the ordering journey.
This project was a valuable learning experience, as it marked my first time leading every phase—from discovery and research to design. While balancing other commitments was at times overwhelming, the process challenged me to explore my individual capabilities and push my creative boundaries. I explored multiple directions and ideas aimed at enhancing the user experience and found clarity in the design decisions I ultimately made. I’m proud of the outcome of Cafe Béllo, which I believe presents a thoughtful and practical solution to a real-world problem.