SNAP

STYLE

A New Way To Search

Project Summary

Description: This was a student project while at General Assembly. Our team of three was given two weeks to identify a user pain point and design a solution for an existing brand.

Problem: Shoppers can't always identify the right keywords to search for what they are looking for.

Solution: A visual search feature integration to enable shoppers to search for, discover, and buy anything they can photograph.

My role: Lead Researcher, Strategist, Designer, Usability Tester

Brand: ShopStyle

Industry: E-commerce

Platform: Native iOS App

SnapStyle Demo

User Research

The research phase is one of my favorite parts, because you get to play detective and discover user needs, behaviors, and motivations; but one thing about it is for sure, it is not a linear process. It’s sort of all going on at once.

Our timeline was a very short two weeks, so we immediately sent out a survey to not only gain quantitative data but to recruit interview participants.

Our survey data got us off to a great start. We had 98 total respondents with 59.2% stating "Finding what I'm looking for" as a central frustration in online shopping. Another data point was how low ShopStyle ranked among its competitors which revealed a business opportunity.



affinity
Survey Data


Out of the 98 survey respondents, we were able to interview 7 participants.We needed to make sure we made the most out of the time given to us, so we planned a discussion guide shown below with the open ended questions we were hoping to get answers to. After each interview, we debriefed as a team, and once we were done with all of our interviews, we synthesized our interview data using an affinity map.



affinity
Discussion Guide


affinity
Synthesizing our interview data


"Finding What I'm Looking For" ranked in the top 2 online shopping frustrations among 60% of users surveyed and 100% of users interviewed.

Interview Quotes:

"I hate searching, because it's only accurate if I type the keywords 100% correctly."
"I don't always know the words to describe the item I want to find. Sometimes when I try to look up something like winter work attire, the results are completely different from what I was expecting."
"I'm not always sure which categories to use... is the jacket I'm looking for considered a 'Jacket' or 'Outerwear?'"

Our user pain point was validated. Simultaneous to our user research, I was taking a deeper look into image recognition technology. According to Market and Markets, the image recognition market worth is estimaged to grow from $9.65 billion in 2014 to $25.65 billion by 2019.

affinity

Based on our interview data, we created personas (fictitious characters created to represent the users goals and behaviors). Personas are helpful in putting a name and face to our users. It helps us remember to advocate on their behalf and to design for them.

affinity
affinity


Platform Implementation:
iOS Native App

Our research led us to a mobile solution, specifically for ShopStyle's iOS native app.

Here are a few points that led us to focus on mobile:

Mobile commerce is exited to grow at a double-digit compound annual rate between 2015 and 2020 to as much as $252 billion.

Based on our survey results, millennials are the central user demographic range for online shopping.

60% of millennials say that it is convenient to use a smartphone to research or purchase a product on the go.

More than 50% use their smartphones to research products while shopping.

According to IBM, online shopping on Thanksgving day was up 14.3% versus the year before. Over half (52.1%) of traffic to shopping sites came from mobile devices, up 22.4% from last year. And 32.3% of sales were completed on mobile devices, up 25.4% from last year.

Why we focused on iOS:

According to IBM, iOS users spend more than Android users.

iOS made up 25.2% (over a quarter) of all online sales on Thanksgiving day 2014. Android only accounted for 6.9%.

Our project was a month before Thanksgiving 2015, but it turned out that iOS was the way to go after all.

Nearly 40% of all online traffic the day after Thanksgiving 2015 came from iOS. Only 17.3% came from Android.

affinity

Competitive Analysis

While we did our user research, we also conducted competitive analysis. We started off broad considering any app that could be a competitor to ShopStyle’s business model and then narrowed it down to the few that had an image recognition feature which were Craves, Amazon Flow, and Neiman Marcus.


affinity

From our feature analysis, we took a deeper look at Craves, Amazon Flow, and Neiman Marcus. We downloaded and analyzed each of these apps, analyzing the usability, the user flow, the UI, testing the accuracy and breadth of the technology. We took note of what we liked and didn't like and factored that into our design strategy.

affinity
affinity

The more research we did, the more we realized how much of a business opportunity this was for ShopStyle. Apparently, besides the three competitors we had analyzed, Macy's and Urban outfitters had also recently signed contracts with providers of image recognition technology. It seemed we were on to something...

Tech Research

We found Slyce and Cortexica to be the leading providers of image recognition technology. The images below shows the retailers that have recently signed contracts with them and how the tech works.

affinity
affinity

Strategy & Design

We did our research, validated our concept, analyzed competitors, and researched some more; but it was time to prioritize our features, plan our user flow, and sketch.

affinity
affinity

Design Studio Sketching

We diverged into design studio sketching where we each sketched out our ideas individually for 5-10 minutes at a time to then converge and discuss our design point. It was a great way to design quickly as a team: sketch, discuss, iterate, approve, etc.



affinity
Early Sketches


User Testing & Design Iterations

We immediately tested our first version and iterated on the test findings. Below are our iterations 1 and 2 side by side with annotations of our changes.

Photo Cropping Iterations:

Search Results Iterations:

affinity

Final Prototype