The project itself :
VMeals is a subscription based healthy meal plan platform designed to help users discover, customise, and subscribe to plans that fit their goals, preferences, and lifestyle. It supports key customer journeys such as onboarding, plan selection, and checkout, while also powering internal workflows behind the scenes.
The meal plan journey involved multiple decisions and too many points of friction. Users needed clearer guidance when selecting plans, customising options, and completing checkout, while the business needed a stronger foundation for conversion and long term scalability.
Design a meal plan experience that feels clear, trustworthy, and easy to complete by improving onboarding, plan selection, checkout, and overall journey structure.
I led product design across key customer journeys and handled full stack development across important parts of the platform.
UX strategy
User flow
Interface design
Design System
Frontend development
Analytics informed iteration
Understanding the journey :
To improve the experience, I analysed how users moved through the meal plan journey and where confusion, hesitation, or drop off appeared. The clearest friction points showed up around plan discovery, customisation, and checkout clarity.
Users needed a clearer way to compare plans and understand which option best matched their goals and lifestyle.
Shaping a meal plan around individual needs could feel unclear without enough structure and guidance.
The subscription process needed to feel simpler, more trustworthy, and easier to complete without hesitation.
The experience was shaped around common user needs across the meal plan journey, especially around plan discovery, decision making, customisation, and checkout clarity. Rather than focusing on a single persona, the goal was to reduce friction across the broader customer journey and support clearer choices at each step.
Users need clearer guidance when comparing plans based on goals, preferences, and lifestyle.
Users need clearer guidance when comparing plans based on goals, preferences, and lifestyle.
Users should feel supported when tailoring plans around their needs, not overwhelmed by choices.
The subscription flow should feel simple, trustworthy and easy to complete from start to finish
I mapped the key stages of the meal plan journey to identify friction points, moments of hesitation, and opportunities to improve clarity. This helped structure the experience across plan selection, setup, checkout, and the post purchase journey.
Help users choose the right meal plan, customise it around their needs, and complete the subscription journey with confidence.
The project schematically :
I translated the key friction points into clearer journey flows and interface directions. The process focused on simplifying decision making, improving structure, and shaping a more scalable experience before moving into higher fidelity design.
Early flows were used to map how users moved through plan discovery, setup, and checkout. This helped define the core structure of the experience and identify where clarity, guidance, and simplification were most needed.
I started by mapping the most important parts of the customer journey to understand where users needed support and where the experience could be simplified. These early explorations helped shape a clearer path from choosing a plan to completing the subscription flow.
A broader view of the meal plan experience, showing how users move from discovery to subscription across the key stages of the product.
A closer look at the plan selection and checkout journey, used to clarify decision points and reduce friction before moving into interface design.
A structured map of the core product flow, used to organise pages, decision points, and content hierarchy across the meal plan journey.
The next step was defining a clearer application map. My goal was to create a structure that simplified navigation, supported better decision making, and made the overall journey easier to understand. The final map was built to connect plan discovery, customisation, checkout, and account related actions in a more intuitive way.
Early wireframes focused on the basic structure of the meal plan journey and the intended function of each section before moving into more refined layouts.
I explored multiple low fidelity wireframe directions to test how the experience could be structured more clearly. The aim was to simplify plan discovery, guide decision making, and create a stronger foundation before moving into higher fidelity design.
A clearer, more structured version of the journey translated into digital form. This stage brought together the key pages, interactions, and decision points across the meal plan experience.
At this stage I translated the journey into digital wireframes to define how each page connected and how the full experience would work as a system. The goal was to make plan discovery, customisation, checkout, and supporting pages feel structured, connected, and easier to refine before moving into higher fidelity design.
A review of how users interacted with the builder flow, used to identify friction, hesitation, and opportunities to improve the experience before final refinement.
I reviewed the early builder experience to understand where users needed more clarity and where the journey felt less intuitive. The goal was to identify friction across plan setup, decision making, and checkout related steps so the flow could be improved before final delivery.
Users needed a clearer understanding of how plan options, calories, and meal types worked together before moving forward.
The builder needed stronger structure so users could move through each step with more confidence and less hesitation.
Before reaching the final summary, users needed to feel sure that their selections, delivery details, and payment choices were complete and correct.
The clear version :
On this step, first I created a static, high-fidelity Voo's app design (keeping in mind all the conclusions from the previous phase of usability studies) that is a clear representation of a final product called design mockups.
After that, I created a high-fidelity prototype of the app.
High fidelity interface explorations showing how the final product experience came together across the key builder and checkout related screens.
I translated the final flow into polished interface mockups that brought together layout, hierarchy, typography, and interaction clarity. The goal was to show how the product would feel in its final form and ensure the experience remained consistent across the key customer journey.
An interactive prototype used to test how the final builder and checkout experience would behave before development.
I turned the final mockups into a clickable prototype to validate flow, interaction behaviour, and overall usability. The goal was to test how users moved through the builder, confirm that the journey felt clear from step to step, and refine the experience before implementation.
Diet page and builder entry
Portion and calorie selection
Plan duration and delivery days
Personal details form
Allergies and dislikes flow
Delivery information form
Order summary and payment flow
End to end journey review
The final outcome:
The project moved from early journey mapping and wireframes into a more structured builder experience that supported clearer decision making across the full subscription flow. By refining the journey step by step, the final outcome became easier to understand, easier to complete, and more scalable as a product experience.
Designing this flow reinforced how important structure and guidance are in multi step experiences. Small decisions around hierarchy, step clarity, and interaction flow had a major impact on how confident and supported the user felt throughout the journey.
The final builder created a clearer path from diet page to checkout, helping reduce friction across plan setup, personal details, delivery information, and order review. The experience felt more connected, easier to navigate, and better aligned with both user needs and business goals.
I learned that complex product flows work best when each step has a clear purpose and the user always understands what comes next. Strong UX in this kind of journey is less about adding more and more about reducing hesitation through structure and clarity.
The next phase would focus on validating the refined builder experience, identifying remaining friction points, and continuing to improve the journey through iteration.
Validate the refined builder flow through usability testing and identify remaining friction points.
Continue improving the experience through iteration, with a focus on clarity, performance, and conversion.