ListAid

Company: Startup Side Project
Platform: iOS
Role: UX/UI Designer, Front-End Developer
Tools: Sketch, Xcode

Problem

As someone who frequently cooks, I was disappointed by the current selection of mobile apps focused on shopping lists. Some apps worked well for managing lists while lacking convenience features for shopping focused lists. To build a better shopping list experience, I started WebTap to build and ship ListAid to the AppStore.

User Research

To understand what users look for in a digital shopping list, I performed desk research into US consumer shopping behaviors. Shopper’s primarily create lists for the following reasons:

  • Not forgetting items
  • Save time when shopping
  • Purchase items for recipes

Research also showed that shoppers utilize voice assistants in smart speakers and phones to manage shopping lists. With the average user having 2 lists saved.

Sources:
All Recipes – 2015 Digital Grocery Shopping Trends
Think With Google – Voice Activated Speaker Usage Statistics
VoiceBot.ai – Smartphone Voice Assistants
Cheddar App Metrics (Since removed)

Requirements

Before starting the design process, I set the following objectives based on competitor analysis and user research:

  1. List items are saved for reuse
  2. Group items into categories
  3. Order list items to optimize the in store shopping experience
  4. Integrate with the phone’s voice assistant

Wireframes

To kickoff the design process, I started wire framing screens against the product requirements. Starting with the list selection screen, considering the average user has 2 lists saved it made sense to enlarge the lists. This larger design uses the screen real estate more efficiently and gives users a glimpse into the list’s contents.

Lists Screen
Add Items Screen

Considering the experience of populating a list, it was important that users can add items from previous lists as a way to take inventory. The Add Items screen keeps a running list of past items with the input field doubling as a search box to improve findability. To address user’s desire to purchase items for recipes, items can be saved into groups.

Design

To give users a sense of clarity, the UI is stripped down to the bare essentials. Using the color blue for primary touch points to communicate trust. To recreate the satisfying feeling of crossing an item off, items on the list can be completed with a swipe. On the Add Items screen, groups are treated with a grey pill bar to indicate they can be opened.

For shoppers who like using voice assistants, ListAid integrates with Siri. This integration gives shoppers a second interface for adding items to their lists with smart speakers. Further addressing the primary pain point of forgetting to purchase items.

Users can add a list widget to their Today View, allowing them to complete items without having to unlock the phone.

Prototype

To gather user feedback and start the MVP build, I developed a working prototype in Xcode and shared it with others. Despite the lack of signifiers, users found the gesture driven interface to be intuitive.

Red status bar is part of iOS record feature

Thoughts

To address shopper’s desire to save time, I think there is an opportunity to conduct user interviews to learn more about their in store experience. If shoppers are navigating the store in a consistent order, there could be an opportunity to use machine learning to auto sort their list. This can save shoppers time not having to back track for an infrequent item they forgot to pickup.

While I set out with the intention of launching this product to the public, the amount of development work to create a platform that could scale to Android was beyond my capacity. This would be a must since some households have partners that are on each platform and allow them to sync lists.