VSP Meal Prep
VSP Meal Prep offers a convenient meal delivery service featuring freshly made homemade meals. Clients can enjoy personalized options tailored to various dietary needs and hectic lifestyles, allowing them to customize their meal plans accordingly.
Over the span of about 8 weeks, my team and I developed a high fidelity prototype of both a mobile and desktop website for VSP Meal Prep. I helped conduct user interviews, create user scenarios and use cases, create user personas, create website wire frames, facilitated user and usability testing, and helped design the menu layout and functionality for both mobile and desktop website versions.
Overview
This was a collaborative project completed by myself and three other undergraduate students at UC San Diego for a practicum in professional web design course by Professor David Kirsh. Our objective was to work closely with local business in Southern California to produce a high fidelity website prototype design for our client.
My team and I worked with VSP Meal Prep, a local business that offers healthy, affordable, home-cooked meals to the San Diego and Los Angeles communities.
Context and Background
As a small business, the owner did not have a working website and relied on Google sheets and social media to conduct her business. My team and I collaborated with VSP Meal Prep to create a website prototype to help streamline business operations by featuring a homepage for new and returning clients, weekly menu options, nutritional information, and an online ordering function.
VSP Meal Prep had no existing website, and the owner often relied on Google Forms and social media to run her business. Our client expressed that while Google Forms worked for managing order intake, it would be necessary to create a website that efficiently caters to current clients and effectively communicates VSP Meal Prep and its offerings to new customers as the business expands.
Objectives
Our goals included to:
Create a high fidelity prototype of a website with mobile and desktop versions for our client to streamline business operations to a website platform.
Design a method to present VSP Meal Prep clients with rotating weekly menu options, detailed information on meals that align with customer health goals
Create an efficient way for customers to order meals for the week (order intake form) and design a system for the business owner to collect and view orders on one platform
Research
To create a website prototype that meets the needs of VSP Meal Prep's current clients, I needed to thoroughly understand the requirements of both the business owner and the customers. This involved engaging in detailed discussions with the business owner to comprehend their goals and vision for the website.
I conducted research and gathered feedback from existing customers to ensure the prototype addressed their preferences and provided an enhanced user experience. Through research we found the primary stakeholders of VSP Meal Prep are individuals above 50 years of age and college-aged students.
Our initial step involved a discussion and interview with the VSP Meal Prep business owner to identify key areas of concern and project goals. We discovered that the business operated in a very grassroots manner, lacking a set established business model and an online or digital presence.
To gain a better understanding of how the business was currently run, the owner provided us with various promotional materials, pamphlets, and access to their social media accounts. These resources were essential in giving us insight into the business’s existing operations and customer engagement strategies.
Research collection and Methods
We collected information and conducted research via user interviews, interviews with business owner, and used client feedback from the business owner’s personal interactions with clients.
Interviews with Business Owner
My team and I consulted with the owner of VSP Meal Prep during all steps of the design process. Together with the business owner, we probed about what currently works, what could be improved, and ultimate vision for website design direction.
Client Feedback
Collected feedback of customer experience ordering and receiving meals through VSP Meal Prep. This included user opinions on ease of purchase, quality, taste, and price of food received
User Personas
Created user personas of our primary stakeholders and users of VSP Meal prep after conducting preliminary user interviews
Research Findings
After conducting interviews and getting a sense of the type of clients VSP meal prep caters to, we found the most important persona to be that of an elderly age group, more specifically people of ages 50 and above. This demographic group consists of individuals who live by themselves, with a partner, or some family. And they typically use VSP Meal prep because they are busy and do not want to cook or have some disability that prevents them from cooking often. Since they often know what they like, they need to see a clear menu with a description of the ingredients and/or flavors to see if the meals match their taste preferences and dietary needs.
Persona 1: Elderly (50+)
Some of their goals include:
To have worry free meals for lunch and dinner
To have balanced, nutritious, and delicious meals
To have some flexibility in their meals
Persona 2: Young Adults
The second most important persona we identified is that of young adults/college students. Students are typically in their early to mid twenties, tend to be heavily involved in school organizations and activities, often commute to school, and therefore have a very busy schedule that does not often allow them to cook. The goals for this demographic group include finding convenient meals on the go, and to have healthy affordable meals that will not break the bank
After user interviews, my team and I created personas of VSP Meal Prep clients based on data from user interviews.
Scenario and Use Cases
Design
From Research to Design
Following research, my team and I discussed design principles and created an informed decision that VSP Meal Prep’s website should help solidify the business’s brand, help transition business into a professional & organized setting, and streamline the overall process.
Using preliminary research and interviews with the business owner, we identified that the website should:
Reflect the overall mission of VSP Meal Prep
Attract potential customers and secure already loyal customers
Streamline business logistics
Design Principles:
1 | Reflect
The website should reflect the overall mission of VSP Meal Prep:
To help other individuals be more productive by spending less time in the kitchen cooking meals and allow them to have more flexibility and ease reaching their goals
To help foster a motivational community and holistic approach to health
2 | Attract
The website should attract potential customers and secure already loyal customers:
It should also market the business to customers in their mid 20s to mid 60s by creating a professional, organized, and efficient feel.
Make it easy for current customers to transition over to online ordering
Create an account system for current customers
3 | Streamline
The website should streamline business logistics:
Create a simplified way of uploading rotating menu items and accept orders
Transition from using multiple platforms (social media, text messaging, Google forms) to one unified site.
Competitive Analysis
We completed a competitive analysis of other meal prep businesses around Southern California. We specifically compared branding, functionality, content, site architecture, and navigation menus. Comparing these 5 different meal prep businesses allowed us to envision what the VSP Meal Prep website could include and what we wanted to avoid. Overall, this competitive analysis allowed us to compare strengths, weaknesses, and identify areas of opportunity for VSP Meal prep. After synthesizing the insights from our competitive analysis my team and I created a mood board to create a cohesive visual identity for the site.
Establishing a Visual Identity Through Moodboarding
We aimed to stay true to the business brand, as it was also a requirement of the course. Despite this creative limitation, my team and I developed moodboards to help us organize, plan, and visualize how we could effectively highlight VSP Meal Prep and establish a cohesive visual identity for the business.
These moodboard served as a pivotal tool in defining the visual identity for VSP Meal Prep. By curating a collection of colors and imagery, we were able to grow and create a cohesive aesthetic direction using material the business owner had provided us with at the beginning of the project.
We wanted to reflect not only the joy in eating healthy home cooked meals but also the sense of community and personal well-being that VSP Meal Prep fosters.
Our goal was to capture the vibrant, nourishing experience that comes with enjoying fresh, wholesome food, as well as the convenience and care provided by the service. By highlighting these aspects, we aimed to convey the essence of VSP Meal Prep and its commitment to enhancing customers' lives through delicious, nutritious meals and a supportive, health-conscious community.
Information and Site Architecture
The objective was to design an intuitive and seamless user experience across both mobile and desktop platforms. I concentrated on structuring the content and features to enable users to effortlessly navigate the app, whether they are planning weekly meals, exploring current and past menu options, or learning about how VSP Meal Prep functions.
Low Fidelity Prototyping
We created low fidelity wireframes for the VSP Meal Prep mobile and desktop website on Figma. Creating these wireframes allowed me to build off my ideas using feedback from team members, professors, and other peers.
Wireframe of the mobile app and (Desktop) Web app
After creating low fidelity wireframes I created digital prototypes of the mobile app using Figma. I specifically worked on the design and menu layouts of current, past, and special menu items for both the mobile app and desktop site.
Second wireframe iteration of the mobile app and (Desktop) Web app with images
We created low fidelity wireframes for the VSP Meal Prep mobile and desktop website on Figma. Creating these wireframes allowed me to build off my ideas using feedback from team members, professors, and other peers.
After creating low fidelity wireframes I created digital prototypes of the mobile app using Figma. I specifically worked on the weekly menu layout for both the mobile app and desktop site.
To gain a better understanding and ensure that the app and website contained all the necessary functionality and features needed by VSP Meal prep clients to successfully transition from the previous form of meal ordering via a Google form to shopping for weekly meal options, my team and I tested our prototypes of the VSP meal prep website with current clients.
We conducted usability tests with mid fidelity prototypes of both the mobile app and desktop (web) app and received feedback on their experience using both platforms.
Testing Scenarios
Each participant was asked to imagine they were purchasing meals for the upcoming week and complete a series of scenarios that included:
Finding out what the delivery fee is
Placing an order
Logging into their account or creating a new account
Submitting a feedback form
Checking past orders
Logging out of their account
Their overall impression of the website or business and whether it has changed since their initial impression.
Our Findings
The design process included establishing four design principles to guide our development of design concepts and key app features. With a plethora of design ideas, feedback from peers, reflection, and discussions we also developed down-selection criteria to help streamline the app to include key features: produce life cycle visualization, a “shift center” for volunteers to input hours, and a calendar for volunteer shift sign up.
High Fidelity Prototype
Homepage
We designed a homepage that highlights the core elements of VSP Meal Prep, including:
Healthy and Nutritious Food: The homepage prominently features visually appealing images of the healthy meals offered, showcasing their fresh ingredients and nutritional benefits to attract health-conscious users.
Business Owner: We included a section dedicated to the business owner, providing a personal touch by sharing their story, philosophy, and commitment to quality.
Information about VSP Meal Prep: The homepage provides clear and concise information about VSP Meal Prep’s services, including how the meal prep process works, customization options, and the convenience of the service.
Menus
VSP Meal Prep has weekly rotating menus available to view on the app. Clients can view the past and current menus for the week that include an indulgent image, detailed description of menu item, nutrition information, price, and option to select the quantity of each meal option.
Current and Past Menus
The current menu is first featured when a site visitor selects menu. The past menus are available on a separate tab in order for visitors to see other featured meals besides the one offered during the current week.
Past Menu Filtering
VSP meal prep offers a variety of meal choices. Visitors can either view all meals offered by VSP Mela prep or select different filters from the drop down menu to view specific meals.
Ordering
Volunteers can view the farm calendar to view upcoming farm events and view available morning/afternoon shifts and sign up for shifts.
Shifts at the farm happen throughout the week, both in the morning and afternoon. The Calendar feature is intended for volunteers to sign up for shifts. Our first iteration only offered a weekly view for both morning and afternoon shifts. This iteration includes tabs to switch between logging hours for your shift and the calendar view. Within the calendar, the dots indicate days on which you have signed up for a shift or when there is a farm event happening.
Account
The account page allows clients to:
Manage Addresses: Save, update, or add multiple addresses for accurate delivery.
Update Payment Methods: Add, update, or remove payment options securely.
Set Dietary Restrictions: Input allergies or diet preferences for tailored meal recommendations.
Choose Delivery Method: Select between home delivery, curbside pickup, or in-store pickup.
Specify Delivery/Pickup Times: Set preferred times for delivery or pickup.
View Past Orders: Review previous orders and reorder favorites easily.
How It Works/FAQs
Every meal prep delivery service is different and I want to make sure prospective clients have a clear understanding of VSP meal prep and how to order so that they can get their meals when needed.
The weekly timeline helps clients visualize how far in advance they need to place an order and when it can be delivered/picked up.
If there are still questions after reading the timeline or understanding how the system operates, the FAQ page offers answers to frequently asked questions.
Cristabelotero@gmail.com