1 of 10

KidsSmoothies

Recipe App

Dzanita Lutvic

Time: 3 months - project

Context: Done for the Udacity UX Designer Nanodegree

Tools: Figma, Photoshop, Miro, Whimsical, Loom and Google Suite

SLIDE

2 of 10

The Challenge

The Kids Smoothies app was envisioned as an app that solves problem to the busy and working parents when planning, preparing and cooking healthy meals for their toddlers and kids.

3 of 10

Discovery:

Research & Analysis

Being a busy mom of 2 motivated me to “get out fo the building” and research and discover how other parents handle daily challenges of preparing healthy food for their kids and is there anything I could do to help them.

​

During the discovery phase I:

  • conducted a survey
  • user interviews
  • analyzed results by using “thematic analysis” method
  • prioritized and detected which features have the highest impact

4 of 10

Design: Concepts & Sketching

After I detected key opportunities and prioritized the features I started on sketching concepts and solutions for the mobile app. I have explored various versions of navigation and “stand out features” that I considered impactful based on the research I made.

​

The solution that resonated the best with me was the recipe catalogue with the option to set alarms for meal preparing and cooking.

5 of 10

Sketches Preview

6 of 10

Develop: Prototyping

After creating sketches and defining user flows and information architecture I worked on:

  1. Designing low-fidelity wireframes
  2. Designing first iteration of the UI designs

​

The prototype that shows initial version UI designs can be found here:

https://www.figma.com/proto/GDZ26OVz21Bo0BpHW9HqY3/UXND-Dzanita?node-id=157%3A1598&viewport=21%2C58%2C0.0768873393535614&scaling=min-zoom

7 of 10

Test: Validation, Usability, Feedback

After the intial designs were made I created a test plan and conducted a test to validate the impact and usability of the current iteration.

​

I have recruited 10 users via loom.com and assigned them a task to explore the app, filter the recipes and find specific favorite recipe.

​

80% of the tested users completed the task successfully and for the rest of the 20% users I detected areas in the design that could be improved for the Iteration 2.

100%

25%

8 of 10

Design: Iteration

After conducting the research of Iteration 1 and focusing on improving solution accessibility I detected that following changes could be made:

  • Color contrast that fits the Accessibility standards:
    • Change from #89C06F (which fails standard) to #518339 (which fits all of the standards) for text with #FFFFFF color and size 16px
    • Increase default text size to 18px regular
  • Increase the size of toolbar text style from regular to bold
  • Add labels to input fields
  • Hover and select color will be #254516 and it will fit the accessibility standards
  • Toolbars will be modified in accordance to fit the accessibility standards and new colors
  • New card design for recipes will be introduced to emphasise easier reading of the content
  • adding the label on the filter component and changing the visual styles of the filter CTA sto more visually reminiscence on filter buttons

​

​

9 of 10

Solution & Impact Overview

The final solution presents easy to use app with the 3 key features:

  • Recipe overview
  • Recipe discovery
  • Profile

That helps parents to find high-quality and easy to make recipes for their kids.

During this process my highest learning was to stay open minded and listen to the users. I.e. the feature about setting alarms to prepare meals was not well adopted and therefore I removed it from the designs.

​

Prototype: https://www.figma.com/proto/GDZ26OVz21Bo0BpHW9HqY3/UXND-Dzanita?node-id=213%3A2803&viewport=275%2C-79%2C0.030720526352524757&scaling=min-zoom

​

10 of 10

UI / Pattern Library