As part of the admission process for the Beginex program, I was tasked with completing a design challenge to demonstrate my skills and approach to problem-solving. This challenge served as both an evaluation of my design thinking abilities and a preview of the program’s hands-on learning style.
The deliverables included outlining the design process and producing a mid-fidelity prototype, which I successfully completed and was accepted into the program. In my case study, I developed the project into a high-fidelity prototype and UI design, specifically to demonstrate my visual expertise.
Background
See the journey below or
Sketch: Home page
A simple, clean homepage that clearly shows users they can start ordering from the menu or customize their smoothie, with user account and cart icons at the top. The main action buttons are large and feature background images.
Mid-Fidelity : Home page
From a business perspective, I concluded that it would be beneficial to promote selected products on the homepage to increase profitability. Therefore, I added a ‘Featured Items’ section at the bottom of the page.
High Fidelity: Home page
After experimenting with several UI designs, I replaced the two large action buttons that had background images, as the images made the text harder to see and read, with clean, simple buttons. From a sales perspective, I also added an image to each smoothie to boost visual appeal and encourage purchases.
From Sketch to High fidelity
Sally loves to try different smoothies at her local juice bar. Design an iPad app that lets Sally (or other juice bar visitors) easily create and order their own smoothies.
What was the design challenge?
Duration
24 Hours
Role
UX Designer, UI Designer, Logo Designer
Tools used
Figma, Google forms, FigJam
Sketch: Menu Page
The menu page is where users can explore available smoothies. Clear categories make it easy to find the right option while also encouraging discovery of new items. A search bar at the top allows users to quickly locate specific smoothies.
Mid-Fidelity : Menu Page
After choosing “menu” from the homepage, users will be directed to the menu page. No major changes from initial sketch.
High Fidelity: Menu Page
Similar to the mid-fidelity design, categories are clearly marked for a user-friendly interface. Smoothie images are included to provide clarity and support better sales. Ingredient lists are visible within each item description, reducing extra clicks and ensuring users have clear information about each smoothie.
Mid-Fidelity : Menu item
Similar to the initial sketch, smoothie size and base are clearly marked. The smoothie name and ingredients are displayed next to the image for clarity. For add-ons, users can choose from options such as protein, coffee, or vitamins, supporting users diet goals.
High Fidelity: Menu item
In the high-fidelity design, all buttons are standardized for consistency. The action button is highlighted in red, while the others turn grey once selected. Add-ons are organized into two clear categories: Protein (including vegan options to support all dietary restrictions) and Boosts for extras such as coffee or nut butters. The Boosts category was designed to support users maintain their health goals.
Sketch: Menu item
The menu item page is where users make their final smoothie selections before adding them to the cart. Here, they can choose options such as smoothie size, base, and any extra ingredients they’d like to add.
Mid-Fidelity : Customize
I kept the same layout as the menu page but added sections for users to choose fruits and vegetables, along with extra categories for nuts.
High Fidelity: Customize
In the high-fidelity design, I added images of fruits and vegetables to create a more professional look and increase profit potential. I also added nut butters to the ‘Boost it’ section to make the interface more user-friendly. To ensure users clearly understand the smoothie customization pricing, I added clear price descriptions at the top of each section.
After sketching the first three screens, I had a clear vision for how the rest would turn out, so I didn’t need to create additional sketches.
Mid-Fidelity : Checkout
On the checkout page, a clear summary of the order with a detailed price breakdown is displayed. On the same page, users can also enter their payment card information for a faster and more seamless checkout experience.
High Fidelity: Checkout
The one-page checkout was designed to optimize the process by displaying order details and payment information on the same screen. The order summary and price breakdown are visually separated for clarity, and to make final adjustments quick and easy, users can remove items or change the quantity of smoothies directly within the order summary.
This app has the potential to make healthy eating more accessible and engaging by allowing users to easily customize smoothies to their taste and dietary needs.
With its clear design, playful visuals, and streamlined checkout, the app has the potential to enhance the user experience while also driving customer loyalty and business growth.
Potential Impact
User Persona
The user persona section provides concise profiles of typical FreshBlend users, offering insights into their demographics, lifestyle, preferences, and pain points related to smoothie ordering. These personas serve as valuable tools for informing product development and ensuring that FreshBlend effectively meets the diverse needs of its target audience.
Sara Williams
Age
Gender
Status
Education
Occupation
Location
36
Female
Married
B.A Finance
Accountant
Florida
Background
Sara leads an active lifestyle, starting her mornings with workouts and tracking her meals. She often orders through apps for convenience, values clear nutritional info, and enjoys trying new superfoods without compromising her health goals.
Goals
Get nutrient-rich smoothies without leaving home or gym
Easily customize smoothies to match her calorie and protein goals
Discover new seasonal or limited-edition health blends
Loves trying new superfoods but wants easy ordering
Pain points
Many food delivery apps don’t have different types of protein
Customization is limited or confusing on most ordering platforms
Wants a fast, intuitive app experience (fewer clicks)
Frustrated when prep times are long for something as quick as a smoothie
Scenario 1: Users likes to order from menu items.
User Flow
Scenario 2: User would like to customize the smoothie.
Constrains
The main constraints of this project were time, scope, and resources. I had a limited timeframe to design and iterate, which meant focusing only on core flows such as the menu, customization, and checkout. In addition, access to real user testing was limited, so many design decisions were informed by assumptions and secondary research.
As part of the admission process for the Beginex program, I was tasked with completing a design challenge to demonstrate my skills and approach to problem-solving. This challenge served as both an evaluation of my design thinking abilities and a preview of the program’s hands-on learning style.
The deliverables included outlining the design process and producing a mid-fidelity prototype, which I successfully completed and was accepted into the program. For the case study, I expanded the project by developing it further into a high-fidelity prototype and refining the UI design.
Background
See the journey below or
Design Process
I began the challenge by analyzing the problem, asking clarifying questions, and evaluating and understanding the target users. To gain context, I conducted a quick competitive analysis and researched other apps as well as local smoothie shops to understand their offerings and better define the product I was designing.
I then applied the “5 Ws and How” framework to explore the who, what, where, when, why, and how of the problem.
Once I had a clearer picture, I described the potential user, their needs, goals, constraints, and any assumptions that could impact the design. From there, I moved into the ideation phase—starting with drawing task flows, which guided my sketches and ultimately led to the creation of wireframes.
Problem Statement
Possible Solution
Sally needs to order smoothies from her local smoothie shop and wants to try a new smoothie each time she orders, but she also hopes to customize her smoothie to support her efforts in maintaining a healthy diet.
Offering users the option to customize existing smoothies or create their own provides greater flexibility and allows them to tailor their choices to their preferences and dietary needs. This can potentially assist in maintaining a healthy diet.
What questions could I potentially ask during the interview?
How often do you buy smoothies?
How often do you order new smoothies?
Please describe step by step how you order a smoothie?
What factors are important when choosing a smoothie store?
Which do you prefer more and why? menu items or custom smoothies?
How would you like to customize smoothies from the menu?
How do you feel about building you own smoothie? explain?
Due to time limitations, I was unable to interview participants to gain further insight. However, if I had the opportunity, these are the questions I would have asked.
Typography and Color
Headline Typography
Carter One
Body Typography
Baloo 2
Primary Color
#F38181
Text Color
#2D281A
Grey
#7D7D7D
Background
#FFEEDD-D3EAE4
Secondary Color 2
#FCE38A
Secondary Color 1
#95E1D3
I used Carter One and Baloo 2 because they are friendly, modern, and approachable fonts with thick strokes and smooth curves, creating a warm and playful feel. Their energetic style also works well for eye-catching designs and pairs seamlessly with the color palette, which represents energy and freshness.
FreshBlend
Branding and Logo
The logo features a simple leaf to represent freshness and nutritional support for a healthy diet, while the gradient background symbolizes blending, reflecting the mix of ingredients.
A simple, clean homepage that clearly shows users they can start ordering from the menu or customize their smoothie, with user account and cart icons at the top. The main action buttons are large and feature background images.
Home page
From a business perspective, I concluded that it would be beneficial to promote selected products on the homepage to increase profitability. Therefore, I added a ‘Featured Items’ section at the bottom of the page.
From Sketch to High fidelity
After experimenting with several UI designs, I replaced the two large action buttons that had background images, as the images made the text harder to see and read, with clean, simple buttons. From a sales perspective, I also added an image to each smoothie to boost visual appeal and encourage purchases.
The menu page is where users can explore available smoothies. Clear categories make it easy to find the right option while also encouraging discovery of new items. A search bar at the top allows users to quickly locate specific smoothies.
Menu Page
After choosing “menu” from the homepage, users will be directed to the menu page. No major changes from initial sketch.
Similar to the mid-fidelity design, categories are clearly marked for a user-friendly interface. Smoothie images are included to provide clarity and support better sales. Ingredient lists are visible within each item description, reducing extra clicks and ensuring users have clear information about each smoothie.
Similar to the initial sketch, smoothie size and base are clearly marked. The smoothie name and ingredients are displayed next to the image for clarity. For add-ons, users can choose from options such as protein, coffee, or vitamins, supporting users diet goals.
In the high-fidelity design, all buttons are standardized for consistency. The action button is highlighted in red, while the others turn grey once selected. Add-ons are organized into two clear categories: Protein (including vegan options to support all dietary restrictions) and Boosts for extras such as coffee or nut butters. The Boosts category was designed to support users maintain their health goals.
The menu item page is where users make their final smoothie selections before adding them to the cart. Here, they can choose options such as smoothie size, base, and any extra ingredients they’d like to add.
Menu item
I kept the same layout as the menu page but added sections for users to choose fruits and vegetables, along with extra categories for nuts.
Customize Smoothie
In the high-fidelity design, I added images of fruits and vegetables to create a more professional look and increase profit potential. I also added nut butters to the ‘Boost it’ section to make the interface more user-friendly. To ensure users clearly understand the smoothie customization pricing, I added clear price descriptions at the top of each section.
After sketching the first three screens, I had a clear vision for how the rest would turn out, so I didn’t need to create additional sketches.
On the checkout page, a clear summary of the order with a detailed price breakdown is displayed. On the same page, users can also enter their payment card information for a faster and more seamless checkout experience.
Checkout
The one-page checkout was designed to optimize the process by displaying order details and payment information on the same screen. The order summary and price breakdown are visually separated for clarity, and to make final adjustments quick and easy, users can remove items or change the quantity of smoothies directly within the order summary.
This app has the potential to make healthy eating more accessible and engaging by allowing users to easily customize smoothies to their taste and dietary needs.
With its clear design, playful visuals, and streamlined checkout, the app has the potential to enhance the user experience while also driving customer loyalty and business growth.
Potential Impact
Constrains
The main constraints of this project were time, scope, and resources. I had a limited timeframe to design and iterate, which meant focusing only on core flows such as the menu, customization, and checkout. In addition, access to real user testing was limited, so many design decisions were informed by assumptions and secondary research.
As part of the admission process for the Beginex program, I was tasked with completing a design challenge to demonstrate my skills and approach to problem-solving. This challenge served as both an evaluation of my design thinking abilities and a preview of the program’s hands-on learning style.
The deliverables included outlining the design process and producing a mid-fidelity prototype, which I successfully completed and was accepted into the program. In my case study, I developed the project into a high-fidelity prototype and UI design, specifically to demonstrate my visual design expertise.
Background
See the journey below or