Responsive e-commerce clothing site.
Mirror is a highly successful brick-and-mortar clothing retailer operating over 400 stores in 32 countries around the world. Their clothing caters to all styles for men, women, and children and is of good quality at a relatively low price. In order to better compete in the marketplace, and sell extra clothes otherwise sitting in their warehouses, they want to start a responsive online store that would allow anyone to filter and find items just right for them.
background
Redesign company logo and create a responsive online site that will increase revenue through sales, decrease returns, and decrease excess inventory.
proposal
process
research
Competitive Analysis
User Interviews
Persona
strategy
Storyboards
Feature Roadmap
User Flow
interaction design
Wireframes
Prototype
user interface design
Mockups
Style Guide
Usability Testing
UI Kit
research
The goals of the research were to determine competitors' strengths and weaknesses through competitive analysis, what pain points exist with online clothing stores, and what the unmet needs of online clothing shoppers are.
​
This was accomplished through a competitive analysis and user interviews. From that, a persona was created with the goals/needs and frustrations/fears of online clothing shopping. The persona for this project was Rebecca–a 30 year old graduate student and mother who lacks the time to focus on herself. She needs a simple e-commerce site that's easy to browse, filter, and search for clothes she'd like.
strategy
With the persona in place, the next step was to form a strategy, beginning with storyboards. We used Rebecca as the foundation for the storyboard to come up with a scenario about how she would find out about and utilize our new e-commerce clothing site, Mirror. This included all the distractions and pressures she faces in her life that might affect how she would receive the site.
​
Storyboarding allows you to put yourself in the shoes of the user through a realistic situation they may encounter.
Once we had the persona and storyboard in mind, we were able to create some user and task flows to show what Rebecca would go through to complete the task of purchasing clothes on Mirror.
interaction design
Wireframes were then created based on the storyboard, persona, and user interviews gathered during the research and strategy phases. We focused on overall usability through clear category choices, naming, filter options, and layout.
These wireframes were then used to create an interactive prototype through InVision. This allowed us to see what elements worked, or didn't work, within the flow that was designed for. From there, designs were revised and updated within the prototype to get a functional baseline for the design.
​
In the next phase, user interface design, the wireframes were used to create high-fidelity user interfaces that could be tested.
user interface design
The Mirror brand was born at this point to help convey a fun, exciting, modern, and casual, but professional, image. This was done through font, color, and image choices.
The hero images showcase products out in the wild while product images all remained uniform. The clean white backgrounds for product images allow the products to really shine without being cluttered or overshadowed by whatever is going on in the background.
​
This is best showcased through the style tile created for the project.
This style tile was then utilized to create a user interface based on the wireframes created previously. Once all screens for the flow were created, additional screens were then designed to test additional tasks.
​
Usability testing on the user interface designs was then performed for specified tasks:
1. Find a yellow floral sundress and add it to the cart.
2. Favorite an additional dress to be purchased later.
​
Users performed these tasks live and in-person as we were able to ask follow-up questions, gather information about their thoughts as they were going through the tasks, and check for usability of the designs.
"I assume stores have good return policies. If you don't these days, you're way behind and I won't buy again."
"The site must be mobile friendly, or I am much less likely to ever use it because I just don't sit at the computer to shop."
"The site is very easy to navigate because it feels very familiar. It utilizes a lot of similar things as other e-commerce sites."
"I really like that the focus is taken off of the models and their faces and instead is directed completely on the clothes."
Looking back at this project, the user interface design and branding would benefit from gaining more inspiration and implementing that into the design. Overall the design feels clean and uncluttered, but doesn't quite get to where it could to take it to the next level.
​
That said, the interaction design is very simple and intuitive. This is because the site relies heavily on design patterns found on a multitude of e-commerce sites right now. That helps the site to feel familiar and increases usability greatly.
​
As for next steps, the first priority would be to build out a unique and engaging size comparison tool, which is useful when shopping for clothes online. Beyond that, most time would be dedicated to enhancing the user interface design to create a more cohesive feel across the site. This would also be coupled with user testing on button placement, banner options, hero images, etc. to continue to provide a great user experience.