top of page
Menu Page.png

Omomo Tea Shoppe

👩🏻‍💻 Role: UI/UX Designer & Researcher

✏️ Tools: Figma, Adobe Illustrator

🗓 Duration: 2 weeks

Project Overview

Developing a hypothetical, generative mobile application design that allows patrons to view Omomo Tea Shoppe's menu, track their rewards, order online, and keep track of their previous purchases.​

Project Timeline

Research

Website Evaluation

I began research by analyzing the existing business website to understand the core of their products, tone, and branding. In doing so, I thought of some design directions that I deemed would follow the business' current aesthetics, as well as devised a list of what features would be useful for their mobile application.

Figure 1: Webpage preview of Omomo Tea Shoppe.

Webpage of Omomo Tea Shoppe

​DESIGN DIRECTION

  • Use of "whitespace" to break apart information and creating a clean, minimalist aesthetic

  • Image-based, not too much text

    • Images have a simple theme, where backgrounds are often white and airy​

  • Themes: simple, minimal, airy, bright, open

FEATURES SELECTION​

  • Menu: Ability to view their drinks (the product), their descriptions, and nutritional information .

  • Online Ordering (Order): Currently using a third-party application, Toast Tab, to handle online orders.

  • Home: Space to show individual user's information and general information. Could consist of current points and user's name, location information, etc.

  • Rewards: Currently using a third-party application, Four Square, to handle customer loyalty rewards.

  • History: Space to show individual user's history of purchases.

Competitive Analysis

In order to understand the genre, I conducted a brief competitive analysis of similar existing mobile application systems. These consisted of direct, such as other boba shop apps, and indirect competitors, such as other food/drink apps with online ordering systems. In this analysis, I identified competitive advantages and key features of each app. By looking at other solutions, I gained ideas on how my design could include similar features, as well as means of how to do so.

Figure 2: Competitive analysis of similar existing systems.

Competitive analysis of existing systems

Sketches

To generate some ideas on what the system might look like, I sketched a screen for each feature I thought would be useful in this mobile app: Home, Menu, Order, Rewards, and History. A notable design decision that I made was to create a navigation bar for patrons to move throughout the app, rather than the other boba shop competitors I analyzed that consisted of a single main page that had all possible page flows as buttons. This is because I thought that it was ineffective because it places a reliance on users to remember what steps they clicked through to get to a certain page or state, whereas a navigation bar allows users to easily repeat and track their flow through the system. ​

(Left to Right) Figures 3-7: Sketches of the Menu, Rewards, Home, Order, and History feature. 

Menu.png
Rewards.png
Lo-fi wireframe of Home page
Lo-fi wireframe of Order page
Lo-fi wireframe of History page

Style Guide

For the mobile application, I wanted to maintain the same themes I observed from the business' website. To do so, I went into the webpage's CSS to find out exactly what colors and logo they had used. For typography, I didn't have access to be able to use the exact font face they had used on their website, so I decided to select a font that looked similar to what was used in terms of minimalism and character spacing. As for icons, I created each myself to create visual representations of what I thought could best represent each of the features.

Figure 8-9: Style guide used throughout the creation of high-fidelity wireframes. 

Brand assets used throughout project
Brand assets used throughout project

High Fidelity & Prototyping

When the users start the app, they will be led through a Sign In or Sign Up and onboarding process, this is required in order to use the system's features. After authentication, the user will be redirected to the Home feature and has access to a recurring navigation bar. The navigation bar has five feature options:​

  • Menu: Collection of all drinks, categorized similarly to how it is displayed on their website.

  • Rewards: Feature where customers can access their loyalty rewards and points balance, which are based on their previous purchasing history (ex: 10 drink purchases = 1 free drink).

  • Home: Central hub containing user profile, settings, Omomo location information, and Omomo social media outlets.

  • Order: Feature where customers can place online orders for pick-up at a participating Omomo location.

  • History: Collection of user purchase history of in-store and online order transactions; substitutes use of paper receipt.

​

Design Decisions

When transforming my sketches into high fidelity wireframes, seen in Figures 10-14, I made the following considerations in my designs:

  • Menu: Drinks are displayed in a horizontal scroll format, such that all categories of drinks can be easily viewed without the need for a user to excessively scroll up or down to find a particular category. Similar to the way Starbucks mobile app displays their menu options.

  • Rewards: Rewards can be redeemed through in-store or online ordering. For in-store ordering, users can show their unique user QR code that staff will scan in order to track points earned. For online ordering, the system will calculate points earned through the online purchase. The feature also has a section where users can view what rewards they have earned and directions on the way the point-earning system works.

  • Home: Inclusion of locations so that users can quickly have access to operating hours and directions, as well as the number of points until their next reward so they can see their progress.

  • Order: Drop-down style selection of location and times for pick-up to guide users through the process of necessary information. Condensed drinks (products) into text on initial screen, since most users will have already explored the "Menu" prior to ordering and would know what category to find their wanted drink.

  • History: Inclusion of all user purchases. This information is used to calculate the rewards but can also be used to eliminate text and paper receipts.

(Left to Right) Figure 10-14: High fidelity wireframes main features: Menu, Rewards, Home, Order, History. 

Interactive Prototype

To better understand how a user's flow would look like in my design, I turned these wireframes into an interactive prototype. The following prototype demonstrations shown in Figure 15 can be viewed and tested here:

Figure 15: High-fidelity interactive prototype of the Omomo Tea Shoppe mobile app using Figma's prototyping capabilities.

Takeaways

This was my first UI/UX personal design project. Although not perfect, I am proud of myself for upholding a discipline over myself to complete a project by myself during my last summer break of college. It was an enlightening experience to try to tackle this kind of project because it really prompted me to think about how users will be experiencing my design. This was also my first time utilizing Figma. It was rather daunting trying to figure out how I can translate my ideas into a visual editor that I wasn't entirely familiar or comfortable with. However, I'm glad this project was a learning experience for me to try out this design platform. Moving forward, I'd like to improve my abilities in research for both pre-design processes, since I feel like my knowledge was limited to only other competitors. In addition, I'd like to also tackle on a design project that doesn't have "as obvious" of a useful feature set, so I can explore different ways in which user needs can be met.

bottom of page