Stylesnap

Instantly buy a garment you see in real life

Problem

We often see someone wearing a garment or accessory that we really like but we don't know where it is from or not sure how to ask them. With Stylesnap, I designed a mobile app that enables you to impulsively identify and buy an apparel or accessory that you see in real life.

Team: Individual Project
Tools Used: Directed Storytelling, Affinity Diagramming, Storyboards, Speed Dating, Prototyping, Sketch, Principle 
Project Duration: 1 week
Proposed Solution
Design Process
Research

I'm personally not an avid shopper, fashion follower or impulsive buyer. So to build empathy and get context about the problem, I conducted interviews with the directed storytelling approach with six individuals - 3 guys and 3 girls. I asked them about how they shop, about impulsive buying and if they've been in situations where they saw some clothes in real life and wanted to know more about them.
After the interviews, I synthesized all my notes into an affinity diagram to identify key insights and build ideas upon them. Some of the key findings were:
1. Most people are hesitant to start a conversation with strangers about where they bought clothes.
2. Sales and prices are the major driver of impulse shopping.
3. Buying in stores in a still a crucial part of everyone's shopping process.
4. Often people don't care about the exact item but a similar style.
Storyboards and Speed Dating

From the themes in my interviews, I drew some storyboards and speed dated four people to get their reactions on the ideas. Based on the feedback from the speed dating, I finalized the main design ideas which I wanted to incorporate as features into my design: 
1. Directly open up the app to camera mode to avoid missing the moment of snapping someone nearby.
2. Use of image analysis to detect clothes and accessories in the picture.
3. Show similar styles and clothes like Pinterest using image analysis and buying patterns.
4. Highlight sales and offers to drive impulse buying.
5. See nearby stores were the item is available to try it out or in case of urgent need.
6. Speed up the payment and checkout process with technologies like Apple Pay to encourage quick shopping.
7. To reduce the creepy factor of clicking strangers, use live face blurring before taking the picture. 
Low-fidelity wireframes

I then moved on to iterating on low-fi wireframes that would define the flow and key elements on all screens. This gave me an idea of the hierarchy of elements upon which I could build a visual style.
UI Design

Once the flow and interface elements were in place, I worked on the visual design of the app by defining the colors and typographic hierarchy. Then I worked with iOS design patterns to create final wireframes.
Visual Development of the Product Details Screen
Visual Development of the Search Results Screen
Motion design

I spent a lot of time trying to add motion and animation meaningfully in the app. I used Principle to craft the animations and transitions. Some examples are below and you can see whole demo video on the top of this page.
Horizontal navigation like Tinder and Snapchat
Semantic animation on expanding card
Back to Top