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