Project Listed — High Fidelity Prototypes

Anni Yan
3 min readJan 22, 2021

In the previous process, I created a user flow to better understand different scenarios the user would interact with Listed. I also discovered that the most important interactions are create a list, add an item, and check off an item. On top of that, the users will be able to quickly access the list and share the list with others. In this part of the project, I improved the mockups and created high fidelity prototypes to show how Listed can help user in achieving these goals.

To try this prototype, click here.

Use Case #1: Quick Access

Hannah is a homemaker and a mother of 2 young children. She recently downloaded the app Listed. Today, Hannah is going grocery shopping for dinner.

View Past Lists: Hannah opens the app and sees lists from the past. The Grocery List and the Shared List are two default lists. But this time, she decides to create a new list.

Add Items: Hannah adds items to the list and it automatically creates a checklist for her. She also likes to group the items by section, so she puts the meats and diary together and the produce together.

View On Lock Screen: Hannah takes the kids with her to the grocery store. She usually has a good memory of what to get, but when she needs a little reminder, she looks at the list on the lock screen. She can also easily check off an items.

Use case #2: Using Shared List

Hannah shares a shopping list with her husband, Timothy and her mother in-law Sasha. When Hannah goes grocery shopping for the family, she will also pick up stuff from the shared list.

Shared list, Grocery list, Remove item from Shared list

View Shared List: Hannah opens the Shared List and sees that they need more light bulb, hand soap, and toilet paper. When an item is added to this list, it is also added to the Grocery List automatically. On the bottom right of the screen, she can also see who has access to this list.

Create Grocery List: Hannah opens the Grocery List and sees the item from Shared List.

Remove Shared items: Hannah decides not to get these items, so she removes them from the Grocery List. But if she ever change her mind, she can undo the removal.

Use Case #3: Edit Members

Members, Members info and Remove a member

View Members: Hannah can view the members of the Shared List by click on their name bubble. In this list, Hannah is sharing with Timothy and Sasha.

View Member Profile: Hannah clicks Timothy’s name and she views the phone number and the bubble color he chose.

Remove a Member: If Hannah ever wants to remove a member, she can simple click the remove button and the person will lose access to the list.

--

--