top of page
new bg.png

Anupama Udaykumar

Janice Fabunan

Vibhanika Ravichandran

Yutsen Cheng

Timeline

The Story

People with allergies and dietary restrictions, at present, have to spend a lot of time finding suitable products at the grocery store.Right now the labeling on products is misleading, confusing and it’s time consuming for consumers to make healthier choices at the store. 

Team

Role

UX Designer, UX Researcher

Tools

Adobe XD, Adobe Illustrator, Invision Freehand, Pen & Paper

Trello, Mural, Zoom, Slack

Jan 2020 - May 2020

Problem Statement

How might we help users with allergies and dietary restrictions shop suitable products without spending too much time in a grocery store?    

Solution at Glance

A mobile app that uses Augmented Reality, helps user to make safe and healthy choices in a grocery store.Using the app in-store helps shoppers quickly see the items that fit their dietary restrictions so they can shop efficiently and confidently.

 

CART app lets shoppers 

1. Personalize their dietary preferences based on their dietary restrictions and dietary values

2. Plan their trip to the store with a smart grocery list

Digital Mockup Freebie.png
Digital Mockup Freebie.png

3. Access digital coupons to find deals tailored to their dietary needs

Digital Mockup Freebie.png
Digital Mockup Freebie.png

4. Highlight suitable products at the store with an augmented reality shopping assistant

Design Process

Screen Shot 2020-06-18 at 12.32.39 AM.pn

Define

Problem Overview

Screen Shot 2020-08-03 at 8.29.52 PM.png
Based on a survey conducted by OnePoll for Crispy Green from May 2018 
  • 53% of Americans feel like food labels are sometimes misleading 

  • 82% of Americans have felt tricked by nutritional labels

Based on a survey conducted by Spoon Guru from January 2019
  • 54% of shoppers accidentally purchased food that didn't align with their dietary restrictions due to lack of poor labeling

Screen Shot 2020-08-03 at 8.30.28 PM.png

Research

Survey Results

In order to gather quantitative data, we created an online survey that completed by 51 grocery shoppers. Initially we assumed checkout will be one of the most time consuming part of grocery shopping. But, from the survey results we found that comparatively it was not a major pain point. These results pointed us towards the right direction of the problem.

Screen Shot 2020-08-03 at 9.17.30 PM.png
download (1).png
download (2).png

Interview Insights

Screen Shot 2020-08-03 at 9.56.21 PM.png

Once we had a general idea of pain points from the user survey, we wanted to gather deeper insight into the problem. We interviewed 5 people for this project. 2 of them have certain allergies, 2 of them follow a specific diet, 1 person is a normal grocery shopper. Interviews were quite revealing and gave us design directions as to what to include or exclude in our app. Here are few quotes from the interviews.

Persona

Based on the interviews we derived our persona "Jessica". We referred to her throughout the entire product development process.

An aspect of her behavior that we found insightful was that she finishes up with her shopping list before browsing the store for new or interesting products. This was interesting because we were initially concerned about dwell time and in turn retailer buy-in if we make the shopping process quicker but after discovering this behavior we figured that the app would be affording more dwell time and potentially more impulse purchases.

Screen Shot 2020-08-04 at 12.11.58 AM.pn

Empathizing with the user

We then went on to empathize further with our persona, and did an empathy map to understand how to prioritize the pain points that arouse and then we mapped out the journey to trace the steps that she would take for the grocery shopping process and we listed out pain points associated with each step.

Empathy Map

Untitled.jpg

Journey Map

Journey%20Map_edited.jpg

Empathy Immersion

After tracing out the user's journey we then did our empathy immersion exercise where one of us put ourselves in the shoes of a user with gluten allergy and tried to shop a gluten-free pasta.

Screen Shot 2020-08-04 at 12.41.32 AM.pn

Who, What, Wow

From the findings of our empathy immersion exercise we derived our Who, What, Wow  statement.

The grocery shopper can find a packages food that meets their dietary needs in as less as 30s.

Competitive Analysis

To understand solutions already on the market in order to understand the existing market and the gaps in the industry, we decided to conduct competitive research.

Based on our research we found that in most of the apps we still have to pick up product, turn it, scan the barcode and comparing different products would be another process.

We wanted make this process simpler and quicker and decided to include an Augmented Reality feature (differentiator) to find suitable products and compare them.

Screen Shot 2020-06-18 at 2.53.22 AM.png

Design Goals

Based on the insights we gathered from our research process we made few design decisions and focused on these features:

  • Dietary Profile to setup filters for dietary restrictions, allergies and nutritional values 

  • Smart shopping List to plan perfectly for the grocery shopping

  • Digital coupons to shop efficiently while saving money

  • AR Assistant to navigate the store and find products that are safe for them, to compare products and pick a suitable one.

Ideate

Epics & User Stories

Based on our research findings, we tried to incorporate the product features that would solve the major pain points.

On that note, we came up with epics where each product feature ties to one epic. For user stories we went little deeper into those product features and came up with enough details to design our app.

From this phase each of our team members picked up one functional feature and and started to work individually on those features, in which I worked on the Smart Grocery List product feature.

Screen Shot 2020-08-04 at 12.58.39 AM.pn

Workflow

I then designed the workflow of the smart Grocery List functional feature for new user and return user.

In the new user workflow, the user will be creating a grocery list and add items to the list. Then the list will be sorted based on location of the items in store.

In the return user workflow, the user will select and edit one of their  previous grocery lists, without having to create a new grocery list and adds items to the list from the suggestions that are made by app based on the user's shopping history.

iPhone XR-XS Max-11 – 44@2x.png

Sketches

We then drew out the sketches putting together all our design ideas. We started visualizing our app and we also identified the gaps and overlaps between the views.

These are sketches I drew for the views of shopping list.

list%25207_edited_edited.jpg
list6_edited.jpg
list_edited.jpg
list%204_edited.jpg
list5_edited.jpg
list2_edited.jpg
list%203_edited.jpg

Design

Wireframes

Next, I converted all the sketches into low fidelity wireframes while focusing on

space allocation and weightage between components, the content and the intended behaviors of the view.

Screen Shot 2020-08-05 at 12.57.38 AM.pn
Screen Shot 2020-08-05 at 1.32.53 AM.png
Screen Shot 2020-08-05 at 1.04.19 AM.png
Screen Shot 2020-08-05 at 1.33.11 AM.png
Screen Shot 2020-08-05 at 1.04.42 AM.png
Screen Shot 2020-08-05 at 1.33.33 AM.png
Screen Shot 2020-08-05 at 1.05.15 AM.png
Screen Shot 2020-08-05 at 1.34.28 AM.png
Screen Shot 2020-08-05 at 1.06.52 AM.png
Screen Shot 2020-08-05 at 1.07.59 AM.png

Visual Effects

Color Palatte

Screen Shot 2020-08-05 at 2.44.20 AM.png

Logo Design

Screen Shot 2020-08-05 at 2.29.20 AM.png

Typographic Hierarchy Structure

Poppins 18 pt

Poppins 16 pt

Poppins 14 pt

Screen Shot 2020-08-05 at 2.57.49 AM.png

UI Elements

Screen Shot 2020-08-05 at 2.32.00 AM.png
Screen Shot 2020-08-05 at 2.36.04 AM.png

Hi-fi Wireframes

We then, decided on the design elements for the app. I suggested the name CART for our app, with AR highlighted, indicating the Augmented Reality feature in the app. We opted for a simple color palette and yellow was the primary color agreed by all the team members. We individually added all those design elements to our wireframes.

Screen Shot 2020-08-07 at 4.34.16 AM.png
Screen Shot 2020-08-06 at 3.13.53 PM.png
Screen Shot 2020-08-06 at 3.17.49 PM.png
Screen Shot 2020-08-06 at 3.20.23 PM.png
Screen Shot 2020-08-06 at 3.18.18 PM.png
Screen Shot 2020-08-06 at 3.15.58 PM.png
Screen Shot 2020-08-07 at 4.18.39 AM.png
Screen Shot 2020-08-07 at 4.21.05 AM.png
Screen Shot 2020-08-06 at 3.16.50 PM.png
Screen Shot 2020-08-06 at 3.14.37 PM.png
Screen Shot 2020-08-06 at 3.15.43 PM.png
Screen Shot 2020-08-07 at 4.21.29 AM.png
Screen Shot 2020-08-06 at 3.15.26 PM.png
Screen Shot 2020-08-07 at 4.38.45 AM.png

Evaluate

Usability Testing

Finally we performed usability tests with 5 representative users. Each person was given series of task that covers all the functional feature. After test each person were asked to complete a System Usability Scale (SUS) questionnaire. Through the tests we discovered some minor UI issues which was then rectified.

Screen Shot 2020-08-07 at 8.00.02 AM.png
Screen Shot 2020-08-07 at 8.29.27 AM.png
Screen Shot 2020-08-07 at 8.28.06 AM.png

SUS Score

Grade

Grading SUS Key

92.5

A

Best Imaginable

Feedback

We received mostly positive feedback on our test results. Our users had an overall impression that the app is easy to use and the functions were well integrated. They also gave the feedback that they liked the clean and simple design of the app. Most of them said that it’s very likely and they would use it again. Our SUS Score was pretty good with Best Imaginable grading key.

Lessons Learned

As a student this was my first project in UX design and I have gained  a lot of knowledge and grown as an empathetic problem solver. I had a chance to learn and work on this project simultaneously, that helped me in gaining practical knowledge. This project also helped me realize the importance of research to back-up design decisions. It’s important to understand your users so that you can design a solution that would improve their experience rather than just guessing their wants and needs.

Next Steps

As we think about the future, we had a couple of visions,

 

Such as tapping into the beauty industry. Like packaged food, there are lots of ingredients that go into beauty products, that some consumers can be allergic or reactive to it. CART could help shoppers find products that are safe for their skin, or the ones that fit into their lifestyle. 

 

Thinking about technology, when we produced our AR demo and tested it in-store with a shopping cart, we realized how a hands-free option could potentially improve our app experience. Thus, the idea of incorporating AR glasses or smart glasses came to mind. In future we can also use Robots, for users to shop from the comfort of their home.

Thank you for making it till the end!

bottom of page