Interview insights

• “Just having to be more conscious of labels than the average consumer, especially when I'm trying to get in and out, is sort of a pain.” - User with gluten allergy

• “A feature that would recognize that we have to purchase these items pretty frequently and recognize other items that I would most probably not need for the next month or so.” - User on a vegan and clean label diet

• “I want everything organized in my head before I go in so I’m not going back & forth between sections that are far from each other”- User on a Keto diet

Persona

Based on the insights gathered, we created a persona to represent our target users.

Journey map

We also did a journey map to trace the steps and tasks that she would take for the grocery shopping process. The journey map helped us identify the pain points in each step and also discover opportunities that would improve the shopping experience.

We discover four major pain points in each step:

• Keeping track of grocery items on what’s needed

• Not sure where all products are and the most efficient way to navigate store

• Time consuming to find / compare products that meet the dietary needs

• Forgot to bring physical coupon thus missed out on the promotion

Competitive analysis

After conducting competitive analysis with other grocery shopping apps on the market, we find that AR features can be a differentiator to our solution and make finding the right product more efficiently. 

The design solution

Enhancing the in-store grocery shopping experience

• Create a dietary profile personalized to their dietary restrictions and nutritional values

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

• Plan their trip with a smart shopping list

• Access digital coupons to find deals tailored to their dietary needs 

User flow

We first create a user flow to determine an ideal path for new users and return users to complete tasks such as account setup, setup their dietary profile, create grocery shopping list, and how they would use the AR assistance feature in store.

The design process

We use pen and paper sketches to first rapid illustrated our ideas, and use a lo-fi wireframe to further add more details. We follow the iOS design system.

The branding

Before turning the wireframes into hi-fi prototype, I lead the creative direction for cARt app to ensure branding and design consistency while collaborating on designing the screens.

Testing

After completing our prototype we conducted a remote usability testing using Zoom to evaluate our app. View test plan.

We set up some tasks for our users to complete. We want to see if it’s easy and intuitive for our first time users to navigate our features. Tasks include:

• Account setup: Setup account and favorite store

• Set dietary profile: Set organic diet and allergic to gluten

• Add a coupon

• Set up a shopping list, share the list

• Using AR shopping assistant to find a gluten free pasta

Our prototype scored an average of 92.5 SUS score based on 5 test participants.

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 they use it again. 

View SUS questionnaire and SUS scoring sheet.

Iteration

There were two major problems that our users encountered surrounding functionality. The first problem was in our AR shopping assistant view relating to the compare product function. Several users were confused about how to exit the Product comparison popped up. 

We fixed this problem by added an escape button on the top right.

The second problem happened during the task of editing a users dietary profile. Some of our users weren’t sure if the back button meant the edit was accepted. So we updated the design by adding a checkmark button to better show that their edit action was accepted.