Yiming Wang

Sign in

Yellow Market — A Grocery App Designed Follow Goal Directed Design Process

A group project by Yiming, Zhaonan, Fengwei, and Lei.



We mainly referred to these two books to decide the methods we use.

Team Ramp-up

Online Brainstorming

As we explored and communicated our ideas, we found navigation is the most important aspect of the grocery shopping experience.


Scope Definition

Project goals and schedule

  • The app can help customers finding products more easily and quickly.
  • Our team has 5 weeks to finish this project.

Objectives, process, milestones

  • Improve customers’ experience with product purchasing.
  • Follow the Goal-Directed Design process.
  • Research Statement of Work; Personas; Domain Analysis document; Interface Sketches; Storyboards; Working Prototype.

Kickoff Meeting

Literature Reviews

There are some inconveniences in supermarkets, so young people are not keen on supermarket shopping among many shopping methods.

This article discussed the good and bad experiences of a grocery store shopping experience.


  • Things that are needed temporarily or very urgently can be bought quickly.
  • Basic daily necessities can be purchased at one time.
  • Vegetables, fruits, and other items are fresh, and the supermarket can guarantee the ingredients’ quality.


  • Supermarkets tend to have a lot of space, so people need to go around a lot to find the products they want.
  • You need to carry the purchased items home by yourself. When there are too many things, people are fatigued to transport.
  • The choice of products is not as big as online shopping, and sometimes discounts are not as large as online shopping.
  • There are many salesmen, which affect people’s buying experience.

Competitor Analysis

Competitor Analysis

I also emphasized the importance of analyzing these grocery stores’ app, as we are designing app rather than physical stores.

Competitor Analysis of Canadian Tire App

Stakeholder Interview — Fresh Hema

Fresh Hema

I interviewed a young female store assistant (in blue in the picture) whose responsibility is to pick up items that customers order online and pass them to the delivery guy to be shipped to the customers. She provided many valuable insights:

  • They have more orders from the online app than in-store.
  • Not sure who prefers physically present in the store, but some people who go shopping in the area will drop by.
  • Customers always ask for help to locate certain products.
  • 7–8 times per day.
  • This is the only question she would be asked.
  • Some items are listed online but not on the shelves in the store.
  • Loyal customers know it and will come to them directly to buy.

Her answer matches what I observed in their store. There are more store assistants than customers. Every assistant is busy picking up items for customer’s orders. The customers look very familiar with the store, they seldom stop walking to searching for items, and I did not see anyone looking for help from store assistants.


The survey is in Chinese as we are collecting data from Chinese users.

We designed interview questions together, and each interviewed one to two potential users. Some of the questions are from the books we referred to.

User Interview Questions

After we interviewed users, we had a meeting to share interview results and insights. We also did single-case analyses to organize user answers. Below are three of our interview results:

Looking at our data, we found that there was no enough data on user behavior of online grocery shopping, so we did a second round of user interviews. Below is one of the interview results:


Survey Data Analysis

Survey data analysis, visualized for easier understanding

Affinity Diagram

As we did two rounds of user interviews, we divided our data into two groups and made affinity diagrams separately.

Research Insights

  • The majority of shoppers have encountered the problem of finding a commodity they want.
  • Many shoppers have faced with the situation that they forget to purchase the commodity they plan to buy.
  • Consumers did not like to waste time(i.e., spending too much time finding goods and waiting a long line).
  • Shoppers want to know details and information between two similar products and decide to buy the most suitable one.
  • Shoppers care about commodity quality.

Mental Model

Mental Model

Creating The Persona

Below is our persona development process. By doing these, we can uncover the patterns beneath our data.

Define Role & Variables
Map Interviewees to Variables
Identify Patterns

Both Ms. Zhou and Miss Wang:

  • Are sensitive to promotion.
  • Are comfortable getting information online.
  • Are hard to choose between similar items.
  • Care about the price as well as quality (price-performance ratio)
  • Do not like sellers overselling products.
  • Find online shopping convenient.
  • Make decisions refer to online reviews and recommendations.
  • Always buy products beyond plan.

Here comes our final persona!


We could start to design the app around our persona.


Context Scenarios

Context Scenarios

Business Goals

Experience Attributes

We first listed the adjectives we would like to describe our product.

Then we grouped them into clusters and picked up the most important ones. The red post-it notes are the ones we picked up, and these are our experience attributes.

We organized our experience attributes into a word cloud diagram that illustrates the hierarchy of attributes and their supporting terms.

Experience Attributes Word Cloud

We also used mood boards to communicate our experience attributes visually.

Experience Attributes Mood Boards


User Flow

User Flow

Hand Sketches

Wireframe Hand Sketches


We did the low-fidelity prototype with Figma.

Low-fidelity Prototype

When we were presenting, we aligned these pages with storyboards for the audience’s easy understanding.

Communicate Prototype by Telling Persona’s Story

Meanwhile, we discussed and decided on our app name and style guide.

Our product name is Yellow Market for the following reasons:

  • This is our group’s grocery store, so we want to name the store after our group name.
  • It sounds like a grocery store near one’s home; it’s easy to understand, resembling our experience attributes, such as reliable and approachable.

The colors we decided to use are:

  • Orange: Friendly, with lighter peach tones: soothing and approachable.
  • Green: Nature, freshness, quality.
  • Brown: Trustworthy, reliable, approachable.
  • White: Clean, honest.
Colour Scheme

Usability Testing

Usability Testing

High-fidelity Prototypes

High-fidelity prototype

The interactive prototype was also done in Figma. You can check out the short demo video or play with it.

Yellow Market App Prototype Demonstration

Below is the interactive prototype. If you can not see the whole screen, go to the top right corner, enlarge the window and change the scaling option.

Yellow Market App Interactive Prototype

Usability Testing


  • The function to set to buy list.
  • The function allows users to compare similar products in the app or compare the same product in different supermarkets.
  • Item info/review from other websites/apps.
  • The function to notify users about store promotion activities.


As the project is done totally online, I found many useful tools for team discussion and cooperation. We mainly used Google drive to store files, and Jamboard, Google’s tool, is straightforward to use for post-it discussions and team sketches. We used Zoom and Wechat for communication. For digital sketches and prototypes, we used Figma to work simultaneously. These would be helpful for me to work remotely or cooperate with a diverse team.

Worked as a team leader and project manager, I also gained valuable interpersonal and management experiences. I clearly communicated with the team with the timelines, tasks, and required deliverables at the beginning of the project. I also collected team members’ opinions to arrange meetings and distribute tasks. As a person with the most UX design experience, I was always available for help and guides for everyone in need. By doing so, I reinforced my knowledge. The project is done on time, beautifully, with everyone’s hard work. I am looking forward to more projects to deepen my understanding of the field and expand my skill set.

Originally published at https://www.ymw.design on December 8, 2020.

UX Designer