Yellow Market
A Grocery App Designed Follow Goal-Directed Design Process
Brief
This is my final project for the course 'Design Methods for Interactivity.' I took the team leader's role, distributed tasks, provided the team with process and skill coaching, arranged and led meetings. During this pandemic period, the project was done 100% online; we effectively used various online production and communication tools. Our group completed this project in 5 weeks, with an outstanding grade of A.
Task
Our task was to design a grocery app follow Goal-Directed Design, 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.
We mainly referred to the above two books to decide the methods we use.
Team Ramp-up
I put together all the assignment requirements and reviewed them with the team. After everyone understood what we need to do, we did brainstorming around grocery stores.
As we explored and communicated our ideas, we found navigation is the most important aspect of the grocery shopping experience.
Research
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.
Scope Definition
First, we discussed to have a brief idea of what we will do.
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
As this is a school project, we did not have actual stakeholders. Ourselves are stakeholders. We had a kickoff meeting inside the team, and I led a discussion of a series of initial key questions to ask the stakeholders:
What is the product?
Chinese Grocery store app
Who will/does use it?
General shoppers who prefer shopping online
What do your users need most?
To buy groceries online.
Which customers and users are the most important to the business?
People don’t want to or don't have time to shop in stores.
What challenges do the design team and the business face moving forward?
Big online shopping platforms
Who do you see as your biggest competitors?
Candian Tire; Kroger; Walmart; Fresh Hema
What internal and external literature should we look at to familiarize ourselves with the product and/or business and technical domain?
Older people visiting the supermarket encounter long queues to find goods and have difficulty waiting
Online shopping won’t get you hard-to-find items during coronavirus
Literature Reviews
In parallel with the kickoff meeting, we did literature reviews for the above articles.
Here is an example of our analysis of one literature:
This article discussed the good and bad experiences of a grocery store shopping experience.
Pros：
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.
Cons:
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
We compared and analyzed the competitors' in-store shopping experiences.
I also emphasized the importance of analyzing these grocery stores' app, as we are designing app rather than physical stores.
Stakeholder Interview - Fresh Hema
Although we do not have actual stakeholders, we still want to learn more about users from people working in the business. So I went to a branch of Fresh Hema, the business that potentially our biggest competitor, to interview store assistants working there.
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.
Survey
We designed and distributed our survey to collect quantitative data.
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.
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:
Modeling
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.
Survey data analysis, visualized for easier understanding.
Affinity Diagram
Along with qualitative data from interviews, we did affinity diagrams together. We wrote our raw data on post-it notes, put them on the wall, and then grouped them. This helped us understand users' mental models and made us think creatively.
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.
Creating The Persona
Persona is the most important outcome of the modeling phase. We followed the guide from 'Designing for the digital age' and developed our persona.
Below is our persona development process. By doing these, we can uncover the patterns beneath our data.
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.
Here comes our final persona!
We could start to design the app around our persona.
Requirements
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. In this phase, we defined business goals, experience attributes, and mood boards, emphasizing scenarios.
Context Scenarios
Context scenarios tell stories about ideal user experiences. It shows how the persona uses the product to achieve goals in his/her daily life and environment. We did context scenarios with storyboards.
Business Goals
Experience Attributes
We started with defining the visual design framework to develop experience attributes to define the product's tone, voice, and brand promise.
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.
We also used mood boards to communicate our experience attributes visually.
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.
Framework
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. While discussing online through Wechat, we drew together using Jamboard from Google and iterated continuously. The results are the user flow and hand sketches of the app that we all agree on.
User Flow
Wireframe Hand Sketches
Refinement
In the refinement phase, we refine behaviors, form, and content in short, detailed design.
We did the low-fidelity prototype with Figma.
When we were presenting, we aligned these pages with storyboards for the audience's easy understanding.
Usability Testing
We did usability testing to refine our product before proceeding to the high-fidelity prototype.
High-fidelity Prototypes
We made the high-fidelity prototype with Figma and Sketch.
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
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.
Support
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.
Conclusion
After completed this project, I gained a deeper understanding of interactive design. The design process we are using now is developed on top of the goal-directed design process. Before, I was confident that I have a comprehensive understanding of user experience design best practices. Still, after understanding and practicing the process from the books, I found some missing pieces of my past experiences. I did not know that there is a very detailed and practical way to create personas. Besides, I learned much more about every design method and their theory behind them.
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.
