Token System Design
Product Design
UX Design
UI Design
Fruitlala AI-powered juice ordering app
Why I created it
I wanted to create a UX design project that would showcase my research and design skills while exploring something I'm passionate about. This juice-ordering app concept emerged from my commitment to healthy living and fascination with AI-generated technologies.
How I created it
I applied the complete UX design process from the Google UX Design courses throughout this project. Using Figma, I developed digital wireframes, mockups, and prototypes, while leveraging Adobe Firefly to generate custom images for the app.
Design concept
The idea was to design an app that leverages AI-generated technology to recommend drinks while keeping the ordering process straightforward and efficient. Instead of relying on a fixed menu, the app generates personalized drink suggestions based on user prompts. The primary audience is busy students and young professionals who are open to trying new apps and emerging technologies.
To ground the concept, I created Fruitlala Juice Shop, a fictional brand, and applied a user experience design process to shape its ordering app. My focus was on aligning the design with the target audience’s needs while ensuring the project stayed feasible. To keep the scope manageable, I limited the process to a single persona, skipped the competitive audit, and conducted one round of usability testing.
Project overview
The product
A drink-ordering app for Fruitlala Juice Shop
Project duration
February 2024 to March 2024
The problem
Fruitlala’s customers want to order juices efficiently and easily
The goal
Provide user-friendly experiences for customers who want to order drinks on the app quickly with relevant drink suggestions
Users’ pain points
Time
Working adults and students are too busy to wait in lines in juice shops and read through the menus
Complexity
There are often many confusing options and steps to order drinks through an app
Lack of personalization
Drink-ordering apps usually provide not only complex but impersonal menus
Persona–Sky, a busy interior designer:
“I want to order healthy drinks efficiently and get exactly what I desire!”
 | Age: 28 |
Goals
| Frustrations
|
Sky is an interior designer who is usually busy meeting clients and travelling from site to site. He loves to stay healthy and get various nutrients from different kinds of juice. However, it usually takes a lot of his time to order drinks in the stores. He also finds the menus can get confusing or boring from time to time. He wants to have an efficient way to order drinks that he’s craving for. | |
Sky’s problem and hypothesis statement
Sky is a busy full-time interior designer who needs to be able to order healthy drinks quickly because he doesn’t have much time to spend in the store. If he can pre-order the drink he wants effortlessly using the app, he can avoid the inconvenience and get his desired drink more easily and faster.
Value proposition–how Fruitlala’s app can help Sky
Easy-to-use interface
Personalized drink suggestions powered by AI
Clear and simple ordering options
Automatic store selection based on proximity
Prep time estimation
Efficient online payment
Crazy Eights – exploring solutions for Sky
To generate ideas, I used the Crazy Eights exercise. This fast-paced method encouraged me to push my creativity within a tight time frame. While I stretched the activity slightly to about 10–12 minutes, it helped me quickly sketch a range of potential solutions for Sky, the persona. Several concepts emerged, but the most promising were pre-ordering through the app and using AI assistance—ideas #2 and #6—which I later incorporated into the final design.
↑ My Ideas from Crazy Eights Exercise
Paper Wireframes
Sketching wireframes on paper allowed me to quickly see if the user flow made sense and modify it when needed. I wanted to keep the app experience as simple and intuitive as possible.
↑ Fruitlala's Paper Wireframes
Digital wireframes
Following the completion of the paper wireframes, I developed digital wireframes to refine the design. In this screenshot, I've highlighted several key elements that demonstrate how the ordering process was made more efficient.
(A) Users can enter personalized prompts (such as how they're feeling) and receive drink recommendations instantly.
(B) Users can either select from the clearly labelled suggested drinks or explore additional options by tapping "More Ideas" or "Feel Like Something Else."
(C) Users without saved payment methods can complete their purchase using Apple Pay (or Google Pay), ensuring a smooth checkout experience.
(D) Users receive direct navigation assistance through the "Navigate to the Pickup Store" button, which integrates with their device's map application.
Low-fidelity prototype
I developed this low-fidelity prototype based on the digital wireframes, focusing on the core user flow for ordering a drink. The prototype is designed to facilitate usability testing and gather user feedback on the overall experience.
↑ Fruitlala's Low-Fidelity Prototype
Usability study–what I discovered
“Confusing elements, missing information, and limited functions.”
A round of moderated usability studies was conducted with the low-fidelity prototype in Toronto, ON. There were 3 participants with 20-30 minutes each. Users found that:
Certain interface elements were confusing or overwhelming
Key information was missing or unclear in some areas
Several functions had limited capabilities that restricted user actions
Refine the design–mockups
Based on usability study findings, I refined the mockups to address user feedback and enhance the interface design.
(A) The new "Order From My Favourites" button provides users with immediate access to their previously saved drinks, offering a faster ordering option directly from the home screen.
(B) Calorie information was added below each drink option to help users make informed dietary choices.
(C) The "More Ideas" button was changed to "Create It Myself," allowing users to switch from AI-generated suggestions to manual drink customization easily.
(D) The "Feel Like Something Else" button was rephrased as "Start a New Drink" to provide clearer direction about starting the recommendation process over.
(E) Calorie information was added next to the size and sugar level options, displaying how many calories each selection contributes to help users make informed dietary choices.
(F) The "Extra Fruits" section now clearly indicates that users can select up to 2 additional fruits, removing any confusion about limits.
(G) A "Nutrition and Ingredients" button was added below the order options, giving users easy access to comprehensive nutritional details.
(H) Pre-selected fruits that already appeared in the main drink recipe were removed from the extra fruit options, as users found these duplicates confusing and unnecessary.
(I) A search bar was added at the top of the extra fruits section, allowing users to quickly find specific fruits instead of scrolling through the entire list.
(J) Interactive icons were added next to each drink item, allowing users to save drinks to favourites (heart icon), increase quantity (plus icon), or decrease quantity (minus icon).
(K) A payment method dropdown was added above the "Place Order" button, giving users the flexibility to choose between different payment options like Apple Pay, Google Pay, or saved payment methods.
↑ Fruitlala's Mockups
High-fidelity prototype
The final high-fidelity prototype was created based on usability study insights, showcasing user interactions and addressing previous design confusion. Key improvements include comprehensive nutritional information and enhanced user-friendly features that improve the overall app experience.
Fruitlala’s interactive prototype:
Accessibility Considerations
To ensure Fruitlala’s app delivers an inclusive and user-friendly experience, accessibility was a key design focus. A few examples include:
Maintaining sufficient colour contrast for readability
Supporting assistive technologies with descriptive alt text for images
Using ample negative space to improve clarity and ease of navigation
Challenges I faced
Taking on this entire UX design project solo was both ambitious and demanding. While I knew projects of this scope typically involve collaborative teams, I wanted to push my boundaries and apply my skill set to each aspect of the design process.
One of my biggest learning moments came during the usability study. Although I loved watching users interact with my prototypes, I realized I hadn't prepared clear instructions or explanations for participants. This left some interviewees confused about the tasks and process, teaching me valuable lessons about research methodology and preparation.
Key takeaways
The app demonstrated strong potential for success, offering a fresh and engaging way to order juices that users found appealing. One participant noted: “I will use it. I like this fresh idea and the number of potential combinations available.”
Through this project, I learned the importance of prioritizing function before aesthetics. I also saw the value of well-structured usability studies in gathering meaningful feedback. Even with just one round of testing, the insights gained were highly impactful and helped shape the design in significant ways.
Fun facts
In the prototype, pineapple and papaya were selected to make the juice. However, I’ve never tried this combination, and I’m curious how it tastes.
What's next
To keep this project manageable, I simplified the process by skipping some traditional UX steps. Moving forward, I'd love to circle back and add those foundational elements: comprehensive competitive analysis, multiple user personas, and additional rounds of user testing.
Since this project focused specifically on the drink-ordering flow, there's potential to expand into other user journeys and create a more complete app experience. I'm also eager to share this design with fellow designers and get fresh perspectives on any blind spots I might have missed.
