New features to Gilt mobile app

PROJECT PLAN

Before we did anything else, to understand each other, my partner Laura and I talked about our working styles, design process, strengths, weaknesses and what we like to learn from this project. We had very similar understanding of design process. Luckily both of us were very open to each other’s thoughts and opinions, and I was excited to work with her and learn from each other as we collaborated.

I was chosen to be a project manager. I created a rough project plan with the duration of tasks, outcomes and who will be creating. It was to get an idea how we will finish the project with a high fidelity prototype to present in 2 weeks. The project plan helped us arrange all the tasks and time box each task. We made sure that we were on the right track each day. If we needed to adjust the plan, I the kept timeline updated as day went. Also, we kept any documents, files and photos we created saved in the shared Google Drive so all the information is updated in real time.

RESEARCH

• Research brand and competitors
• Survey
• User Interview
• Competitive / Comparative Analysis
• App map

First thing we needed to do was preparing survey because it would take time to get a number of responses and recruit our potential participants. Survey will help us save time to get information of large group of people and get quantitative information with no cost.

SCREENING / SURVEY QUESTIONS

We made a couple of screening questions to make sure we would have qualified potential participants. Starting with if they are over 18 and use a smart phone. Then we wanted to know about general idea of how people shop because we assumed they all can be Gilt’s potential customers. Also, questions related to our assigned features such as when they shop if they plan outfit, if they recommend items to each other, where they get fashion inspiration from and what and how often they use social media.

(You can take a survey link below)

We created survey using Google Form. I posted on Facebook and sent out messaged to some people. My partner send out emails.

COMPETITIVE / COMPARATIVE ANALYSIS

While we were waiting for survey result, we chose similar and different apps to compare and see if we can learn from them.

Competitors are the apps that have flash sales like Gilt. They are Rue La La, HauteLook (Nordstrom Rack), The Clymb.

We wrote details about features and to see yes and no quickly colored them differently. All of competitors have similar features, either they all have it or don’t so. Though one thing Gilt is doing differently is that there are list of recommending items by similar price within the same category. We thought it was good start trying to help users by recommending items.

We also wanted to learn from in-direct competitors. We chose them based on social feature on fashion e-commerce. They are Pinterest, Polyvore, Villoid, Netset (Powered by NET-A-PORTER).

As we trying these apps, we were very amazed how many different features they have and new features we have never seen before. In Polyvore and Villoid, I can collage and create outfits. When I post them, they recommend similar styles, similar items of the outfits I created. In Pinterest we can even buy clothing inside the app. We thought it would direct to different links to make purchase.

We found that they all have ability to save styles and items, find friends and follow people and styles. Some of them have ability to send messages to people inside their apps. They are great places for users to get fashion inspirations with social interactions. The apps have overwhelmed purpose and features, it seemed like may have taken away users attention from actual shopping. We wanted to see how comparable products have their social features. However, we wanted to keep current Gilt’s brand as it is and add a few core features that work effectively. We will figure out what users need the most by synthesizing survey data and follow-up interviews and prioritizing features.

MIND MAPPING

We wrote down things we can think of shopping and draw lines that connect. It would help us to be prepared for any direction of conversation when we interview. We wanted interviews to be natural conversation about shopping and make interviewees comfortable and not to lead questions.

SURVEY RESULT

About 2 days after we posted survey and sent out to people, we had total 46 people passed screening out of 52. We learned general ideas and patterns of how most people shop.

FOLLOW-UP INTERVIEWS

We were ready to interview people to learn how and why they shop the way they do. We interviewed 8 people who took our survey, starting with if they like shopping, where they do, how often, what device they use, then how they decide items to purchase, why and what helps to decide, if friends affect their purchase, also their social media activities related to shopping. It helped us to learn their behaviors, perspectives of shopping and their likes and dislike about shopping.

SYNTHESIS — INTERVIEW + SURVEY

We decided to make an affinity map with interview information.

We draw cross lines and wrote Likes and Dislikes on the right and left, and how Important and Not Important for us to know when we consider to add new features on the top and bottom.

Before we started creating an affinity map, I wasn’t sure if we had enough information to find needs and problems in common. Luckily we ended up making a huge map and we were able to see 2 different categories of people that we can make them into 2 personas.

Each color of post-it represents different person. We grouped them into similar categories of answers and counted the number of people.

Roughly we have one group (Group A) who shop alone, don’t want recommendation and are capable of planning outfit. The other group (Group B) who like to hear recommendations and care to see entire outfit before they purchase. Both group like to shop online on desktop and browse more often on mobile.

I also tried to use survey data to support our personas. I picked one questions and see their pattern. From one survey question which was if they intended to see others’ outfit, if they said yes (falls into Group A), I wrote down how many people answered different questions; if they plan outfit, if they recommend items to others, if recommendation helps them purchase, what brand they have purchased and where they get fashion inspirations from. I did the same thing to answer no(Group B).

This didn’t really help to support our personas much but good practice. It was almost the same information with synthesis from interview.

I wish we had more questions about demographic like their age bracket, ethnicity, income or career industry and where they spend most time of their day either urban or suburban.

PERSONAS

We gave names, ages and occupations to each persona based on our interviewees since we didn’t have survey questions.

She would say,

“I sometimes copy what my sister wears. She lives in California so it’s okay.”

“I sometimes ask my friends if he think it would look good on me and I look at what my friends are wearing too.”

He is an almost completely opposite type of l person from Katie.

He would say,

“what I wear reflects who I want to be”

“ I know color. I don’t have to plan outfit when I shop”

PRIORITIZE FEATURES

Now we have 2 personas and I started listing any possible features related to our assigned features. We narrowed them down by MoSCoW: must have, should have, could have and won’t have. We put ourselves away and focused on what will add value to the users’. We wanted to add minimum number of features that are the most effective for the app and still help drive sales.

*Social Connection

• Connect with friends
• Send message

These features will be helpful for users like Katie who wants recommendation from others.

*Create Style Profile

• Save and Edit preferred size, color and brand

This features will be helpful for users like Terrance who knows what he wants, so he is able to find available items based on his preference easy and quick.

*Recommended Items

• Recommended For You page on the main feed based on Style Profile information.

This feature will be helpful for both Katie and Terrance who use the mobile app to shop.

IDEATION: ROUGH SKETCH

We hand sketched interface of our new features based on existing app. It took longer than we expected. We had to constantly look and compare different apps on iOS if we are creating the right look. We kept Gilt’s clean and simple look but we decided to make a sticky navigation since the current app doesn’t have much navigation. We wanted users to be able to find and take advantage of the new features easy and quick.

Then I draw the interface on my galaxy note to see if the buttons are big enough and how it looks on the mobile screen. The problem was I wasn’t sure where to put find friends icon. I wasn’t sure how important for users to see list of friends when they shop on mobile.

So to learn what the most people expect to see on navigation when they shop on mobile and send message to others inside the app.

CARD SORT FOR NAVIGATION

We conducted card sorting to 5 people. We gave them lists of features and asked people to group features into 5 categories that they expect to see the whole time throughout the app.

The most common 5 was

• Home
• Favorites
• Messages
• My Account
• Cart

In existing app, the setting icon is only visible on main feed. We moved it into My Account on the sticky navigation.

We changed Closet icon from 1st sketch to Heart icon as favorites on mid fidelity wireframe because some people thought of closet as what they already own instead somewhere they save item as wish list.

We decided to put Friends under My Account.

ITERATION: MID-FIDELITY WIREFRAME

Based on the 1st sketch and card sorting, I made mid-fidelity wireframes on Sketch app.

Here is the main page. Big space with Save Style Profile text (left).

Once it’s saved, text changes to Just For You (right).

In the chat room (right), people can add photos from favorites by tapping plus icon. The latest photos of items in My Favorites will appear on modal (left).

Users can mark favorites from the browse grid page(left) and the individual item page (right). Also, they can send photos of item by tapping the message icon right to the heart (right)

MID-FIDELITY PROTOTYPE

We put wireframes into InVision and linked texts and boxes to screens.

To usability test, we gave people scenarios and tasks based on our persona; Terrance and Katie.

• Scenario and task for Terrance

(he is the guy who knows what he wants and wants to shop easy and quick)

He is been using Gilt app on the go a lot. He wants configure the app.

• Scenario and task for Katie

(she is the girl who wants to hear what other people say)

She found items she likes and wants to ask her friend if they would look good on her and match well together.

(You can test our Mi-Fi prototype from the image on the left)

USABILITY TESTING | FEEDBACK

We tested 6 people. They had some problems recognizing and taking advantage of the new features.

For example, Save Style Profile was located in what we thought was a prominent place on the home screen. However, we found that most of our users accessed the Style Profile through the Profile icon on the sticky navigation.

And once they entered My Style Profile, they had a hard time figuring out how to save options. Save button on the screen right top was hard to read.

Also, when they saved and directed back to the main page, none of them noticed “Just for you” recommended page.

Other example, when they entered the chatroom, we asked them to add different item to share they liked. But since they didn’t know My Favorites page existed they struggled and went outside of chatroom and try to see different item, instead pressing the plus icon on the keyboard on chatroom or accessing from My Favorite icon on the sticky navigation.

SYNTHESIS

We made an affinity map on Google Doc to find things that didn’t work on the most people. And we came up with solutions for them.

• Make create style profile clickable button on main page (change color and font)
• Differentiate “Just for you” page from other sales
• Change plus sign to camera icon
• On favorite page Have ” select “ on screen top right
• Then circles on photo shows up with bottom nav change to send , add to cart, delete, (like in iOS photo app)
• When you select, word select change to cancel
• Have order of input when drafting message (preview of message first and select TO WHO) THEN send.
• Change heart on item list page to black outline from white
• Have list of similar items on page of item detail

Once Laura iterated them in Mid-Fi wireframes on Sketch app, I started adding images, and more text to make High-fidelity wireframes.

ITERATION: HI-FIDELITY WIREFRAME

KEY SCREENS

Since we wanted users to be able to access the Style Profile more quickly without having to go through the general settings on the sticky navigation, we redesigned the Style Profile button and rephrased the call to action (left).

Once It’s saved, they will see Recommended For You text on the first list of the feed page. We thought the person looking at the text will draw peoples’ eye and maybe read (right).

We also changed the plus sign to camera (right) and when they click options, modal will pop up (left). Users can pick more photos from My Favorites.

From My Favorites page (left), by tapping Select, users will be able to choose multiple items and either send them in message, add to cart or delete them (right).

APPMAP

This is the existing app map. It was very simple and very focused on providing customers with easy access to products without much navigation.

Red lines are flows to the new screens.

By adding a sticky navigation, users will have easy access to new social features.

USER FLOW WITH HIGH FIDELITY

USABLITY TESTING PROTOTYPE

This is the high fidelity prototype we delivered as our final product.

Before we prepared presentation, we tested 3 people. They were more engaged with the app and appreciated the look since there are actual images. Few people still had dislikes and said about confusing part of it. One person wished that Create Style Profile text was bigger but we didn’t want to change too much from existing app and waste more space. We will need to do more testing and find better solutions.

(You can test our Hi-Fi prototype from the image on left)

SPECIFICATION DOCUMENTATION, AKA “SPEC DOC”

We ended our project with spec documentation. This is for developers, graphic designers, or clients. It has to be clear, understandable and usable for users.

• Title: Gilt
• Project Overview
• Table Content
• Project Goal : New Features
• App map : Low-Fidelity wireframe of Existing and final product wireframe
• Task flows for High-Fidelity wireframe
• Annotation : Key Screens of Mid-Fidelity and High-Fidelity Wireframes (Title of screen, context of item, behavior of item on the each screen)
• Style guide —Symbol, Shared Style and Text Style in Sketch
• Revision History

CLIENT PRESENTATION

We started with brainstorming presentation and titles of slides. Laura started making slides from beginning and I made from the middle which was from Interview.

When we were done, we talked about what we are going to say in each slides and practiced presenting.

NEXT STEP

We definitely want to do more testing and iteration to improve.

Then consider adding a feature that would allow users to post picture of themselves wearing items that they bought on Gilt. And improve style profile page as allowing users to enter more specific brand related, sizing information like body shape that might help figure out the fit.