Nutrikitchen

All-in-one smart kitchen and health app that understands your medical and dietary needs.

🏆 Top 10 Finalist at Adobe x Ring Creative Jam

Role
UI/UX Designer

When I Did It
Jun. 2021

Team Members
Amy Lo

What I Did
UI/UX Design

Tools
Adobe XD

Introduction

Designed for people with limited mobility, dietary restrictions, and specialized medications, Nutrikitchen is a hub for managing your wellness and kitchen without ever leaving the app. In this concept app, I participated in a team of two with my partner, Amy. Nutrikitchen was a finalist for Adobe College + Ring Creative Jam, scoring in the top 10 out of 130 teams!

Challenge

“Your challenge is to provide peace of mind and help people install, operate, or share devices and information to improve their surveillance, communication, temperature, and entertainment around the home and their neighborhood. Design an inclusive third-party mobile app for a specific persona with special needs to help bridge the technology gap.”

Constraints

  1. mobile app that solves accessibility need

  2. work with new or existing smart devices

  3. Amy and I were first time Adobe XD users

  4. Brief project timeline to complete

Users and User Needs

  1. People with dietary restrictions

    • Know what foods they can cook and eat with their restrictions

  2. People with limited mobility

    • Navigate their cooking devices easily

    • Navigate their fridge easily

  3. People taking specific medications

    • Remember when to take their medicine

    • Know what foods interfere with their medication

Problem

Amy and I kept in mind 3 questions while ideation our solution:

  1. What foods can users eat with their diet/medication?

  2. How might we make cooking easier for people with limited mobility?

  3. How might we make meals enjoyable and accessible without the stress of cooking?

Ideation

Amy and I laid out all of the features that we wanted to include in the app using sticky notes, organizing the features by how users would interact with them.

User Flow

Using our brainstormed features, Amy and I created our user flow, starting with the onboarding process. We organized the flow by separating each flow based on the screen of the interaction.

Wireframes

Onboarding

Dashboard and Profile

Refrigerator

Stove and Oven

To create our wireframes, we referenced styles from Adobe XD UI Kits. It was difficult to wireframe at first because both of us were new to Adobe XD and were sometimes working asynchronously on the project. Because of a tight schedule, we jumped from wireframing to visual design after agreeing on each screen.

Design System

We built a modular, component-based design system to prioritize consistency and usability across our product. For our design system, we struggled with choosing a color palette that would fit our concept. We gained experience on customizing reusable assets and built branding and components as part of our app. We wanted the Design System to portray comfort and ease and displayed through cooking and health. We chose a color palette that plays into the food and nutrition theme.

Prototype

Prototyping on Adobe XD was new for us and we had multiple screens with complex actions and micro-interactions. We relied heavily on our user flow diagram to plan out interactions in our app and took advantage of Adobe XD’s smart-animate and timing features to create visual delight in our screens.

View the interactive prototype here!

Solution

Solution 1: Smart Refrigerator (Dietary Restrictions)

Nutrikitchen regulates your dietary needs by keeping track of the foods you eat and what’s inside your refrigerator.

  1. Alert to buy groceries if food is running low / almost expired

  2. Ordering grocery delivery based on what’s in your diet

  3. Recommend foods that users can and can’t eat with their diet

Solution 2: Smart Stove (Limited Mobility)

Nutrikitchen helps people control kitchen appliances from your phone without the physical stress of cooking. Through Camera View and heat-detection, our app understands when you’re cooking and will safely monitor your next meal.

  1. Recommend modes of cooking based on your meals

  2. Autonomy over their cooking experience - still allowing to override and/or cook manually

Solution 3: Medication Reminders (medications)

Using motion detection, Nutrikitchen will alert you when you grab foods that may be hazardous for your health or interfere with your medication.

  1. Recommend foods that users can/cant eat with their medication

  2. Medication reminders + especially if taken with food

  3. Reminding for mealtimes and/or for healthy snacks

Results

Success Metrics

Our app was evaluated on the following criteria:

  1. Does the solution address a target audience and their needs?

  2. Does the prototype solve the problem in an innovative way?

  3. Is the user experience and interface intuitive?

  4. Is visual design used in a thoughtful and meaningful way?

We received notification that we made it to the top 10 and had a few days to prepare for a live three-minute presentation.

Presentation

As top 10 finalists, we presented in the Finale with a live 3-minute demo of our app and its user flow.

Amy and I are so proud to have Nutrikitchen finish in the top 10 out of 130 teams!

Feedback

After our presentation, our judges gave feedback on our app design, valuing its layout and understanding of design principles the most. They offered us advice on how to improve our app to make it more accessible and easy to understand for individuals like the elderly.

Takeaways

  1. Deliver to user expectations

    • Address user needs in presentation

    • Match expectations of stakeholders, our judges

  2. Refine the scope of the project

    • Simplifying the project to an understandable user flow

    • Could have conducted user research

  3. Time management throughout the design process

    • Good time management helped alleviate the stress that could have come with our tight timeline

  4. Animate to tell a story

    • Micro-animations can visualize complex parts of an interaction

Next Steps

  1. Usability testing

    • How might people with different abilities and complex needs use our product?

    • How might we design for shared households that may all use the same appliances?

  2. Product roadmap

    • What steps would you take to make this real?

    • Reliance on smart kitchen technology that may not exist with the features we want

    • Competing in a relatively under-developed market

  3. Feasibility and execution

    • Could our project actually be executed as an MVP?

    • Very complex - how would our interactions work with smart technology? How would you integrate multiple smart device designs into one app?

    • Designing for smart devices has to fit both the material and digital constraints. How would physical appliances interact with our app?