dishcovery
dishcovery
Meal Kit Mobile App Project
Year
2024
Role
Researcher, Designer
Team
Hannah Wong, Trusha Neogi, Ayesha Ajaz
Course
INST 710: Interaction Design
Tools
Figma, FigJam
In our Interaction Design course, my team and I were tasked with designing an e-commerce mobile app. Given the open-ended nature of the task, we chose to focus on healthy, diverse meal kits and developed a mobile app tailored to that concept. Throughout the project, we followed a human-centered design process—conducting user research, generating ideas through collaborative ideation, iterating on prototypes. This allowed us to deliver a usable, engaging solution that addresses real user needs.


Choosing a Direction
What kind of e-commerce app should we create?
To begin our e-commerce mobile app project, we had to decide what direction to go in. Through brainstorming potential ideas, and some compromise, we landed on the idea to create a platform that sells meal kits, specifically ones that are pre-made, healthy, and diverse in cuisine.
Evaluating Market Fit
How does our idea fit into the existing market?
Once we had our idea solidified, we needed to understand how it might fit into the existing market. To do this, we conducted 4 total interviews (1 each) with users of various established meal kit services, where we discovered 4 major pain points experienced by each of our participants, who ranged from college students to working professionals with families:
Users are too busy to prepare meals and grocery shop.
Limited variety in cuisines and lack of customization options for dietary preferences. There is also a lack of intuitive filtering options.
Meals sometimes have inappropriate portion sizes (too large or too small). Some users also had concerns about the freshness of ingredients by the end of the week.
Lack of engaging content or features that keep users motivated to continue using the service.
With these pain points in mind, we crafted our problem statement:
Students and working professionals struggle with grocery shopping, coming up with interesting meals to make, and setting aside enough time to prep and cook meals in their busy schedules. They need a way for them to make engaging, varied meals, without all the hassle. Existing meal kit apps like Hello Fresh and Factor are convenient, but often lack variety and intrigue. This makes users feel limited by repetitive meals and minimal diversity. We aim to create a meal kit app that introduces users to authentic dishes from various cuisines, with more flexibility, customization, and introduction into those foods.
Who are our users?
User Personas
With the feedback and information collected in our interviews, we drafted informed user personas to provide us with a better understanding of who we are designing for:


These personas outline users that wish for an easy way to eat healthy, customizable meals that align with their health goals, while also striving to expand and diversify their cuisines.
What do competitors do?
Competitive Analysis
Through our user interviews, we also gained an understanding of which established meal kit services were most popular, and which related more closely to our model. The two that stood out were Factor & Mighty Meals. We evaluated the strengths & weaknesses of each to inform our movement toward developing our information architecture and wireframes.
FACTOR
Strengths:
Offers eight distinct meal categories and includes breakfast and juice add-ons.
The website is easy to navigate, allowing users to view three weeks of menus and detailed dietary information, including ingredients and allergens, without payment.
Pricing is transparent, shown early in the plan selection process on the web, enhancing user trust.
Engaging content such as coupons and referral discounts encourages user interaction, while flexible subscription management allows easy pausing or canceling of deliveries.
The user-friendly browsing experience is supported by a clean, modern website design with intuitive navigation and clear CTAs.
Weaknesses:
Lacks high-level calorie counts on meal pages, which can be inconvenient for users tracking their intake.
Tags like "Top Rated" only appear on certain pages, reducing consistency in user experience.
Requires a minimum order of six meals per week due to its subscription-only model, which may not suit all users.
The navigation bar is not sticky, potentially hindering ease of use during browsing sessions.
The mobile app requires sign-up and payment before viewing meals, limiting initial exploration and potentially deterring new users.
MIGHTY MEALS
Strengths:
Flexible ordering and customization options with extensive filtering for dietary needs, allowing users to easily find meals that fit their preferences.
Simple and streamlined purchasing process, similar to ordering takeout, with the ability to browse meals without account creation.
Dietary information, including calorie counts and macros, is clearly displayed for each meal, enhancing transparency.
Engaging content with new meal tags, partnerships, and video reviews that highlight features like local sourcing and sustainability.
No subscription requirement allows users to order specific meals and set delivery dates without ongoing commitments.
Weaknesses:
Poor functionality and layout on the mobile app, with navigation challenges and a lack of intuitive design elements.
Desktop experience requires excessive scrolling due to large images and text, particularly on the checkout page.
Limited ingredient customization options lead to potential food waste, as users cannot adjust portions or ingredients.
Cluttered website design with a visually overwhelming menu page and under-promoted features like the "Order Planner."
Inability to add or remove items after purchase limits flexibility in managing orders post-checkout.
Overall, we found that both apps have a simple and consistent layout with clear navigation on their websites to guide the users through the process of meal selection, placing an order, and account management. They also utilize meal-based engagement (e.g. tags like “Top-rated” in Factor or meal highlights in Mighty Meals) to draw attention to new, popular, or featured meals, and neither allow for meal size adjustment or ingredient adding or removal.
How will we organize our app?
Mapping the Information Architecture
Using FigJam, we outlined our app’s information architecture. Starting with login/registration, opening into the home/product catalog, and showcasing the elements present to assist in searching, browsing, selecting, and purchasing meals. Additionally, we outlined what the user profile page would include: account details, rewards info, order history, settings, etc.

Visualizing our ideas
Sketches & Wireframes
Using FigJam, we outlined our app’s information architecture. Starting with login/registration, opening into the home/product catalog, and showcasing the elements present to assist in searching, browsing, selecting, and purchasing meals. Additionally, we outlined what the user profile page would include: account details, rewards info, order history, settings, etc.




Product Catalog & Filters
Meal Cards
Birds-eye view of meal
Name
Cals
Dietary icons
Price
Add to cart
Filter/Sorting options
Search & Product Page
Search suggestions
Recent
Trending
Product Page
Meal Photo
Name
Info tags
Description
Macros + Ingredients
Portion size adjustment
Customize meal
Add to cart
Shopping Cart & Payment Gateway
Cart
Items
Delivery options + info
Tip
Bill details
Card info
Place order
Product Page
Meal Photo
Name
Info tags
Description
Macros + Ingredients
Portion size adjustment
Customize meal
Add to cart
User Profile
Name
Edit
Rewards
Order History
Notification Settings
Payments & Refunds
Support
With these preliminary sketches, we moved on to wire-framing in Figma so we could collaborate better.
We divided responsibility of the screens, so that each team member would have the opportunity to participate in the design & prototyping stage.
I was in charge of the Product Catalog Page & the Rewards Page, which is what I will highlight most in the rest of this case study.

Product Catalog
Rewards
First screen user sees when they open the app (if they have logged in)
Meal cards
Picture fill, with overlay for information
3 sections
Featured Meals
Order Again
Browse
Search bar
Filter & Sort options
Progress circle with points displayed in center
Two potential versions
v1: List of redeemable rewards + shows next possible reward to earn
v2: Gradient filled bar to show rewards journey and potential items to earn
Created main nav tab for rewards instead of hiding it in the user profile


Adding Style!
Starting our design system
Once we each drafted our mid-fidelity wireframes, we needed move to the next step: adding style!
Our goal with visuals was to invite our users to experience emotions of warmth, enthusiasm, adventure, and inspiration when using our app.
Color Palette
Primary
#FFFFFF
Text
#181B1E
Accent
#E7702B
This simple color palette leans into our goals of helping users explore a variety of cuisines, with the adventurous, warm nature of the orange.
The white and black colors help with simplicity and clarity.
Typography
Instrument Sans
This font is utilized throughout the design, from headings to body text. It’s soft, rounded corners offer a comforting vibe meant to be felt when enjoying a delicious meal.
Logo
D shcovery
This logo employs a dramatic, swoosh font that incorporates spoon and globe motifs to further our purpose.
The title ‘Dishcovery’ also encourages users to open their horizons, and engage in the platform to explore cuisines without compromising on time and health.
High-fidelity Prototypes
Iterations & The Final Design
After solidifying our style guide, we began creating high-fidelity iterations of each of our screens. We updated our design system to include not just our color palette and typography, but also our components and features as we iterated on them.
Interact with our final prototype!
Iteration 1
Final Iteration


Changes from Mid-Fi:
No overlay over picture of meal
Ribbons in Featured Meals section to indicate if a meal is new or popular
Changes:
Moving picture banner showcasing different aspects of the business mission
Combined filter & sort into one icon
Added info icon next to ‘Featured Meals’
Changes:
Added more options to scroll through
Added an information section on the item reward
Changes:
Key explaining each dietary icon displayed on meal cards
Changes:
Pop up with:
Picture of item
Explanation & use of kitchen item
Changes from Mid-Fi:
Background color differentiation between progress circle & rewards list
Different types of rewards, from discounts to small items related to different cultural dishes




Takeaways
& Next Steps
Working on Dishcovery gave our team hands-on experience with the full UX design process, from initial research to high-fidelity prototyping. One of the biggest takeaways was how crucial it is to deeply understand user needs when designing for convenience, without compromising health or a desire for variety. Our research revealed a clear demand for meal solutions that are not only time-saving but also inclusive of dietary restrictions and diverse cuisines.
We also learned the importance of iterative testing. Every prototype helped us uncover usability pain points and refine the experience into something more intuitive and enjoyable.
Next Steps:
Conduct usability testing with a broader audience to validate our final designs
Build out a more dynamic recommendation engine to personalize meal suggestions based on dietary preferences and past behavior
Prototype more features such as subscription management and real-time delivery tracking