Yellow Market

"Provide Solutions That Meet Users’ Needs And Goals While Also Addressing Business And Technical Goals."


5 Weeks

My Role

Team Leader

Interactive Designer


4 Interactive Designers

My Duties

Project Management, Skill Coaching, User Research (Interview, Contextual inquiry), Stakeholder Interview, Affinitization, Persona, Context Scenarios, Experience Attributes, Style Guide, User Flow, Sketches, Wireframe, Low-fi & Hi-fi Prototype, Usability Testing, Clickable Prototype



In 2020 fall, I led a team of 4 to do our final project for the course 'Design Methods for Interactivity.' During this pandemic period, the project was done 100% online; we effectively used various online production and communication tools


Our task was to design a grocery app following Goal-Directed Design process, developed by Alan Cooper.

Screen Shot 2020-12-10 at 7.06.47 PM.png
Screen Shot 2020-12-10 at 7.07.13 PM.png

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

Design Process

Goal-Directed Design Process was developed by Alan Cooper over a span of years between 1983 and 2000.

It helps provide solutions that meet users’ needs and goals while also addressing business and technical goals. The GDD process includes Research, Modeling, Requirements, Framework, Refinement, and Support.


GGD Process

Picture from book About Face 4th Edition


The research phase is to research users and the domain; it employs ethnographic field study techniques to provide qualitative data about potential and/or actual product users.

Setting Up

I led the team for series activities to start our project:

  • Put together all assignment requirements and review them together

  • Team Ramp-up and brainstorming

  • Scope Definition

  • Kickoff meeting - initial key questions

Literature Reviews

Competitor Analysis

We compared and analyzed our competitors: grocery stores.

ITGM 503 Final Project Canadian Tire.png

I did Canadian Tire case study


2x2 Competitor Analysis

competitor analysis-2

Competitor Comparison

Stakeholder Interview
Fresh Hema

I went to a branch of Fresh Hema, the business that potentially our biggest competitor, to interview store assistants working there.

Pictures I took in 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.


Zhaonan designed the survey and we distributed it to collect quantitative data.


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

User Interviews

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

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

interview questions.png

User Interview Questions


This phase is to model users and user context. During this phase, behavior and workflow patterns discovered by analyzing the field research and interviews are synthesized into domain and user models.

Survey Data Analysis

After the research phase, we have collected a lot of quantitative data from the survey, we analyzed and visualized them.

Screen Shot 2020-12-10 at 10.50.38 PM.png
Screen Shot 2020-12-10 at 10.51.26 PM.png
Screen Shot 2020-12-10 at 10.54.51 PM.png
Screen Shot 2020-12-10 at 11.06.40 PM.png

Interview Data Affinitization

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

Research Insights

We concluded some insights from the research phase.

  • 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

Based on what we learned so far, we developed our user's mental model.

Screen Shot 2020-12-11 at 12.11.47 AM.png

Zhaonan made this mental model picture


Persona is the most important outcome of the modeling phase. We followed the guide from 'Designing for the digital age' and developed our persona.

Persona development process

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.

  • Seldom go to the grocery store.

  • Often shopping online.

  • Find online shopping convenient.

  • Make decisions refer to online reviews and recommendations.

  • Always buy products beyond plan.


Our final persona


The requirements phase is about defining user, business, and technical needs. It employs design methods focusing the scenarios on meeting the goals and needs of specific user personas.

Screen Shot 2020-12-11 at 11.08.12 PM.png

Context Scenarios

Screen Shot 2020-12-12 at 12.00.11 AM.png

Business Goals

Screen Shot 2020-12-12 at 12.05.04 AM.png

Experience Attributes

Screen Shot 2020-12-12 at 12.05.19 AM.png

Word Cloud

Screen Shot 2020-12-11 at 11.10.36 PM.png

Mood Boards

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.

Screen Shot 2020-12-12 at 12.52.28 AM.png

Color Scheme


The framework phase defines the design structure and flow. In this phase, we need to create the overall product concept, defining the basic frameworks for the product’s behavior, visual design, and, if applicable, physical form. 

User Flow

User Flow.jpg

Wireframe Hand Sketches


In the refinement phase, we refine behaviors, form, and content. In short, detailed design.

Low-fidelity Prototype with Storyboards

Usability Testing
1st Round

We did usability testing to refine our product before proceeding to the high-fidelity prototype.

Screen Shot 2020-12-13 at 1.14.08 AM.png

High-fidelity Prototypes

We made the high-fidelity prototype with Figma and Sketch.

The picture on the right is a preview of all our screens.

Yellow Market Process Book10241024_49_edited.jpg

Usability Testing
2nd Round

We also tested this prototype with users. The problem came out when users add items directly from a list. When this interaction happens, a small number icon will show up on top of the shopping cart icon on the page's top right corner. Users found it not very clear. To solve this problem, we should add an animation that when they add an item to the shopping cart, the item will jump out and go to the shopping cart, which will hint the users where they are. We recorded this iteration and would pass it to the developing team.

Figma Interactive Prototype

Video Demonstration


The support phase is about design modifications and accommodating new constraints and timelines.

Because of the nature of the school project, we haven't done related works. But we have many ideas that can be considered adding on to the product and make it better.

  • 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.


Thank you!

Other Featured Projects

Google Pay

Google Pay App Features Designed for A Target User Group



A Navigation System for Visually Impaired People


A Responsive Website Designed for A Non-Profit Charity

Hey There!

Hey There!

Apple Watch App

that makes you smile!