GiftSpring Case Study
ROLE: UX/UI Designer (Research, Interaction Design, Visual Design)
TIMELINE: 90 hours
Help people research and purchase gifts for children more easily.
An easy-to-use app that helps people research and purchase gifts for children by providing curated toy lists, search results based on their preferences, price comparison shopping, and the ability to organize gift ideas and purchases.
Research and Discovery
Methods: Competitive Analysis, Observation, Contextual Inquiry
People put a lot of effort into researching the perfect gifts to buy the children in their life, but it can be a time consuming process. If it means spending hours or days shopping online or going to toy stores, despite their busy lives, they’ll do it. But they wish there was an easier way that would save them time, money, and effort. In the U.S. toy sales grew by 5 percent in 2016, reaching $20.4 billion. That means there are many toys to choose from, but no one method to curate these toys that is personalized to a user and their needs.
As I dove into a competitive analysis, I couldn’t help but observe that the gift guide sections for some major retailers were basic and pared down compared to the rest of their sites. However, sorting by age, budget, gender, and category/interest were the most common filters offered. The way certain retailers dealt with gender was particularly interesting. Some avoided this categorization all together, while others offered a gender category of “neutral.” Some list views were filled with too much product information or too little. There were surprisingly few apps that helped people research or organize gifts. After visiting a toy store and seeing a mother trying to shop for a toy while her child was loud and distracting, I could see why many parents would choose to buy gifts online at home.
To learn more about what's important to gift givers, I created an interview script and interviewed 4 people over 2 days (3 in person, 1 via video chat). Participants were females ranging in age from a preteen child and her mother (aged 50's), to early 20’s, to 60 years old.
"I want the gift to be perfect. I will research however long it takes to get the perfect gift."
"I enjoy it (research), and live vicariously through them. I think, 'I didn't have this cool gift when I was little!'"
"I have a very tight schedule, so sometimes online shopping is the only thing I can do. I wish I could go in person and look at the quality of things before I order them. That's why I always order things repetitively that I know I have good quality."
Regardless of age, people want to buy a gift the child will love that is unique, on trend, and aligns with the child's interest. Gift givers like to be reminded of occasions up to two weeks in advance so they can begin their research process. They want the gift to be manufactured with good quality and be within their budget. People are busy and have little time to research a gift but are willing to, if it means finding the perfect gift. Sometimes they search online, read articles, visit retailers in the store, or ask people for advice on what's trendy. Gift givers like to shop online for convenience. However, if they go to a toy shop that offers a specially curated selection of toys, they are willing to pay more if they think the gift is unique. Sometimes they have up to 20 children to buy for a year, and can't remember what they researched or bought for one child or the other.
Defining the Problem
Methods: Affinity Map, Persona, Storyboard, Crazy 8's (Brainstorming)
INSIGHT INTO USER NEEDS
Following the interviews, I created an affinity map to synthesize the information that I gathered. I looked for patterns, themes, similarities, and contrasts. Doing so helped me uncover insights and begin to define user needs in greater detail.
Drawing from the insights and needs identified in my affinity map, I created a primary user persona named Sophia. Sophia needs a faster and more efficient way to research gifts for the children in her life. Her daughter gets invited to a lot of birthday parties, so she needs to buy a lot of gifts throughout the year. She is a busy, working mother with only a couple of hours (at most) to research and buy gifts. Right now she has to use various sources to find gift ideas such as looking online, asking people (her daughter, her daughter’s friends, other parents) for advice, and looking in stores. Sophia needs to shorten her gift research and buying time so she can get more done.
How might we help Sophia find and purchase the perfect gift that fits her specifications quickly and easily?
To further empathize with and understand Sophia's needs, and how she may interact with a mobile shopping app that meets them, I created a storyboard. You can view the storyboard here. I used the Crazy 8's brainstorming technique to generate ideas within a short timeframe. You can view the Crazy 8's here.
Methods: Product Roadmap, Site Mapping
Utilizing my user research and brainstorming ideas, I created a product roadmap with features presented in order of priority, along with proposed metrics to assess their impact and effectiveness.
Informed by the features and priorities outlined in my product roadmap, I created an app map showing the information architecture proposed for GiftSpring.
Methods: User Flow, Sketching, Wireframes, Paper Prototype (including User Test), and Prototype in InVision
I created a user flow and worked through ways a user might interact with GiftSpring.
PAPER PROTOTYPE AND USER TEST
I created an initial paper prototype based on my user flow, and conducted a user test to see what was working and what needed to be revised.
"I like the idea of lists because maybe you need to buy multiple gifts like Christmas gifts or Easter gifts."
The paper prototype test user found the icons and tasks fairly easy to understand and follow. However, there were a few areas that she wished were simpler. For the "Home" screen, she wanted to see just the recommended or popular toys without having to read about them in article format. For the "List" view , she wanted to see only the list for one child, not both children at the same time.
Referencing the task flows and insights from user testing the paper prototype, I sketched screen designs for each key screen.
Using my low-fidelity wireframes as a reference, I placed them into Sketch and created mid-fidelity wireframes.
Methods: Screener, Testing Script, Affinity Map, InVision Prototype
I brought my mid-fidelity wireframes into InVision so I could share the mid-fidelity prototype with users. You can view a video of this prototype below.
Before I began user testing, I created a screener to ensure that the selected users were a good fit for my research goals. You can read the screener here. I created a script with 5 tasks for users. You can read the user test script here. The test focused on these 5 tasks:
1. Open the GiftSpring app and log in.
2. Choose a product for child 1, and save a gift you found.
3. Research gift ideas for child 2, and save a gift you found.
4. Sort gift ideas for child 1 and child 2 into lists.
5. Purchase gift for child 1 through an online retailer.
I tested the mid-fidelity prototype with three users (2 in person, 1 via video chat).
Users were confused by some of the icons and bottom navigation. Users wanted to "Save to Cart" and not "Favorite" or "Like" items. People treated the "List" like a cart. Users weren’t sure what the "Home" button was for, and wanted to use "Search" as a "Home" instead. Users looked for a top navigation that would help them go back more easily.
However, users navigated the onboarding, product page, list creation, and gift purchasing sections easily. They liked the app’s appearance and found it easy to use for the most part.
I took the results from my user tests and created an affinity map that included pains, gains, and observations. From there, I further defined areas for iteration.
UI Design and Iteration
Methods: Moodboard, Style Tile, Wireframes, InVision Prototype
In order to develop the branding and visual design for GiftSpring, I created a logo and a mood board with key words, fonts, and images that could serve as a preliminary look and feel for the app.
Since buying gifts is festive and celebratory, I wanted to bring the excitement and fun of buying a gift to the branding of the app in the form of a joyful color palette and bright illustrations. Warm purples anchor the design and a sans serif font adds to the simplicity and cleanliness of the layout. I referenced the Google Material Design Guidelines for inspiration and best practices.
I used the illustrations, icons, fonts, and colors outlined in my Style Tile to create high-fidelity wireframes while also making the changes deduced from my affinity map. I simplified the bottom navigation and changed some icons, bringing more clarity to the interface. I brought the revised high-fidelity wireframes into InVision for further user testing. You can the high-fidelity InVision prototype below.
Photographs by Unsplash