The Challenge

Design a responsive e-commerce website that embodies the Fancy Tiger Clothing brand. Keep it sleek, minimal, and authentic. Convey the same level of customer experience online as in-store.

Fancy Tiger Clothing is a hip boutique selling a carefully selected range of clothing for men & women from small designers. The problem, however, is Fancy Tiger does not have an e-commerce website.

 

My Role: UX/UI designer

Timeframe: 2 week sprint

Project Type: Responsive e-commerce

Tools: Sketch, InVision, Zeplin

 

existing Website

•No e-commerce capabilities
•No product pages
•No brand consistency, aside from hipster-vibe and ‘out there’

 

research

Process

Due to the nature of the project and tight deadlines, select research methods and techniques were chosen. I conducted a competitive analysis of other online boutiques, talked with employees about the store vision and brand, and gained customer insights.

I performed card sorting of in-store products to identify product categories, which informed the e-commerce sites information architecture, conducted user interviews to understand boutique shoppers, and developed personas by affinity mapping information gathered from user interviews.

 

personas

From research and insights, I was able to identify two unique boutique shopper personas. The Hunter who knows exactly what they are looking for and buys it in store or online, and the Gatherer, who isn’t really looking for something in particular, but loves to uncover unique finds.

 
 

Hunter - Bryce Sroka

Bryce is a simple guy when it comes to his clothes, keeping a small, but high quality wardrobe. With this minimal lifestyle, he tends to wear clothes until worn out. Bryce needs an easy, convenient, and trusting way to find replacement clothing items when they wear out.

 

Goals/Needs

•High quality
•Durable
•Fair price
•Replacement

Habits/Behaviors

•Creature of habit
•Binge shopper
•Lazy shopper

Frustrations

•Boutiques are pricey

 
 

Gatherer - Maddie Saylors

Maddie loves her clothes, as she should with a career in fashion. On the weekends, she loves to brunch and window shop with friends, but is often not in the mindset to purchase and doesn’t want to carry a bunch of bags. Maddie needs an easy way to purchase clothes online through browsing or that she’s seen in stores, without worry of misfits.

 

Goals/Needs

•Unique finds
•Browsing
•Convenience shopping
•Accurate sizing

Habits/Behaviors

•Try on clothes
•Purchase online later
•Demands high quality

Frustrations

•Hard to fit in errands
•Boutiques are pricey

 

Insights

Boutique shoppers are all about high quality products, unique finds, and customer service. They are also price conscious, but will pay for quality.

 

 

Design

Ideation

Using the research as a guide I began the design process by thinking at a macro level and laying out a site map and user flow for each persona. I then started hand-sketching in order to put some quick ideas down and perform initial user-testing to see what works and what doesn’t. After initial user-testing, I took the feedback and jumped into high-fidelity wireframes.

 

Site Map - Fancy Tiger Clothing (clickable)

Developing a site map design allowed for the identification of site flows and the pages necessary to fulfill the site functions and goals of the client.

Vote for Future Clothes

A unique feature to the site is the ability to vote for future clothes, enabling the business to get a sense of what their customers want ahead of time, reducing risk of inventory build-up and increasing sell-though.

 

User Flow - Hunter (clickable)

Bryce knows the exact pair of jeans he needs to buy and hunts for it. He utilizes the product filter to narrow down the products displayed to just men’s jeans, and also other categories of interest.

 

User Flow - Gatherer (clickable)

Maddie is winding down at the end of her day by browsing her favorite online boutique. She comes across an awesome pair of grungy jeans and proceeds to purchases them.

 

High-Fidelity Wireframes

 

Iteration

After user-testing paper prototypes and redlining wireframes with users, a design direction was developed and high-fidelity mockups were created.

 

High-Fidelity Mockups

 

 

opportunities

  • Research and develop a system for boutique shops to enable seamless online purchases with in-store merchandise. ( Imagine the LED lights above parking spots that are GREEN or RED, but attached to the items hanger )

  • How can a boutique shop integrate drop shipping, alleviating the need for inventory?