Mirror
Clothing web store
Background
Mirror is a clothing store for adults and kids. Currently, they only offer in-store shopping experience but want to expand to online space as well. Mirror wants to design their website afresh, create a new logo and add product filtering functionality in order to make their website user-friendly & make more sales.
Goals
● Design a user friendly website with a modern look that is easy to use & allows customers to search products using filter options.
● Design a new logo for the company that is modern and neutral.
● Design a new logo for the company that is modern and neutral.
Role
● User research
● Information architecture
● Interaction design
● UI design
● Usability testing
● Information architecture
● Interaction design
● UI design
● Usability testing
Tools
● Sketch
● Marvel
● Zeplin
● InVision
● Pen & paper
● Marvel
● Zeplin
● InVision
● Pen & paper
Timeline
● 10 Weeks
Research
Competitive Analysis
Strengths
● Most of the competitors have great marketing/advertising
● Range of products (clothes, shoes and beauty) offered
● Most of the competitors offer affordable clothing
● Great use of filters by size, color and price
● Old Navy had deals & promotions listed right on the homepage
● Range of products (clothes, shoes and beauty) offered
● Most of the competitors offer affordable clothing
● Great use of filters by size, color and price
● Old Navy had deals & promotions listed right on the homepage
Weakness
● Most of the competitors did not offer deals & promotions as often
● Old Navy lacked in visual hierarchy
● No wishlist or save for later options
● Forever 21 was cluttered (poor UI design)
● No option to pick-up in store
● Old Navy lacked in visual hierarchy
● No wishlist or save for later options
● Forever 21 was cluttered (poor UI design)
● No option to pick-up in store
Research
1-1 interviews
The 7 participants I interviewed were of varying age group, gender & located in different geographic locations. (I decided to include location intentionally, as it will give an idea how people think about online shopping globally.)
Based on the feedback received from all the participants, I noticed a repeated pattern of wants/needs & dislikes even though all participants were separated geographically.
Based on the feedback received from all the participants, I noticed a repeated pattern of wants/needs & dislikes even though all participants were separated geographically.
Wants/Needs
● All participants prefer the convenience of shopping from home and not having to go to the store.
● All participants enjoy the freedom of shopping using their portable devices like iPad, Mobile phone, Laptop, etc.
● Most participants look for quality products at reasonable prices.
● Most participants look for deals/offers or rewards when shopping online.
● Most participants prefer free shipping (General consensus was if shipping isn’t free, once a certain order total is achieved the shipping should be included).
● Mostly all participants want pickup in-store feature.
● All participants enjoy the freedom of shopping using their portable devices like iPad, Mobile phone, Laptop, etc.
● Most participants look for quality products at reasonable prices.
● Most participants look for deals/offers or rewards when shopping online.
● Most participants prefer free shipping (General consensus was if shipping isn’t free, once a certain order total is achieved the shipping should be included).
● Mostly all participants want pickup in-store feature.
Dislikes
● All participants view exchanges & returns as a hassle.
● All participants dislike having to pay for shipping.
● Almost all participants dislike the fact that when purchased items did not fit well, it was either due to lack of product stats or ambiguous stats.
● Most participants miss having the ability to save items for later purchase.
● All participants dislike having to pay for shipping.
● Almost all participants dislike the fact that when purchased items did not fit well, it was either due to lack of product stats or ambiguous stats.
● Most participants miss having the ability to save items for later purchase.
Future features
● Include product demo videos or 360 videos.
● Incorporate interactive size-chart-measurement features that respond to shopper’s body type & fit. (Display simulated images of product as worn by shopper).
● Add intelligent filters & recommendations regarding clothing options based on shopper’s input related to a theme, event, or party.
● Incorporate interactive size-chart-measurement features that respond to shopper’s body type & fit. (Display simulated images of product as worn by shopper).
● Add intelligent filters & recommendations regarding clothing options based on shopper’s input related to a theme, event, or party.
Research
Persona
I created Jenny based on the feedback I received from candidates who participated in 1-1 interviews. These individuals reflect an age group of 20-30's, have a stable career and like to hang out with their friends over the weekend. They all seem to have a busy schedule and prefer to shop online and look for good quality clothes without having to pay a lot of money.
Research
Empathy map
Creating an empathy map helped me understand how Jenny spends her day and what she is doing, feeling, seeing and hearing.
Research
User flow & Task flow
The User flow demonstrates how Jenny browses for a dress, checks if it's available in her choice of size & color and adds it to cart if she chooses to purchase it.
The Task flow, on the other hand, demonstrates a singular action performed by Jenny, namely purchasing a dress and completion through checkout.
The Task flow, on the other hand, demonstrates a singular action performed by Jenny, namely purchasing a dress and completion through checkout.
User flow
Task flow
Design
Logo
I derived at Mirror's logo after multiple iterations. The intent was to deliver a modern yet neutral vibe. In alignment with much of website's interfaces and content blocks, a bold and angular logo depicting a memorable reflective mono block seemed to exist in harmony with the rest.
Design
Style guide
Style guide was created based on Mirror's requirement. The intention was to keep things modern, fresh and neutral; hence, I picked soothing colors with cool tone. I used Catamaran as the primary font through out the website as it provides an array of weight options and lends itself well from a readability sake, due to its unicode compliance and part Latin/part Tamil influence.
Design
Wireframe
Mirror's wireframe was designed from the perspective of an e-commerce solution. In order to attract new customers and retain existing customers, it was essential to highlight various offers, deals & services directly on the homepage.
The product & product details' page was designed to offer customers the ability and freedom to browse multiple products quickly by using various filtering options. Additionally, by providing a multitude of high quality product images (and from various angles) help the customers make an informed decision about their purchases.
The product & product details' page was designed to offer customers the ability and freedom to browse multiple products quickly by using various filtering options. Additionally, by providing a multitude of high quality product images (and from various angles) help the customers make an informed decision about their purchases.
Home
Products
Product details
Design
Hi-fidelity screens
A final set of hi-fidelity renders depicting the essential pages created for Mirror
Home page
Products page
Product details page
Conclusion
Lessons learned
I learned from this experience that there is a pattern of what users are looking for, and specially when it comes to online shopping. Users are looking for a hassle free shopping experience with features like:
● Convenience of shopping from mobile/portable devices from anywhere
● Frequent online exclusive offers/discounts
● Good quality clothing at affordable prices
● Returns and exchange should be hassle free
● Have an option to ‘pickup-in-store’
● Have the ability to save a product in a ‘wish list’ or ‘save for later’
● Frequent online exclusive offers/discounts
● Good quality clothing at affordable prices
● Returns and exchange should be hassle free
● Have an option to ‘pickup-in-store’
● Have the ability to save a product in a ‘wish list’ or ‘save for later’
