Style Catcher

- See it. Catch it. Shop it!

Most of women have experienced this: we saw a girl on the street wearing a beautiful floral dress. “I want it!” That was the dream outfit, but we were nervous to ask her face-to-face. We secretly took a picture and googled it, but we still could not find a similar one. 

What if there is an app that can immediately identify the outfit you see anywhere and allow you to purchase it right away? It will change people’s shopping behaviors: they might get inspired by anyone or anything they have seen on the street, and the app will convert their wills to purchase.

UX Designer: Yanwen Hu

User Research:
  • User Interviews, User Scenarios
Content Strategy:
  • Competitive Analysis, Feature Summary
User Experience:
  • User Flow, Interaction Design
  • Low-fidelity Wireframe, High-fidelity Wireframe
  • User Testing


Wireframe Screens



Automatic Tags

When users take a picture, the app will automatically add tags to the products (category, color, shape, etc.)

Users can edit the tags if they are not accurate

One Click Purchase

Users can purchase the matched products by clicking "I Want It," or keep browsing more similar products

Similar Items in Various Price Ranges

Users can find the similar style products in a higher or lower price


Personal Tailors

If users cannot find their ideal products, the app can connect them with the local tailors to create their unique pieces


Deal Notification

The app will notify users if there is a deal that will expire soon

Products Matching Your Purchase

Think about how to wear the product you just bought? the app will recommend other products that go well with the one you purchased



Individual Project: App Concept Design

This is a Hakathon project that is done in 8 hours. The design process includes user research, competitive analysis, user flows, interactions and wireframes.

User Stories

  • Interviewed 4 friends: 3 women and 1 man, age from 20s, 30s, to 50s
  • Collected all stories they mentioned in their lives
For example, people mentioned they are willing to purchase stuffs for others. A girl said when she saw a women in her mom's age wearing an elegant outfit, she wanted to buy the same thing for her mom as a gift.
  • Summarized the user stories into main user scenarios

Competitive Analysis

  • Compared different potential competitors: Amazon Firefly, Neiman Marcus App (Snap Find Shop), Ask Zappos
  • Sketched interactions of other products as inspirations: Facebook App, Facebook Paper, Instagram, Amazon Checkout, Neiman Marcus, Moda Operandi

User Flow

Created a user flow and developed it by four sections: 
  • Identify the item: from camera or albums
  • View product info: the same item or similar items
  • Checkout ( send a notification if users left in between the process)
  • After purchase: other items matching with the one users just bought

Interaction Sketch

  • Sketched key screens in the user flows

Low-fidelity Wireframes

  • Created 20 wireframe screens of major steps
  • Strengthened the key features and interactions

High-fidelity Wireframes

  • Designed two screens of high-fidelity wireframes
  • Created a video illustrating the interaction between these two screens

User Feedbacks

  • Tested the wireframes with friends for feedbacks
  • Organized the suggestions for the next round of product improvement
After Purchase: Model Image
  • instead of listing multiple recommended items separately, display a model picture first then list all the items he/she was wearing
Another Icon to Replace "X"
  • "x" icon should be replaced by a "bulb" or another related icon, because some users might be confused
Wish List
  • The items in the shopping bag can be moved to a "wish list," and they can be added back to the cart from the list 

- More Related Projects -

Lipstick Slideshow Responsive Design

Lipstick Slideshow Responsive Design

Lipstick Newsletter Design

Lipstick Newsletter Design

Glamour Event Hub Page

Glamour Event Hub Page