Sign in

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…

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…

In the previous process, I created scenarios and storyboards to imagine the user’s journey of making a grocery list. Now I’m going to focus on the user’s interaction with Listed. I created paper prototype using marker, paper, tape, and sticky notes for mobile application and smart watch. From the scenarios, I learned that the user’s goal is to create a simple list with shareable information and browse the items quickly. My paper prototype focuses on these three goals and delivers new user experience.

Simple List

Video Link:

Which process is the best: Lean, Agile or Design Thinking?

  • Smaller companies have limited number of sources, so it is important to deliver features quickly and receive feedbacks.
  • Larger companies have more resources, but they also have different methodologies. Just because one design process worked for them in the past, it does not mean it will be appropriate for the future.
  • But how do we combine these design processes?

What does Agile mean?

Image source: Google
  • Agile means focusing on learning and discovering from trial and error over following a set of plans.

What does Lean mean?

Linkedin Course: UX Design: Paper Prototype

Image source: Linkedin learning

Paper Prototype

A design technique includes paper, drawing, and stickies to create a rough version of the solution.

  • design only for the elements in the scenarios
  • build interface for each user interaction with the system
  • create suitable text for the labels, context and terminology
  • let someone who is not familiar with the design try the prototype

In the previous part, I worked on creating personas and user observation. In this post, I combine the findings from user research and ideation to create scenarios and storyboards that show how the users would interact with the list. I use the two personas — Hannah and Gabe — in the following design process.

Scenario — Hannah

User Profile

Name: SW

Age: 24 years old

Personal Information: Single, female, working, have 2 roommates

List Purpose: Grocery shopping for dinner with a friend

Before Shopping

SW has a specific recipe in mind, so she uses her phone to view the recipe on a website. She takes screenshots of the recipe including ingredient lists, steps and recommendations. As she reads the recipe, she thinks of another dish that would go well with the food, so she looks up another recipe online and repeat the same process.

“I think corn bread would go well with this recipe. My friend Katy has a really good…

In the previous part, I translated the user pain points into achievable goals. I also created personas to recreate the user types. The personas helped me to see users of different age group, life stages and family dynamic have different interactions with the lists. In this part of the project, I’m going to go through the process of Ideation and brainstorm ideas.

List Types

  • One time vs Long term lists
  • Private vs Public lists
  • Single vs Grouped lists

Focusing Goals

  • The list can be shared with others
  • The list is easy to access
  • The list can be combined


Brainstorm is an ideation technique that…

Linkedin Learning: UX Design: Ideation


  • widen potential ideas
  • refine these ideas for my new design
  • focus on user’s pain points
  • incorporate useful elements

Local maximum trap: only following one design idea to find the best possible product

Ideation prevents the designer from falling into the local maximum trap by broadening the design ideas. The designers can compare different ideas to find a better solution.


It is an ideation technique that allows a group of designers call out ideas, building after each other’s thoughts, but it can easily fall into group think.

Group think: when the conversation is dominated by…

In the previous part of the project, I defined the problem statement that “people have trouble make temporary, short list for grocery, gifts and party planning and sharing with others”. I also sent out a survey to gather data about target audience’s habits. To target some of the pain points from this survey, I created a set of goals. The goals focus on efficiency, effectiveness and satisfaction.

Goal to Overcome Pain Points

One time vs Long term lists

“insufficient update of the list” -> the list is updated with every user entry, the list allows multiple editors

“the list is not strict” -> the list…

Anni Yan

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