(01) ‍

‍

Define

‍

Bubble tea has rapidly gained popularity in the global markets, but ordering it can be overwhelming due to the numerous customizations, such as ice levels, sugar preferences, and toppings. Based on personal experiences and conversations with peers, I identified that this complexity, compounded by social anxiety, can make the ordering process stressful for many. From the server's perspective, repetitive inquiries about preferences can slow down the process.

To address these challenges, I aimed to design a user-friendly app that simplifies bubble tea ordering by allowing users to create and organize their orders effortlessly. The app not only streamlines the experience for customers and servers but is also designed with a visually appealing interface to enhance user satisfaction.

(02) 

‍

Ideate

‍

With this idea in mind, I initiated the design process alongside user research, engaging small groups of bubble tea enthusiasts to validate the need for the app. Their feedback confirmed shared challenges and highlighted the app's potential benefits, encouraging me to move forward with the design.

I began with basic wireframes, prioritizing simplicity and user-friendliness. To achieve the goal of streamlining the ordering process, each page was designed with minimal components and intuitive interactions, ensuring effortless navigation and reducing user effort. This approach aimed to enhance usability while keeping the experience stress-free and efficient.

(03)

‍

Prototype + Refine

‍

The prototype was developed using Figma, starting with the creation of a mood board to establish the app's color palette and overall visual direction. This step ensured a cohesive and consistent aesthetic throughout the design.

In the initial draft, I focused on structuring the page layouts. While the layouts worked functionally, the colors and overall visual style fell short of achieving the clean, modern, and minimalistic look I envisioned. For the second draft, I refined the design by carefully selecting a more balanced and contemporary color palette, simplifying the layouts, and enhancing the intuitive flow of interactions. I also incorporated consistent typography, spacing, and alignment to improve visual clarity and maintain a polished, professional appearance.

Additionally, the design process involved designing reusable UI components to maintain uniformity across pages. Each element, from buttons to input fields, was crafted to prioritize accessibility and responsiveness, ensuring the design could adapt seamlessly across various devices and screen sizes. This iterative approach allowed me to fine-tune the prototype to align with both the aesthetic vision and usability goals.

(04)

‍

Final Design

‍

(05)

‍

Takeaways

• ‍Text Placement: Ensure text is strategically placed for clarity and hierarchy, guiding users seamlessly through the interface. Use alignment and spacing to create visual balance, emphasizing key information without overwhelming the design.‍

• ‍Grid System: Utilize a grid system to maintain consistent spacing, alignment, and proportions across the app. This structure ensures a cohesive layout and responsive adaptability for both mobile and desktop versions.‍

• Color Tones and Hues: Opt for a harmonious color palette with subtle, muted tones and hues to achieve a clean and professional look. Include a complementary light and dark mode palette to enhance usability and reflect the app's theme of day and night.‍

• ‍Typography Choices: Select modern, legible fonts that convey professionalism and simplicity. Pair a sans-serif font for headers with a slightly lighter sans-serif for body text, maintaining consistency and readability.‍

• Figma Prototype Feature: Leverage Figma's prototype functionality to simulate interactions, allowing for user testing and feedback on navigation, transitions, and overall usability before moving into development.

(06)

‍

Next steps

‍

The app features a straightforward design with simple pages and intuitive navigation. I plan to leverage my development skills, supported by online resources and collaboration with developer peers, to fully bring the app to life.

This process will involve learning mobile development, an area I am eager to explore for the first time. I will also prioritize accessibility throughout the development, ensuring the app is inclusive and user-friendly for individuals with diverse needs.

Expand Features:

• Store-Specific Menus: Incorporate menus from popular bubble tea stores, allowing users to customize their orders based on exact store offerings. This feature ensures greater accuracy and convenience for users placing orders.

• ‍Multilingual Support: Introduce multiple language options to make the app accessible to a broader audience. This feature not only enhances inclusivity but can also serve as a language-learning tool, helping users familiarize themselves with relevant terminology in different languages.

These expansions aim to make the app more precise, user-friendly, and universally helpful, catering to diverse preferences and needs.