top of page
main logo.jpg

Updating and modernizing visual design for a machine learning grocery app.

Summary

Grocer is a machine learning grocery shopping, list keeping, and order placing app that suggest recipes based on your favorite items and items in your cart.

​

With an elegant but simplified UI, this app provides a user the means of personalizing their grocery habits and streamlining the process of rebuying must-have products.

Role

Product Designer

UX Designer  

UI Designer

Prototyping

User Testing

Deliverables

Competitive Analyses

Personas

User Flow Sketches

Digital Wireframes

Visual Design 

Design Iterations

User Testing

High Fidelity Prototype

Tools

Notion

Figma

Canva

Adobe Illustrator

Duration

1 Week

(Design Sprint)

The Audience 

According to research data from our UX specialist team, the target audience is:

​

  • Gender: Female

  • Age: 22-40 years old

  • Annual Income: $40,000-80,0000

  • Location: Large urban areas, United States (initial marketing and focus is New York City)

  • Interests: cooking, exercise, wellness and health

  • Attitudes: health conscious, intimidated by cooking, optimistic, ambitious, wants to eat out less, wants to be healthier

  • Challenges: lack of time and resources, lack of skill, experiences social isolation due to urban culture

The Problem

Those of us at Grocer want to elevate a mobile interface for our grocery shopping app that is scalable and applicable to every user regardless of experience level.

​

The mobile version needs to include personalized machine learning elements, responsive feedback,  and contemporary visual design to increase customer usage and take our product into the future.

​

This all needed to be done within one work week.

The Solution

By sprucing up the app's interface and updated styling through UI choices, I was able to create a satisfying and engaging user experience. 

​

Day and night mode compatibility, and their respective event focus, also adds another layer of responsiveness that pans to individual user goals and needs.

The Process

MVP Business Requirements 

  • User interface based on given wireframes from previous design

  • Highly streamlined pathway for reordering a past saved order 

  • Easy ability to substitute an item in a user's order for a relevant adjacent food item suggested by the app 

  • Contemporary minimalist visual design that compliment images of food items and recipes 

  • Homescreen that includes Lists, Orders, and Recipes

Competitive Analysis

I looked into 3 specific grocery, recipe, and list centered apps to get a form a good idea on how to redesign a successful interface for Grocer.

​

I found that most apps tended to have straight forward layouts but lacked some aspects of dimension and personality.

share-logo.png
IMG_6017.PNG
blue-1000.png
IMG_6018.PNG
download (1).jpg
IMG_6019.PNG
grocer SWOT.jpg

Personas

From data, also collected by the UX Specialist team, I was able to better visualize a design that would be suitable for concrete user personality types. 

persona 1.png
persona 1.png
persona 2.png
persona 3.png

User Flow Sketches

Information Architecture

After analyzing our typical user personas and their interests/goals, let's see some of examples of how common interactions might play out within our app by diagraming specific user flows by hand.

grocer sketch 2.png
grocer sketch 1.jpf
grocer sketch 4.png
grocer sketch 3.png

Site Map

Ensuring content is organized in a manner that is expected and accessible by the user.

site map.png

Wireframes

These digital wireframes were a reference point for mobile interface designs to come.

grocer wf 1.png
wf grocer 3.png
wf grocer 2.png

Wireframes by Volodymyr Melnyk

Visual Design & Branding

Mood Board

I compiled a collection of images, color swatches, and design screenshots using Canva which inspired the color scheme concepts for the UI.

 

​

​

Style/UI Guide

By categorizing all of the visual elements, typography choices, and final color palette decisions into a collective UI inventory I was able to ensure consistency while designing mockup iterations.

​

This step was especially important in this visual update project as I needed to design and manage noticeably refined changes.

style guide.png

User Testing

Determining which portions of the modifying and reordering design flow worked and which did not by observing participant interactions with the app as well as getting their impressions.

 

Tested design assumptions and ease of accessibility through specific tasks listed respectively below. 

  1. Access past orders from Home using navigation bar

  2. Change filter settings

  3. View "Tuesday Tacos" order

  4. Substitute shrimp for tenderloin

  5. Add order to the cart

  6. Verify price and submit order

User Testing grocer.png

Design Iterations

After testing flows with 7 users, I looked over the results and took into account impressions from the participants. I then moved forward with fixing confusing aspects of the user interface.

Home old.png

Old

Home.png

New

Issue:  First things first, based on user testing results, users were having the most trouble with finding the cart icon when trying to place their order.

Fix: I moved it to a more natural spot, kept its position consistent across screens, and rearranged the other UI elements accordingly.

Group 83.png

Old

Group 77.png

New

Issue:  A few test participants stated that they couldn't see the cancel icon clearly as well as they didn't know that the "sub" text button was clickable.

Fix:  Rearranged the icons to create a better visual aesthetic for individual item cards. Made the "sub" (substitute item) feature into a more visually identifiable button.

My Cart old.png

Old

My Cart.png

New

Issue:  The order submitted screen was deeming boring and unfulfilling. Some users suggested coming up with a way to make the order screen seem more interactive and responsive.

Fix:  Added responsive progress bar with indicators and update text in order to give users a sense that their orders are a priority.

In Conclusion

Outcomes:

During this Agile design sprint I learned how to ideate multiple solutions for user issues related to machine learning applications.

​

After careful user testing and considering impressions I was able to refine the overall aesthetic of the app, solve common user errors, and yield a nuanced version of a grocery list app.

Next Steps for groceR:

With more time to further research, test, and develop this product I would most likely aim to:

​

  • Expand on micro interactions and animations to make the app seem more lively

  • Develop recipe guides for suggested recipe screens

  • Introduce social elements, ie. friends functionality where users can compare opinions on items and share recipes

  • Add more illustrations for relevant screens in order to round out the app

  • Ideate feasible enhancements to keep the app up to date with current industry best trends for mobile list apps

Lessons:

  • Visual design is essential in displaying the goals and standards of a product but also in alerting users to key features.

  • Concise user testing allows for quick problem solving that can save designers enormous amounts of time later on with future iterations.

  • Consistency with color palette and iconography allows a brand to have a more solid presence and be recognizable by various groups of potential users.

​

​

​

bottom of page