LIST APP

Re-design of companion app to
IoT scanning device for grocery planning.

  • Role UX Designer
  • For Lystr
  • Date February 2017

BRIEF

Lystr is a connected IoT home device that has a built-in barcode scanner and voice recognition software to allow users to add items to their grocery list in the companion app. Lystr engaged my team of 3 designers to re-design the companion app and explore divergent concepts that would leverage the functionality of the device. We delivered final wireframes of an improved grocery list management app following 3 weeks of research, rapid prototyping and usability testing. In this project, I learned how to successfully design a digital product to complement an existing hardware device.

THE DEVICE

Prototype of Lystr device.

The device allows users to add items to their grocery list in the companion app by swiping an item’s barcode or by voice activation. Users could add an item to their list using the voice activation feature by saying “Hey Lystr” out loud followed by “add” followed by the item name. For example, stating “Hey Lystr, add bananas” would add bananas to the user’s grocery list in the companion app.

TRENDS RESEARCH

Lystr told us that they developed the device to solve a problem that they had experienced themselves. They felt that people needed a quick way to add items to their grocery list when they were working in the kitchen as current methods interrupt the workflow.

Our users need a solution in order to be more organized and not forget things at the grocery store because the current solutions are not adequate. – Lystr

We sought to understand trends and behaviors in grocery shopping to understand our target users. Research revealed some key behaviors of shopping households:

3 in 5 households share shopping responsibilities.
To coordinate shopping efforts, co-shoppers rely on informal communication methods

2 of 3 grocery shoppers read ingredients and avoid unhealthy products.
Many shoppers seek fresh produce and products with minimal processing.

80% of primary cooks are the primary grocery shoppers.
Most primary shoppers of the household also do most of the cooking.

We used this research to inform the areas to explore during user research. We followed exploratory questions with some specific questions such as:

  • Who shops in your household?
  • How do you coordinate grocery shopping efforts?
  • Who cooks in your household?
  • How do you prepare for grocery shopping?
  • Have you ever used a grocery delivery service?
  • Do you look at nutrition information when grocery shopping?
  • Do you have any smart home connected devices?

USER RESEARCH

We conducted three forms of user research: Full-length interviews, contextual inquiry and ethnography. We decided to conduct contextual inquiry and ethnography to overcome any self-reporting bias.

While observing shoppers, we noticed that people were using various methods of keeping track of their grocery list. Some shoppers had handwritten lists, some had lists in their iPhone notes, some had lists in a text and others had no list at all. One shopper showed us multiple lists that she had in her iPhone notes for the various stores she shopped at:

I shop at Whole Foods mainly for fresh items because the quality is better. I buy my cleaning products and consumables at Jewel because it’s cheap. – Donna

We found that many shoppers read nutrition labels while grocery shopping and care about food quality like Donna. This insight informed a health and nutrition concept that we developed later in the process.

I look at the ingredients of products I buy. I look for real things I recognize instead of chemicals and additives. - Jackie

Most of our interviewees did not use a grocery delivery service because they felt they did not trust others to pick quality produce for them. Those that used grocery delivery services were happy with the results. This insight informed a grocery delivery concept that we developed following the synthesis of our research.

I do love Instacart and how it gives me back an hour of my day. I’d be perfectly happy never going into a store again - Dan

Everyone we spoke to was aware of friends or family that had IoT devices, but did not believe that they were a necessity for their household.

I don’t know enough about connected home devices to see the value yet. What I do know about them just sounds kind of gimmicky. - Camron

Shoppers expressed frustration with forgetting items and wasting valuable time at the grocery store. Having gained these valuable user insights, we proceeded to define the problem for our users.

DEFINE

Our users expressed a wide variety of motivations, frustrations and influences when it came to grocery shopping. Although households had various methods of planning and doing grocery shopping, there were common frustrations with lack of organization, forgetting items and wasting time at the store.

We tried to come up with specific problem statements to tackle but found that each statement failed to incorporate one key research insight or another. Although we approached problem statements with specificity in our previous projects, we decided that it was best to go broad with this problem statement as it allowed us to come up with divergent solutions. We planned to narrow our scope based on the results of concept testing and user feedback.

Busy, health-conscious grocery shoppers visit multiple stores to strike the right balance between price and quality. This balancing act can cause people to forget items and waste valuable time. Busy shoppers need a way to manage their grocery shopping process in order to maintain their healthy lifestyle while saving time, frustration and money.

IDEATE

We created 3 concepts to solve the problem that we identified. We designed companion app concepts to complement and support the Lystr device. We completed concept testing and competitive analysis to compare the strengths and weaknesses of each.

Concept A: List Management

Concept A was a grocery planning and list management app. We tested an Axure prototype with users to get their feedback on this concept.

We reviewed similar competitors; Gathered Table, Grocery IQ, Grocery Gadget, and Hiku to compare similarities and differences with our concept.

We developed Concept A with the intent to compete against many grocery list creation and management apps on the market. This was a viable concept for Lystr as it offered features of various competitors and integrated the functionality of the Lystr device.

Concept B: Health and Nutrition

Concept B was a nutritional breakdown information app for grocery list items. This concept addressed the needs of users who check product nutrition information to avoid unhealthy ingredients. We tested an Axure prototype with users to get their feedback on this concept.

User testing insights led us to decide to shift the focus from breakdown by calories to breakdown by ingredients. We reviewed similar competitors; MyFitnessPal, Fooducate, Shopwell, and Thrive Market to compare similarities and differences with our concept.

Concept B addressed the concerns of many health-conscious shoppers. Yet, this concept needed further research and validation to determine the specific components that would offer value to the users of Lystr.

Concept C: Personal Shopper

Concept C was a personalized grocery delivery service where users select their own shopper and connect with them through in-app messaging. This concept addressed the needs of users who expressed apprehension in using grocery delivery services due to lack of trust in the person shopping for them. I created and tested an Axure prototype with users to get their feedback on this concept.

We reviewed grocery delivery service competitors including Instacart, TaskRabbit and Hello Envoy to compare similarities and differences with our concept.

We found that Concept C offered a unique value proposition as it allowed users to manage their grocery lists and have their items delivered by a grocery shopper of their choice. It combined the list creation capabilities of Instacart with the personal contact of TaskRabbit and Hello Envoy.

This was a viable concept for Lystr as it addressed concerns of many users about existing grocery delivery services. This concept would need considerable resources and time to setup the platform and engage enough personal grocery shoppers for users to choose from.

Concept Selection

We presented these concepts to Lystr. Lystr expressed interest in the nutritional information and personal grocery shopper concepts, yet stated that these would need more investment than Lystr could afford in the first release of the app. Our client sought to release their MVP soon and expressed a desire to reduce immediate development costs required to change the current app. We decided to focus on developing a prototype for list management and add the other features to a roadmap of future recommendations.

REFINE

Now that we narrowed down the scope of our concept, we created personas to understand the primary users of our design.

Joe and Carrie, cohabiting couple

Joe and Carrie are foodies who enjoy cooking together and trying new recipes. They visit multiple stores to balance food quality and price. They use a paper grocery shopping list and often suffer from miscommunication, sometimes buying the wrong items or duplicating items they already have at home.

Mary, married mom of two

Mary is the primary grocery shopper and cook of the household. She finds grocery shopping and meal prep to be a chore as she has kids with allergies and picky eating habits. She struggles to keep track of household needs and often forgets things at the store.

We developed the following design principles to keep the needs of our users at the forefront of our design:

We used our personas and design principles to converge on the features of our final concept. We built various screens of the prototype in Axure RP to take into usability testing.

FINALIZE

We performed usability testing and heuristic evaluation on the current state of the Lystr app to identify any strengths and weaknesses. We built our app redesign in Axure RP and put it through usability testing with users. Click here to view a video walkthrough of the final prototype.

In our final presentation to our client, we presented a comparison of the current Lystr app to our re-designed version to communicate the changes we made and why. The following is a summary of the major features that we changed or added based on user research and testing:

Manage lists

We re-designed the 'My Lists' page in the current Lystr app to provide access to all grocery lists and indication of lists that have unchecked items.

Shopping list

We re-designed the 'Shopping List' page to allow users to change item quantities and add previously checked off items back to their current shopping lists.

Add items

We added a new 'Add Items' action button in the bottom navigation bar to give users the ability to create quick lists with line by line entry similar to iPhone notes.

List starters

We replaced the ‘My Favorites’ page with a ‘List Starters’ page to allow users to save favorite groupings rather than a master list of individual items.

GUIDE

We provided our client with a roadmap for future releases of the Lystr app. Our recommendations stemmed from the test results of our diverse concepts for Lystr.

Our client was happy that we provided them with an MVP product that they could take to market in the short term and an actionable roadmap for future releases of the product.

REFLECT

This project presented the unique opportunity to develop a companion app to an IoT device. Working on Lystr taught me to examine existing user behaviors to understand how IoT products can blend into user lifestyles. I learned how to complement the functionality and use of an IoT device with a digital interface.

We faced the challenge of developing a competitive product to suit the diverse behaviors and needs of grocery shoppers. I learned that broad problem statements can be useful in encouraging diverse ideas and unique solutions. I also learned how to scale innovative concepts to meet business constraints and client expectations.