In the previous process, I designed a paper prototype that would achieve the user’s goals to create a simple list with shareable information and browse the items quickly. The users are also able to meet their needs across devices with phones, smart watches and voice assistance. In the following step, I’m going review my paper prototype and create the user flow for the project Listed.
User Flow
The users of Listed are performing mainly these 3 tasks: create a list, access a list and edit a list. Create a list allows the user to start fresh and add whatever item they would like. The flow chart below shows an example of a user creating a new grocery list.
First, the user opens Listed and see existing lists from the past. Then the user clicks the “+” button to create a new list. Listed includes a few special lists like “Grocery List” and “Share List”. The “Grocery List” is a checklist that allows the user add items. The “Share List” is a checklist that is shared among multiple Listed users. The items on the “Share List” is automatically added to each user’s “Grocery List”. The user can remove these items if they are not planning to get them. When a list from the “Share List” is checked off, it is checked off for all the shared users, and it no longer appears on the Grocery List.
Once a new list is created, the user will need to access it and edit it during grocery shopping. If the user uses their phone to access the list, the user interface is very similar to create a list. The user can check off and uncheck items from the list.
However, if the user prefers to use their smart watch at the grocery store, the user interface is a little different. Smart watches have smaller screen size, so it is more difficult to interact with the user. The user is less likely to use the smart watch to create/delete a list. Listed offers simply functions like open the list, browse items and check off the item.
If the user wants to add an item on the list quickly, voice assistant is a good option. When the user first set up Listed, it can be assigned as the default list app. Now, whenever the user want to add an item, they can say “Add item to my ‘Grocery List’ ”. Listed will prompt the voice assistant to repeat the command “Item added to my ‘Grocery List’ ”. Sometimes, audio feedback is not the most preferred way of giving user feedback. For example, if the user is added multiple items to the list, Listed will use light instead of audio to let the user know that they have been added. And it will read the item lists to let the user know these are the items.
Mockups
I created mockups in Figma based on the user flow.
These are the steps to take to open app and edit lists.
These are the steps to share a list with people.
These are the steps to add and edit items in a list.
In the next article, I created high fidelity prototypes based on the mockups, and I will explain more in details of my design choices.
