DURATION

September 20, 2022 - October 5, 2022

Stakeholder

CIS 3990 Assignment

SKILLS

Prototyping
Heuristic Evaluation
User Testing
UI Design

TOOLS

Figma

Overview

Problem
WHAT DO WE NEED TO FIX?

Recently, I was grocery shopping and spent 15 minutes searching for peanut butter, only for it to be placed near refrigerated items alongside sandwich bread. Inspired by this frequent occurrence, I ideated Grocer to help users quickly and easily find the items on their grocery list in the grocery store.

Solution
WHAT DO WE PROPOSE?

Grocer is a mobile application that users to curate their grocery lists then provides in-store guidance via a map to help them optimize their shopping time, quickly locate list items, and take the best path for food shopping safety. The target audience consists of young adults who regularly grocery shop independently.

Scoping

Understanding the Problem
Framing the project question

With this being a self-generated problem, based on my struggles at the local Acme, I knew that I wanted to create a way to easily find grocery store items. Existing solutions I was familiar with included asking a grocery worker where an item is and the Target app showing the location of an item when looking at the item's details. With these in mind, I decided that I wanted to create a new type of grocery list app that would easily display the location of several items in order. This led to ideating a GPS-navigation-esque grocery shopping app.

Guiding Principles
taking a human-centered approach

To guide my design choices, I generated a list of principles to guide my project decisions:

  • Approach design as a means of two-way communication. When designing, I want to keep in mind how interaction between a user and a product is two-sided and to make design decisions that afford clear communication.
  • In designing solutions, I seek to ensure to give the user to power to change things, such as always including options to opt out or adjust what appears on the interface and what doesn’t.
  • I aim to also zoom-out and see how what I’m designing interacts and fits in with other interfaces or systems that the user interacts with. Thus way, I can ensure what I’m designing doesn’t alter or negatively impact other systems.
  • Coming to terms with the paradox that one design does not work for everyone, but also that we cannot personalize an experience to every single person. I want to make intentional design choices with this paradox in mind.

Research

Field Study
going to the grocery store

I tagged along 2 grocery runs, one with my roommate and one with my sister, to observe their shopping behaviors (& pick up some snacks along the way). From my sister's grocery run, I observed that she went in order of non-perishables and non-refrigerated items first before tackling dairy and frozen items. My sister was able to find everything on her list, but noted that the cream cheese had been moved to a different aisle. My roommate had no idea of what she wanted, first grabbing ice cream then eggs and tomatoes. By the time we got back to our apartment, the ice cream was melted. I observed that because she didn't have a plan, we spent more time wandering around the store, causing the ice cream to melt.

Research Summary
Synthesizing research

From these two field studies, I realized that there is a method of optimizing grocery runs based on item type, location, and familiarity. I also witnessed how not having a grocery plan could lead to wasted time or inefficient grocery runs. Lastly, I realized that with grocery restocks, products can often be relocated to different aisles or shelves that can cause confusion. Thus, moving forward with my solution ideation, I sought to focus on helping a user save time by clearly locating and organizing their grocery runs.

Ideation

Sketches
ideating solutions

Having a high level understanding of the features to add and a well-defined purpose, I sketched some basic ideas of the types of screens and what they'd contain.

Alignment
Agreeing on the concept to build

In evaluating my sketches, I wanted to focus on tailoring a user's grocery shopping to their individual list at a given location. This way, they would be presented with an optimized grocery run path to follow. I also wanted a method of creating a grocery list with specific quantities of items to help the user keep track of items.

Concept
what is the proposed solution?

My concept attempts to improve on existing grocery list apps by optimizing and organizing the user’s shopping experience via a map that informs the user of the best path while shopping their list. Whereas existing grocery list applications digitize paper grocery lists and organize grocery list items, this mobile app will tailor the user’s shopping experience to a specified store location. Lastly, this application allows users to provide additional notes when adding items to their lists and scan items to quickly add familiar grocery items, further customizing their list-creating experience.

Prototype

Paper Prototype
CREaTING a low-fidelity prototype

I found that my sketches centered around 3 main functionalities: keeping track of lists, adding items, and guiding the user through an in-store shopping experience. With these in mind, I created a paper prototype. The prototype has 4 main screens, a table of all shopping lists created in reverse chronological order, a singular list with grocery items categorized by type, a search view for adding grocery items, and a map view of the optimized shopping path to follow.

User Flows
CREaTING a low-fidelity prototype

Then, I came up with 2 task flows, easy and hard, to represent potential user interactions that would be tested with the paper prototype in a think-aloud testing session:

User Testing

Think-Aloud Testing
GETTING USER FEEDBACK

Through think-aloud testing, my partner voiced that because the buttons for adding an item and creating a new list appeared the same, she equated the button only to creating a new list. She also noted that there was a lack of clarity in how to add several grocery items to the list in one session, rather than individually. For the map view, my partner expressed that she wished that there was a method of easily seeing which item was located at a pinpointed location rather than a numbering system, suggesting pop-ups that would open when the user would tap the marker for the grocery item on the map. Lastly, she wondered what would happen if the user strayed away from the shopping path indicated by the map.

Heuristic Evaluation
GETTING USER FEEDBACK

Next, I conducted a heuristic evaluation to check for compliance with the usability principles outlined by the Nielson group. The evaluator decided that the best method was to go down the list of 12 heuristics and respond with a severity rating along with a brief explanation. Some key opportunities for improvement and usability issues were identified as follows:

  • There was a mix-up between the add item button and the create list button.
  • There was a lack of error prevention in editing grocery items and their quantities.
  • There should be a more efficient way (less steps) to edit individual grocery items once they have been added.
  • My paper prototype lacked error messages that accounted for edge cases.
  • There was no documentation/help for how to add items and the proper steps to create a list.

User Interface Design

Applying Design Heuristics
RESPONDING TO heuristic evaluation

I decided to design a high-fidelity prototype by first addressing heuristic evaluation feedback in order of severity. By addressing the heuristic evaluation feedback first, I was able to address overlooked issues, get to the root of an identified usability issue, and directly address critical feedback. My fixes were as follows:

  • To help users recognize error, I added error messages for account creation, indicators for search errors (e.g. “No items found”), and included a maximum quantity for grocery list items.
  • To address the efficiency of adding grocery items, I added pop-ups and shortcut edit buttons for items for quick edit access.
  • I addressed more cosmetic issues like incorporating white space and better distinguishing the functions of buttons
  • I added a list example once the user completes onboarding to serve as documentation to help users discover list functionalities.
Incorporating Lived Experiences
RESPONDING TO feedback

Next, I addressed feedback from think-aloud testing, as these observations were more suggestive. Think-aloud testing feedback allowed me to incorporate lived experiences and suggestions into the second iteration, resulting in 3 major improvements:

  • Including visual indicators of the option to add multiple grocery items in the search function at the same time
  • Creating a more immersive map experience modeled after GPS-navigation applications rather than a birds-eye view of the shopping trip
  • Adding item info pop-ups and a GPS-style navigation heading to the map so that the user would know which item they were searching for during their shopping trip

Deliverable

Grocery Lists
KEY FUNCTIONALITY

Users are welcomed with a home screen featuring lists organized in reverse chronological order. Upon creating a list, the user sets a location and adds items, either via quick add, search, or scanning the barcode. Several items can be added in one search and quantities and notes can be added either while adding the item or via the edit button.

In-Store Guidance
KEY FUNCTIONALITY

Users can begin their shopping trip for an in-store navigation to guide their grocery trip. Users can also pause the trip, tap on the list icon to view their full list, or easily navigate out of the trip.

Onboarding
KEY FUNCTIONALITY

Users can quickly sign up with their name, email, and password, limiting onboarding information to what is necessary. Error messages appear in red.

Reflection

How did I feel when working on this project?

What could I have done differently?
What did I learn while working on this project?
What was the most successful aspect of the design?