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?