Olea
End-to-end mobile app design for a meal delivery service linked to a user’s doctor
Project Duration: Four Weeks, 80 hours | Role: Solo UX/UI Designer | Tools: Figma, Procreate
Background
This project emerged from a concept developed by my brother, who has worked in the prepared meal delivery industry for a number of years. The fundamental idea is to provide doctors with a way to prescribe or recommend a meal plan service to their patients.
There are numerous companies that consumers can choose from in order to have healthy prepared food delivered to their door. These companies offer different meal plans and diet options, however they are not tailored to individuals with specific medical conditions, and they are not designed around patient needs.
Doctors frequently prescribe diets to patients, but in reality, people often lack the time or resources to shop for groceries and cook, especially when combined with the difficulty of following a complex diet plan.
It is well documented that many of the leading causes of death are lifestyle related, with poor diet being a primary factor. Far too often, the convenience of a drive through fast food chain wins out over a healthy meal. This product seeks to change that calculus by bringing convenient nutritious meals to people who need them most.
Challenge
Design an end-to-end mobile app concept for a prepared meal delivery service that can be customized and monitored by healthcare professionals, aligned to adhere to specific medical diets, and easily accessed by patients.
Goals
Build a minimum viable product that allows users to sign up for and purchase a meal plan linked to a specific medical condition.
Enable users to track their meals and connect with their doctor’s office.
Research
My research plan focused on three categories of potential users: healthcare workers, patients and meal delivery customers. After performing a competitive analysis of the meal delivery space, I conducted secondary research around diet and nutrition. It became clear that the concept of food as medicine was becoming an increasingly important focus for doctors, hospitals and insurers. However, most of the solutions in this area were local and ad hoc.
Interviews
I also conducted several one-on-one interviews. I first spoke to a doctor, and his perspective on the concept and feedback proved to be invaluable. Takeaways from our conversation included:
Hospital outpatients receive referrals to see nutritionists and advice related to eating habits, but many people do not listen or are unable to change their habits.
The service should focus on primary care physicians because they see the same patients annually and are best situated to track patient health over a long period of time.
Compensating doctors for referring patients to the service may not be possible due to conflict of interest laws. However, providing data and tools about what patients are eating could be just as beneficial, especially to primary care physicians.
Following interviews, I organized key takeaways, pain points, surprises and key quotes into a research synthesis framework.
I also interviewed someone with juvenile diabetes, a single mother with a gluten allergy who receives a weekly produce box, and a self-described “degree nutritionist” who had experience advising people on nutrition and eating habits.
One interviewee discussed her new insulin pump, which was designed to send information to her doctor on a real-time basis. She was hopeful that this new technology would improve her ability to relay blood sugar information directly to her doctor, and to improve communication in the event of an urgent matter. This, together with insights from my other conversations, encouraged me to pursue a meal tracking feature in the app that would allow patients to log their meals, and relay nutritional information to their physician.
Customer Journey
In order to envision the potential path a user might take with the app, I created a persona and mapped out a customer journey, which tracked various phases, steps, emotions, thoughts, touchpoints and opportunities.
Click through to see the full size image.
The persona, a middle aged man named Joe, is told by his doctor to start eating healthy. Joe initially attempts to improve his diet by shopping for groceries and cooking healthy meals, but he is unable to fully commit due to his stressful job and a lack of free time.
After signing up for the meal plan, Joe swaps out his usual fast food lunches for healthy delivered meals, which he tracks using the app. Several months later, on a return visit to the doctor’s office, his physician shows him a screen with nutritional information taken from his tracked meals, and indicates that his metrics are trending in the right direction.
Customer persona initial phase: first doctor visit.
The customer journey helped outline how a user might interact with the app, but it also raised a variety of new questions:
Should users be allowed to track meals not related to the subscription?
Should there be an insurance component for individuals who cannot afford a delivery meal plan?
Should users be allowed to deviate from the meal plan approved by their doctor?
I took these questions and others forward as design considerations.
Sitemap
I realized that the concept for the app was large and I would be unable to design every screen. Generating a sitemap helped me prioritize which areas of the app I would focus on designing. Several iterations of the sitemap were developed, and I categorized screens by color to guide my path forward.
Ideation and Sketching
After developing several potential onboarding flows in Figma, I sketched loose wireframes of the login, onboarding and purchase screens, as well as the meal tracking and health dashboard elements. Visualizing these flows helped me realize that the app should encourage but not force users into a specific meal plan. If people did not feel supported or encouraged, they might decide to reject the product before committing to an initial order.
Initial onboarding and login flow.
I also explored some existing design patterns from several other prepared meal delivery companies. I determined that the full app, including meal tracking, box editing and other features, would only open up to users after they had placed an initial order.
This provided the app with an internal pre-order and post-order structure. Iterating on my initial sketches also helped me simplify the onboarding process and focus on the core tasks a user would need to be able to perform.
Wireframes
Using my sketches and user flow charts as a starting point, I began to design wireframes in Figma. When designing wireframes, I considered several key design choices, including menu item card orientation, and layout choices for overlays and checkout form fields.
Branding and UI Kit
When developing style and branding for Olea, I attempted to balance the product’s position within both the food delivery and medical care spaces. I ultimately decided to push the design closer to a food app than something one might see aligned with a doctor’s office or hospital. I wanted the app’s visual design to encourage users and emphasize the healthy, delicious meals the service would offer.
Visual Design Revisions
After creating initial high fidelity screens using components from the UI kit, I realized that the designs were slightly too busy and unconventional in nature. I made revisions to soften the design somewhat, removing hard edged drop shadows and outlines, and reducing the use of bright colors. Headers and footers in particular saw significant changes.
User Testing
Once the app’s visual design was established, I created a prototype and conducted several one-on-one user tests over Zoom. Participants were asked to work their way through the onboarding and initial purchase process, and completed several tasks, including meal tracking and delivery skipping.
All of the participants were able to complete the requested tasks. Nonetheless, a variety of issues cropped up, and pain points uncovered during user testing served to guide another round of design revisions.
A meal tracking feature motivates users and provides them with an easy way to demonstrate to their physician that they are committed to improving their eating habits.
Users must complete an initial onboarding and purchase process before accessing the full app.
A Health Dashboard screen presents nutritional information based on tracked meals, and a Boxes screen allows users to skip or edit individual deliveries.
Conclusion
As always with projects such as this one, the learning process is ongoing and ultimately there are numerous features and ideas left on the cutting room floor. Due to time constraints, some ideas that did not make it to the prototype stage include customer reviews, a filter feature to accommodate users with allergies or dietary preferences, additional meal plan options, and a more fully featured health dashboard with an integrated doctor communication function.
There is the also an entirely other side to the concept related to how a doctor’s office might interact with the service. For example, a dashboard screen that a doctor would display when meeting with a patient.
However, leaving these features out of the design served as a useful reminder: at the end of the day, it is most important to maintain focus on the user and the app’s core functions.