4-5 min read
PROTOTYPE AND OVERVIEW
I created a responsive mobile platform for JU IT, a meal-kit delivery service, while adding functionality to filter meals based on nutritional requirements.
VIEW FINAL PROTOTYPE
THE PROBLEM
Health-conscious users are unable to efficiently set and track their nutritional goals.
Why are we designing this?
JU IT currently does not offer a mobile platform for meal-kit customers to place an order—a necessary business need to keep up with the growing market.
Who will use this?
When and Where?
The audience likely doesn't have much time in choosing meals, and seeks convenience that will align with their personal nutritional goals.
What are some ideas?
Prioritizing
Impact and Success
The Goal
I wanted to streamline the achieving of nutritional goals by making the meal-viewing layout more intentional.
USER RESEARCH AND PAIN POINTS
Where were users struggling?
CORE INSIGHT
There needs to be a more streamlined process to tracking nutritional progress.
HEURISTIC ANALYSIS / UX AUDIT
I conducted a UX audit of the existing JU IT desktop platform to analyze its heuristics, to better understand how placing an order looks and feels like. This would also enable me to note what’s helpful and what isn’t.
Needs Improvement
It’s great that the total calories and macronutrients are listed here. However, I believe that users could benefit from an increased visual hierarchy and visibility of these numbers. Currently, there is contrast amongst the colors, but font size should be altered to make these numbers more prominent.
Idea
I think that the screen could benefit by adding pictures to the ingredient list. This would be easier for users to see what they are purchasing, and likely impact conversion rate. I think that this would be a subtle addition but add a lot of color, and in turn life, to the meal.
I noted that while consumers who are busy may save time using this service, there could be an improved system in order to track how nutritionally nourishing their meals are.
I took a look at some competitors on the market. My key finding?
All meal-kit services confirm both a market need and opportunity for mindful nutritional choices.
USER FLOWS
The Rationale
In order to catch up to competitors, it's a business need to add functionality to better track the nutrition of each meal ordered.
The Opportunity
Users have faced issues in conveniently tracking the nutrition of their meals when ordering from meal service companies. Enabling users to input their own specific needs will be conducive to an increased conversion rate.
Business Impact
Users being able to filter for nutrient-specific meals will positively impacts business metrics by attracting a new subgroup of customers (health-conscious users).
The Rationale
This user flow demonstrates a user viewing the nutritional breakdown of their recent meals. I also wanted to implement some sort of meal-syncing functionality to align with user goals.
The Opportunity
JU IT, along with other meal-delivery services, could improve the functionality of quickly and efficiently viewing a breakdown of meal nutrition.
Business Impact
Developing an either in-platform or external meal-syncing function will expand the marketability of JU IT, attracting users that seek out this function.
WIREFRAMES
Letting the ideas take form.
Desktop
Scrapped Mobile Ideas
I tinkered with the ideas of preset weekly meal plans and AI-based recommendations as ways to save time for users. In addition, this would also address a technical constraint of users not knowing their personal nutritional needs. However, I eventually moved on with manual user filtering as the core direction for where I wanted to take the solution.
Selected Mobile Solution
PRIORITIZATION AND RATIONALE
The individualized nature of nutrition calls for users to call their own shots without relying on AI.
Reach—manual user filtering has a more personal reach to users as it is more intentional
Potential revenue—A combination of manual filtering and preset meal plans will expand the consumer base.
High-Fidelity
One of the constraints of enabling users to manually adjust the macronutrient content of their meals is that users may be unaware of their personal needs. To address the issue, I implemented different selection options that share the same premise as a macronutrient adjustor:
The Solution
The labels of “Calorie Smart”, “High Protein” and “Carb Friendly” address the parent goal of healthy eating, while alleviating the issue of users needing to know their personal nutritional needs.
Initial testing revealed some areas for improvement. Here were some quotes:
Another participant said:
60%
Conversion Rate
7.5
NPS Score
While the initial testing results weren't terrible, my designs weren't perfect, and there was room for improvement.
My Next Steps
Iterations
TESTING
Improving check-out metrics.
100%
Conversion Rate
9.6
NPS Score
Qualitative
Participants had direct success in completing the task flow.
Next Steps
Expanding on vitamins and micronutrients would be a next step to further refine the design, as those aspects are currently neglected.
Challenges and Constraints
Working without a mobile design system pushed for me to manually develop my own library, but I found that replicating the desktop patterns and system was great practice.
Time served as a slight constraint as it limited my design towards menu searching primarily. I would’ve loved to expand on the nutrition goals to demonstrate nutritional averages, trends, etc. This would have great user impact as it can serve as positive reinforcement in goal-setting and achievement.
Things I would’ve done differently
I would experiment a bit more with the UI despite working within an existing design system:
The CTA’s on each screen could perhaps be expanded to be wider. While JU IT’s existing CTA’s have very minimal padding, I think that an increased padding and expanded CTA may command greater attention.
Although I included a clear look at a meal’s macronutrient composition (Carbohydrates, Protein, Fat), I admittedly neglected vitamins and minerals. I should’ve also included a dropdown displaying these values. This would be fruitful for those seeking to watch their Iron intake, for example.
Takeaways
Finding the sweet spot between both is the north ⭐️
© Richard Du 2050