As part of a larger rebrand initiative, I led the redesign of Personal Trainer Food’s outdated checkout experience. Through research, collaboration, and a refined UX strategy, our team aimed to design an experience that would improve both clarity of meal plan offering and conversions.
The goal: clarify meal plan offerings and increase conversions.
.png)
.png)
I led the UX and UI design of the Personal Trainer Food checkout redesign, owning the process from discovery to delivery.
This included:
1. Build a user survey into the beginning of the checkout process to determine plan recommendation
.png)
The user survey meets the user where they're at and centers the plans around their goals, needs, and preferences, rather than placing the burden onto the user to learn about the service and plans.
2. Redesign the food selection flow
.png)
The new food selection flow puts the updated food images front and center, along with clearly defining what is needed of the user to proceed in terms of selections. You can see here the user has successfully completed their selections and can save the plan and move forward. The main goal here was to redesign the actions and information clearly for the user, along with improving the overall design and aesthetic. A multi select button was also added for users to quickly select or deselect multiple items quickly.
Remove friction from checkout, add payment and account options for flexibility
.png)
In the payment portion of the checkout flow, autofill and additional payment options added to offer flexibility, convenience, and more successful checkouts.
Personal Trainer Food was experiencing low conversion rates and high drop-off during the food selection process of their checkout flow. Users were spending significant time browsing without progressing to checkout, indicating confusion around meal plan options and friction in the flow.
We identified an opportunity to improve the usability and structure of the food selection experience, by reorganizing the checkout into a guided, conversational format, and to apply best practices to reduce cognitive load and drive clarity.
Our discovery phase began with a deep dive into existing client data to better understand user behavior and pain points. We reviewed cancellation reasons, support tickets, analytics, and prior user research to build a clear picture of where users were getting stuck or dropping off. To complement this, we conducted a competitive analysis to identify common patterns and opportunities in the meal delivery space, along with a brief market analysis to better understand the space. We also facilitated a collaborative customer journey mapping session with the client, mapping the full experience from awareness to advocacy, to identify friction points and uncover moments of opportunity.
.png)
.png)
To address these issues, first we focused on restructuring the checkout flow to be more user-centric, shifting away from placing the burden on users to decipher meal plan options. Instead of asking them to navigate and interpret complex offerings, we designed the flow as a guided, conversational questionnaire. This approach allows us to listen to user needs, preferences, and goals first, then recommend a tailored meal plan based on their responses. This approach would create clarity, reducing friction, and improving confidence in their selection.
We also uncovered major usability gaps in the food selection process. The existing design overwhelmed users with a high volume of required selections, making the experience feel confusing and burdensome. To address this, we applied design best practices to simplify the interface, clarify requirements, and surface only the most relevant information at the right time. The goal here would be to bring clarity to the process and improve checkout completion rates.
Lastly, we aimed to uphold one of the brand’s core tenets: simplicity and convenience. We focused on streamlining key interactions making it easier to check out, create an account, and complete payment. This meant introducing accelerators for quicker checkout, flexible account creation, and multiple payment options to better fit user needs and reduce friction at the final step.
1. Build a user survey into the beginning of the checkout process to determine plan recommendation
2. Redesign the food selection flow
3. Remove friction from checkout, add payment and account options for flexibility
In this phase, we translated insights from research into low-fidelity flows and wireframes to shape the new checkout structure. These early concepts were reviewed with internal teams and client stakeholders to align on direction and secure buy-in. Once approved, we moved into high-fidelity UI design and testing to refine the experience and validate key interactions.
.png)
.png)
After wireframes and flows were approved, we transitioned into UI design. We started with the user survey, followed by the meal selection process, and finally the account creation flow, which made up the three core sections of the experience.
This phase involved close collaboration with both internal and external development teams, reviewing front-end and back-end implementations to ensure design integrity and functionality across the entire experience.
To validate and refine our approach, we conduct weekly analytics reviews to monitor user behavior and identify drop-off points. Currently, we’re running a split URL test to compare conversion rates between two flows: one where users select meals during checkout and another where selection happens post-purchase. These insights help us continuously iterate and optimize the experience.
.png)
.png)