Redesign: Bring Apps Shopping List

Illustration by Rafika Aulia Rahma Sari

I’m the type of person who goes monthly for my grocery shopping and tends to miss something from my list. So my teammate recommends me to use the Bring App to help me with my grocery issue. With Bring App, you can create different shopping lists for home, work, and trips, including a searchable database of different groceries, organized by category.

However, I’m not impressed with the app experience. It’s quite confusing to use when I want to create a shopping list and how to manage it. I tried to find what is lacking from this app and also tried to create a better experience.

Design Process

Observe
Problem Assumption
I began with a problematic assumption about the existing “Bring Apps”. These are the assumption based on my testing:

  • Creating a shopping list is confusing. When I used this app for the first time I don’t know where to start.
  • Where is my shopping list? It takes a lot of time to find my shopping list, I’m not aware of it placed in the sidebar.

Usability Testing

  • Create a shopping list when you want to buy monthly needs or food recipes.
  • Look back on your shopping list when you want to change it or if you need it again.

User interview
Next, I do a user interview with 20 participants (Offline & Online) from various professions to validate more about the problem, also to find pain points, needs, and goals from every participant. Here are some takeaways collected from the interview:

  • Reasons they make a shopping list: They want to buy something that they have already planned. The preventive step, if they can’t remember all the goods.
  • Shopping amount & category: Mostly, they need a shopping list if they want to buy a lot of specific products.
  • Forgetful: All of them said, it is difficult to remember any kind of product.
  • Reuseable: They can reuse those shopping lists if they need it again.

Persona
Based on some online research and discussion with my teammate, there are 2 types of Bring apps users:

  • Users who want to buy their monthly needs/food recipe.
  • Users who want to buy something based on their friend’s recommendation.

Therefore, I want to focus on making some solutions because all of the participants seem to fall into that type of persona.

Empathy map

Goals
Help users to re-check their shopping lists without hassle.

Define

Pain Points
After doing user interviews, usability testing, and research, I feel confident that the problems are now validated.

Pain Points #1: They are confused to create a shopping list

  • They don’t know if the page title “Home” is their shopping list title.
  • The list suggestion & search bar make the users confused because they want to write on their own, not by select or search the suggestion.

Pain Points #2: Item suggestion

  • When the users tap on the image, it’s not easy to figure how to roll back or undo the selected item.
  • It makes the users frustrated then counter the grid items with a thousand tapping.

Pain Points #3: The shopping lists are undiscovered

  • When the users wanted to reopen their shopping list, they couldn’t find where it was placed.
  • Therefore, it makes the users recreate a new shopping list (with the same items as before) because they thought if they haven’t saved it yet.

Ideate

Concept Model
The concept model is one of a method to find ideas or solution to the pain points

Paper sketch
I try to make some low fidelity concepts by sketching on paper. It will make it easier to visualize the idea.

Prototype

UI Design

Result & Validate

Result

Solution #1: Empty State & Blank Note

Pain point addressed: They are confused to create a shopping list

  • Add clear empty state when the user doesn’t have the shopping list yet
  • Add high emphasize button to give clear direction what should they do
  • Take out the sidebar menu as a part of the other solution
  • Move more & share icon to the detail page
  • Replace search bar with title and add note field to increase experience (seems like write a note on paper) and clear direction

Solution #2: Shopping List Item Card

Pain point addressed: Item suggestion

  • Remove the red background as the selected item
  • Give remove icon to undo the selected item
  • Move the description (add detail) into card item to give clear direction
  • Give add note in the bottom of list card to add a new item

Solution #3: Shopping List Page

Pain point addressed: The shopping lists are undiscovered

  • Take out the sidebar menu and move the shopping list to the shopping list page (home), it would be helpful to users to find and reopen their shopping lists
  • Visualize their shopping list into the card to make scanning easier
  • Add search icon to give help that users can find their shopping lists by search on it
  • Add the floating button, it will appear when there is a view of shopping list it has added by the user before and they can add new shopping list by a hit on it

Validate

Usability Testing
To validate if the solutions able to help and ease their goals, I do some testing to 5 people with persona; Users who want to buy their monthly needs/food recipe

I do usability testing by maze.design

Task 1: Add a new shopping list to make some dish

  • 52% user success to complete a mission
  • 20% indirect success because they had a trouble connection in the middle of the test and make their screen reloaded but, the mission keep record the track/path.

Task 2: Find their shopping list that already added before

  • 100% user easy to find their shopping list that already added before

Feedback

Mostly all participants said, “It’s easier to use”.

Conclusion

Technologically​​​​​​​, Bring! apps have offered a great solution for users to manage their shopping lists while they are ‘on–the–go”, so they don’t have to remember all the items that need to be purchased or write it down on paper, and they can use them back at any time quickly. This is very helpful for users who have a lot of activities and make them very busy, with many things that need to be taken care of or something.

Based on what we already investigated in the field directly, it turns out there are still a few things that need to re-thinking especially for the user experience itself to create and manage their shopping lists using the application. Overall, the model concept has been going well, and of course, this is still a small experiment and needs to be improvised or further validation.

Contributor : Biean Bara Pradana

--

--

--

A global brand and experience digital product design agency that builds digital products to move at the speed of culture.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Taking stock

The hook that matters

4 Steps Of Product Design

My Google UX Design Certificate review (so far)

My Google UX Design Certificate review (so far). Small dog on a chair next to yellow UX design book.

A,B and C’s of A/B Testing

Bad UX Can Ruin your Online Business: Check Out How

12 UX Research Decks

Design 4 Health Conference: Top three takeaways

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Glovory Design

Glovory Design

A global brand and experience digital product design agency that builds digital products to move at the speed of culture.

More from Medium

Mall-in-One, a CS3240 group project

Carphone Warehouse Redesign

GrabExpress UI/UX Redesign Exercise

Presisi Mobile App Redesign