Mirror is a fictitious brick-and-mortar retail chain that specializes in fast fashion for men women and children.
With over 400 stores in 32 countries, Mirror has preferred to keep their shopping experiences "in-person". Due to the mainstreaming of online shopping and consistent corroborative feedback from their loyal customer base, they are now ready to expand into the digital world.
Design a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style and others. In addition, I was asked to design a logo for the company that is modern and neutral enough to attract all types of people and styles.
I began my research by conducting a market analysis. My goal was to begin uncovering data that would help me to understand who the potential users of Mirror's new website are and where they may come from. Investigating the e-commerce market, I learned valuable demographic information and statistics associated with online shopping. Notably, 65% of online shoppers are either Generation "X"ers or Millennials.
After discovering more about the market that Mirror was looking to break into, I wanted to learn about Mirror's competitors. I examined clothing retailers, H&M, Zara, and Kohl's as well as e-commerce giant, Amazon. My goal was to understand the strengths and weaknesses of their e-commerce platforms.
Based on the quantitative data I discovered, I created several provisional personas in order to begin gaining empathy with potential users of the Mirror website. Because my secondary research data pointed to Generation's X and Y, the personas represent these key demographics' goals and pain points.
For my primary research method, I decided to conduct one-on-one interviews. I felt that this would help me gain a deeper understanding about user needs, pain points, and the ways that users perform tasks associated with shopping online. I developed an interview script and conducted interviews with participants who fell within the provisional persona profiles I’d established. I asked each subject some questions about their shopping habits and preferences. During the interviews, I took notes as I asked questions and conversed with each participant.
After completing the one-on-one interviews, I created an Empathy Map based on what my participants were seeing, saying and doing, thinking and feeling, as well as any pains that they experience. Next, I looked for patterns that would lead to key insights that directly translated to the needs and goals of my user for purchasing items from an online e-commerce platform.
Once I had an understanding of the goals of my user as well as their needs for interacting with an online store, I created a User Persona. Providing me with a realistic representation of my key audience segment, this persona helped to keep the concerns of the user at the forefront of every design decision I would make moving forward.
Now that I had a clear picture of my user's goals, I wanted to learn how they interacted with the goals of the business in order to discover any goals that may be shared by both entities. These shared goals helped to focus the next few stages of the design process of creating the MVP (minimum viable product).
Next, I created a feature roadmap, prioritizing which features were necessary for minimum viability, which were nice to have but not necessary, which were surprising and delightful, and which could wait for later.
View Feature Roadmap here.
I began this phase by conducting an online card-sort using OptimalSort. My aim was to uncover common category titles for the website as well as any categories that may not have been so common.
While I didn't come across any categories I hadn't previously discovered during my competitor analysis, the term "casual" was used a few times. If I were to develop this project further, I would like to test for similar subcategories and descriptors.
Once I had a clear understanding of which category titles I was going to use, I created a Site map, illustrating the high-level relationship between the content within the Mirror website. My goal was to create a structure that was recognizable and up-to-date. I began by identifying the types of content within my product, sorting this content, and then mapping them out in a way that would feel familiar to the user.
Equipped with my sitemap, I moved into design iteration. First, I created user and task flows that illustrated the ways that my user would move through the site, paying close attention to the key task of finding and purchasing an item. The flow charts aided me in prioritizing the key pages that I'd need to create in order to complete this task.
Using the insights from research, feature prioritization and Sitemap, I created low-fidelity wireframes for key desktop screens of the user experience flowing through the task of purchasing something from their online store.
One of my main design challenges was to design a responsive site. To that end, I created responsive wireframes that show what the site will look like on tablets and mobile screens. Paying close attention to established design patterns, I used common breakpoints to ensure that my designs would fit on any device.
In order to see how successful I was in making my design choices, I created a Mid-Fidelity Prototype using InVision. I wanted to see, in real-time, how my user would be able to flow through the main task and identify any pain-points or friction before moving into branding and higher fidelity deliverables.
In addition to creating a new e-commerce site, I was also tasked with rebranding Mirror in order to refresh their look along with the launch of Mirror.com. First, I began to consider the keywords that I hoped to convey : Modern, Trendy, Fashionable, Simple, Recognizable, and Reliable. From here, I created a Mood Board to help inspire my decisions and keep me focused. View Mood Board here.
Using my Mood Board as inspiration, I started to sketch ideas for a new logo which is included in the Brand Style Tile below. View my logo exploration here.
Once I had my new logo ready to work with, I created a Style Tile depicting the visual design direction of the brand, including the color palette, logo, imagery, and fonts.
Working from my Style Tile and the User Flow and Task Flow I created for my responsive wireframes, I created responsive UI designs for the new website.
With my responsive wireframes in place, I created a UI Kit for the Mirror website. Serving as a a working style guide, this kit will be updated as the brand is built further, and features are adopted or changed.
After completing the UI design for the new website I was ready to test the usability of the product I had just created. I designed a rubric outlining objectives, methodologies, information about participants, along with the task and scenario to be tested. My goal here was to ascertain the overall usability of the site while testing the main task of finding an item and purchasing it. This allowed me to measure the success of the decisions I made during the previous phases, and would allow me to discover how I can make improvements while it's still in this early stage of development.
Usability testing feedback was gathered and organized into various categories (successes, problems, and observations). An affinity map output insights and recommendations, which served as a guideline to create the next iteration of the website. Recommendations were prioritized high to low, with any time or budget constraints also considered.
In the end, organizing the structure and content of Mirror's site in a similar way to many other fashion retail sites proved to be the best way to enable my user to quickly find and purchase the clothing she's looking for.
By basing the design for Mirror on research and empathy, I was able to achieve goal of creating a design that works for my user and makes a frictionless experience of purchasing clothes online .
Identifying and utilizing existing design patterns and user expectations allowed me to build upon the successes and failures of others who have worked to solve similar problems before me. Testing my own interpretations and combinations of them within the context of Mirror's site helped me determine if the overall design was working for Mirror's current and future customers.
If I were to continue developing this project I would begin with the priority revisions that I discovered in my usability testing. From there I would create an updated high-fidelity prototype and continue testing for usability. Once I have a MVP, I would use Zeplin, a popular hand-off tool for designers that would allow me to communicate how the site should be developed into a working e-commerce store for Mirror.
