Role
UX/UI Design
User Research
Information Architecture
Visual Design
Prototyping
User Testing
Scope
Complete UI design for 'Past Orders'
Apply intuitive micro-interactions
Incorporate machine learning into the UI
Mobile App Design
2020
Summary
My Daily Nosh suggests a recipe and shopping list based on a user's budget, preferences, and items in their fridge. The app uses machine learning to provide a tailored user experience based on several inputs combined with the user's history.
My Daily Nosh
The Problem
My Daily Nosh is using an interface that is outdated and unengaging. The company wants to incorporate machine learning into its UI and redesign a flow for ‘Past Orders.’ It must incorporate personalized machine learning, interactivity, and animation to connect with its customers and make the app both more functional and more engaging.
The Process
Key Business Requirements
-
Clean, minimalist, and scalable interface
-
Incorporate machine learning based on user’s inputs
-
Include features for reordering a grocery list and substituting items
Scope
-
Complete UI design for 'Past Orders'
-
Apply intuitive micro-interactions
-
Incorporate machine learning into the UI
Constraints
-
Time: My Daily Nosh had a one week turnaround time for completion
-
Budget: Zero budget was allocated toward user research which meant being resourceful in crafting materials and in participant selection
Audience
-
Age: 22-40 years old
-
Annual income: $40,000 - $80,000
-
Location: Large, urban areas in the United States
-
Interests: Cooking, exercise, health, wellness
-
Attitudes: Health-conscious, optimistic, intimidated by cooking
-
Challenges: Lack of time and resources, lack of skill, social isolation
Personas
Through our assumptions and limited demographic and psychographic research, we were able to define three main personas that we felt would embody our primary users.
Image Source: Antoinette Hocbo
Image Source: Jimmy B. Nguyen
Image Source: Antoinette Hocbo
Comparative Analysis
A comparative analysis was conducted to analyze best practices for machine learning-based user interfaces on mobile devices.
Competitive Analysis
A SWOT analysis revealed the strengths, weaknesses, opportunities, and threats between leading apps that utilize machine learning.
User Flows
As the design process progresses, things become less abstract and more visual. We sketched user flows in order to map these pathways and better visualize our users’ experience.
Sketching
Exploring, ideating, and refining potential solutions.
Wireframes
Now that we better understand our users we can begin designing a structure for the app. The wireframes below contain our content strategy and will serve as the blueprint for the final design.
Wireframes by Volodymyr Melnyk
Branding & Styling
Style Tile
A style tile consisting of fonts, colors, and interface elements was created to communicate the essence of a visual design direction and to help form a common visual language.
Moodboard
Creating a mood board allowed us to collect thoughts, ideas, color schemes, and moods in one place to define a coherent design concept without the risk of losing sight of the bigger picture.
Logo
The original logo was inconsistent with a modern and minimalist UI so we redesigned it to look and feel more modern and friendly.
A rounded and 'squishy' typeface that incorporates a food item and the main brand color helped us achieve this.
Component Library
A component library was created in order to establish a consistent visual design across all screens of the app.
User Testing
Once a prototype was designed we moved into the testing phase.
User testing was an important step as it allowed us to test our design assumptions and catch usability errors and broken flows in real-time.
We tested sixteen users whom each performed four specific tasks.
These tasks are described below:
-
Reorder the 'Chicken and asparagus' recipe
-
Substitute 'Asparagus' for 'Brussel sprouts'
-
Remove the 'Garlic' and place an order
-
Filter past orders by 'This week'
Summary of High Level Results
Reorder the 'Chicken and asparagus' Recipe
-
The average duration on these screens among users was 5.4 seconds
-
There was only a 13% misclick rate
-
100% of users successfully completed the task
The heatmaps below show where users interacted with the prototype the most.
Substitute 'Asparagus' for 'Brussel sprouts'
-
The average duration on the screens among users was 4.1 seconds
-
There was only a 4% misclick rate
-
A 80% usability score was awarded
Remove 'Garlic' and place an order
-
The average duration on the screens among users was 2.8 seconds
-
There was only a 5.2% misclick rate
-
A 90% usability score was awarded
Filter past orders by 'This week'
-
The average duration on the screens among users was 1.9 seconds
-
There was only a 1.6% misclick rate
-
61.4% of users got away from the expected path
Design Iterations
After a long round of user testing, we compiled the data and iterated our designs to reflect the needs and behaviors of our users. Key design changes are illustrated below.
1.
The 'Remove' icon was originally overlayed on top of the image in the content card, but many users were having difficulty seeing it and/or locating it.
Iteration: We changed the icon, colored it red to indicate importance, and moved it below the image.
2.
The visual design was not engaging. Since our personas indicate that our users are young, we want to make sure the UI is appealing and engaging.
Iteration: Apply skeuomorphism and depth to elements.
3.
The app lacked interaction design to increase engagement and communicate changing states.
Iteration: Add intuitive micro-interactions where applicable.
Conclusion
Outcomes
-
Redesigned the 'Past orders' flow and UI to incorporate machine learning
-
Applied a modern and minimalist visual design to the UI
-
Added intuitive micro-interactions to increase user engagement
Lessons
-
A visual design approach should be thoughtful and carefully considered in order to adhere to user needs and wants
-
A small round of user testing at each stage of the design process is extremely important as they test our assumptions early and allow for quicker iterations
-
Consistency in color, iconography, and elements across the app helps build trust with the user
Recommendations for My Daily Nosh 2.0
-
Make the app more social and shareable to appeal to our users based on what our personas tell us about their habits
-
A/B test all micro-interactions and validate them through user data
-
Incorporate original imagery and icons for personality and brand presence