Feather Friends

Encouraging and adorable friends for children's grocery shopping trip.

ezgif.com-crop.gif

Project Info  4-member Team Project @ Georgia Institute of Technology

My Roles   UX Designer, Visual Designer, Motion Designer, User Researcher 

Date   Aug, 2017-Dec, 2017

 

Timeline

timeline.png

 

Challenge

 

Family shopping in the grocery store is not always an enjoyment, especially when the children are too young. On the one hand, children feel bored easily and are not always involved in the family purchasing process. On the other hand, parents make efforts to behave their children and want to shop effectively. Making both parents and children enjoy their grocery shopping trip can be a real challenge.

How can we make the family grocery shopping trip with children more effective and enjoyable? 

 


 

Design Outcome

 
Home Page_2-.gif
list page-.gif

To solve the problem, we designed Feather Friends, an app that helps improve the shopping experience of children and parents in the grocery stores. It helps keep children entertained and behaving well during the shopping trip by giving them a pet that children can interact with. Children can feed and raise their pets by completing the shopping list with their parents. 

 


 

Identifying User Needs

User Research

 

LITERATURE REVIEW

user+context.png

 

I collected and read 34 academic articles about children-parent interaction, family decision-making process, children's influence strategies and grocery store environment from Google Scholar Library. Then I analyzed and wrote a brief report to share the useful information with my teammates. Many of the insights helped us get a better understanding of the user context and the problem space. 

 
 

NATURAL OBSERVATION

We carried out 16 observation sessions of family shopping trips in several local grocery stores in the first week. We focused on how children interact with the physical context and their parents while shopping. We took notes of children's behaviors, parents' strategies of behaving their children as well as children's participation in the family decision process. Then we analyzed the data together after which I created task analysis diagram below.

task analysis.png
 

ONLINE SURVEY

To collect demographic data and broad users' opinions, we also conducted a survey that was shared via social media. Using knowledge that I learned from Research Method Course, I designed screener, close-ended, open-ended and follow-up questions in the questionnaire (←click to view it) and created it via Qualtrics. Over 30 people answered it. 

 

SEMI-STRUCTURED INTERVIEW

After the preliminary user research above, we were eager to narrow down the problem space and study for specific pain points from users. We approached families at the grocery store or reached out to personal contacts and asked if they wanted to participate. Some of these were conducted over the phone for the family’s convenience instead of in-person at the grocery store. Children were also interviewed, a few via one-on-one conversations, but most of the others were interviewed together with their siblings as one unit. All children interviews were conducted in the presence of the parents or with the parents’ knowledge of the questions. We ended up interviewing 6 families, including 8 parents and 13 children.

We picked a semi-structured format so that we could have consistency across the questions but be free to explore the problem space since we had assumptions, but little personal experience. 

Then we had a group meeting to analyze all the data we collected from interviews by affinity mapping.

 
IMG_9319.JPG
IMG_9320.JPG
 

Detailed Affinity Map

Please click next and previous controls to view all detailed affinity maps.

Customer Journey Map

Based on all the data we collected from observation, survey, and interviews, I created a journey map of children and parents' grocery shopping experience. I tried to identify the children's helping out opportunities, parents' and children's feeling as well as thinking during the grocery shopping trip. The journey map helps us to have a sense of our users' greater motivation, what they want to achieve and what we can do to help them.

journey map.png

Persona

The main user goals and a list of features were generated by several group meetings after the user research stage. Then we created a fictional "family" to organize and to uncover patterns in user goals, behaviors, and pain points. We also created a short story to make the Thompson family more real and help us build a real emotional connection with them.

persona family.png

 

What we learned?

As expected, this is not a simple problem space. We found a wide range of child and parent behaviors and not many potential solutions that can be said address the root of the problem. However, our research did reveal 3 pain points that help us to find design directions

painpoints.png

Besides above problem spaces, we also realized that we have to keep in mind a wider age range of children. Though we focus on children aged 5-10, we have expected that children under and over those ages will use our solution as well. This is because a child’s mental maturity is more important than their physical age. Additionally, you can expect that even if the target child has siblings outside of the expected age range, the siblings will undoubtedly want to use the solution as well, even if they do not fully understand it or they get bored quickly because it’s too simple.


 

Ideation

 

How did we came up with ideas?

Based on the requirements and user needs gathered in user research stage, we began to work on finding solutions. We started with brainstorming, which resulted in about 50 ideas. Then we analyzed them into a brainstorming map to help us organize our ideas. I used different colors to separate different ideas of entertainment, education and efficiency areas. Then we went through all of those ideas and picked the aspects we thought could work based on current technology and appeal to both children and parents. 

 
brainstroming -01.png
 

Then we listed those aspects on a whiteboard and discussed what each one would entail and what we liked about it (feasibility, appeal to child, usefulness, innovation). From there, we grouped the ideas by platform - some were physical and worked well on a cart, others worked better as multiple games on a device installed in the grocery store, another was better as a device installed onto the parent’s cart, and yet another was built around a virtual pet you could raise. 

 
brainstroming 2-02.png
 
 

Pitch the Solution

After analyzing and comparing all our ideas above, we finally decided to develop the idea that combines virtual pet and grocery list together. This solution is the only one that synthesizes entertainment, education and efficiency aspects. Children can interact with the virtual pet during the shopping trip. They can check the grocery list by playing with the pet and raise the pet by feeding it food from the family’s grocery list. The device would be a pad with a touchable screen that installed onto the child's cart.

To illustrate the concept vividly, I drew a storyboard below.

Storyboard.png

 

Design Process

 

Wireframe

How to make the system easy and intuitive for children to use?

As our primary user group is children, we want our user flow as simple as possible. Also, the flow should be fun to attract children. For the interface design, we tried to make all the icons big and clear.Besides, we made effort to present as much as possible necessary information on one page to reduce clicking operation for children. On one hand, that helps children make fewer mistakes when playing with pets. On the other hand, that helps children to concentrate more on the grocery shopping and helping out activities.

wireframe-01.png

Character Design

Sketchs

The image of the virtual pet plays a very important role in our app. Since both children and parents will use our app, I wanted to create a series of cute characters to win children's favor and at the same time, they should not be too childish for parents. I was inspired by birds' revolution process because it suits our "level up" concept perfectly. Based on the bird‘s image, I made several sketches below to illustrate the characters, custom effects,  and revolution process.

IMG_9386.JPG
IMG_9387.JPG

 

Final Characters

Finally,  I created 6 characters below. Each pet has his or her own personalities and stories according to his or her species. The illustrations were made by Adobe Illustrator and the animations were created by After Effect & Media Encoder.

pet family_3.gif
D PARROT_2.gif

"Ouch! It's hurt!"

D DUCK_3.gif

" ...I never catch fish when I am diving."

D OWL.gif

"I am the greatest detective! Hahaha.... "

A CHICK.gif

"Don't talk to me... I am an apple."

S PEGUIN.gif

" Do.. Do you need some shampoo?" 

F PIGEON_3.gif

"Pigeon said, Let there be light!"

Revolution Process

The revolution process is designed to encourage children to level up their pets. During the research stage, we found out that many children love customizing and collecting things. So we designed that children can customize the pets with different customs at each level and when pet finally reach level 5, children can get a new pet with a different species.

REVOLUTION-01.png
 

Evaluation

To test the usability and general concepts of our design, we created a quick prototype for our system. Then we asked users to go through the main flows by completing several tasks. This would allow us to evaluate the system via observation of use cases, and help us confirm design choices or find glaring issues. The use cases would also give users the experience needed to answer further questions about the system.

Below are the tasks that we assigned to children and parents during the cognitive walkthrough process. The failure rate of each step is also marked on it.

EVALUATION TASKS.png
 

Design Iterations

Then we made several design iterations according to users' feedback. Below are three of our main findings and our solutions.

Oops 1: For children, the frequency of viewing the whole grocery list is very low

Though the "GROCERY LIST" is a major function of our design, it is mainly designed for parents to use, since it is usually the parents' duty to create grocery lists and creating by parents helps improve the efficiency of the shopping. We found out that our primary users - children, they didn't need this function during the shopping trip and even they went to the "GROCERY LIST" page they had nothing to operate. So we decided to redesign the navigation bar below to lower the using priority of the parents’ function.  

 
iteration 1.png
 

Oops 2: Children tend to click items on the home page by mistake

During the user testing process, we found out that children like touching the screens even when they didn't intend to do any operation. In this case, children can accidentally click on a wrong item to check it on the list. 

Adding an undo option would just mean adding unnecessary controls and more noise especially for children, so instead a much better choice was to use the grace period loader

 

BEFORE

short press_9.gif

Click

 

AFTER

long press-_1.gif

Long Press

 

In this case, the loader serves as an intuitive undo option. 

Oops 3: For parents, the process of creating a grocery list is not intuitive

After typing the item in the searching box, users should click "✔️" button to add the item to the list. However, though we tried to design the checkmark big and attractive, we found out that our users have difficulty understanding that they have to click it after typing in the searching box. So we redesigned the layout of that page to put the operating area nearer to the searching box, which helped make the using flow more intuitive.

iteration 3.png

Final Design

 

Main User Flow

USER FLOW.png

 

Animations

Check items to complete shopping list!

 
Home Page_2-.gif
 
 
Home Page Final_2.gif
 

Create and edit your shopping list in a easy way!

 
list page-.gif
 
 
LIst Page Final-.gif
 
 

Reflections

 

This is a problem that I've been wishing to solve for a long time. Since I suffered a lot when I was taken to grocery shopping with my parents when I was young. Our team gained a lot of fun during the process, though we went through some zig zag turns. Two lessons I learnt from it are:

Let users help you make design decisions. We had a hard time discussing fiercely about which design direction we should go. However, I realized that we are not end-users. Then we went to test design ideas and get the best answers by asking users. Keep learning from users can always help. 

Imagination can take you anywhere before it meets reality. We had a high expectation about this project before started, however it exposed to tons of limitations during the design process. I realized that I need new materials, faster iteration speed, and more powerful tools. I got to learn AE and tried out several new prototyping tools to fulfill a better effect. This requires eagerness and patience to experiment and change.