Introduction
Mirror is an international clothing company that is very successful offline, however until recently they had almost no online presence. The company's executive team believes that they could increase their customer base and market share significantly by offering their products online. This assumption is reinforced by market research and numerous customer requests for an online presence.
Platform: Desktop, tablet & mobile
Roles: User Research, UX Strategy, Information Architecture, Interaction Design, Prototyping, Usability Testing, UI Design, Branding
Tools used: Sketch, Adobe XD, Figma, Adobe Illustrator, InVision, Survey Monkey, and Optimal Workshop.
Challenge
The problem space was multifaceted due to the scope of the project. It included the need to rapidly gain an understanding of the apparel industry, modern consumer shopping habits, and Mirror's customer base in order to ensure that the end product would be both easy to use and intuitive.
Research
The research phase of the project was kicked off with the creation of a research plan. The focus was on understanding the online apparel market. This was done by conducting research into customer shopping habits in order to understand what motivates customers to shop online or in-store. Research methodologies used included a literature review, a competitive analysis, in-person user interviews, and an online survey.
Research Insights
Once the research was conducted the data was synthesized in order to extract key user needs that I could design for. This was done by creating several UX deliverables including an Empathy Map, a User Persona, and a Storyboard.
Some of the key user needs identified from the research phase were:
Customers need detailed product information when shopping for clothes.
They also need to know that returning clothes will be as simple and painless as possible via mail and in-store.
Customers also need the option to read product reviews by other customers before purchasing clothes online.
Lastly, customers strongly prefer seeing clothing in person. In turn, a feature allowing customers to find an item they see online at a local store is a high priority for the website.
Information Architecture
The next step for this project was the interaction design. In order to understand the user base and empathize with customers further I conducted an open card sorting exercise. This helped me understand how customers would navigate the website and what sort of organizational structure made the most sense.
Next, a Site Map was created using the insights gained from the card sorting exercise. The Site Map acted as a guide on how to organize content for the rest of the project.
Once the Site Map was created a User Flow was also crafted. The User Flow diagram was based on the persona created for Mirror and helped me to further understand how a customer would navigate the website from beginning to end. The focus was on building empathy by mapping out a user's journey from the homepage, through the product selection process, and finally to the checkout.
Interaction Design
The next step in the process was designing wireframes. First, the main screens for the website were sketched. As the website needed to be responsive I created wireframes for the desktop, tablet, and mobile devices while keeping in mind user needs and usability and accessibility best practices. Once the paper sketches were done, I created digital versions by using Sketch.
Prototyping and Usability Testing
With the wireframes completed it was time to test them with real users to better understand what worked and what did not. First, an InVision prototype was created that allowed users to navigate the wireframes and go through the flow of purchasing an item.
Once the prototype was completed I conducted usability testing with five users who attempted to complete a series of tasks with the prototype. The usability tests were very beneficial as they highlighted several areas of the UI that could be improved and also confirmed that more than 70% of the UI elements tested were easy to use by testers and worked well.
The findings were compiled and documented in an Affinity Map and used to update the UI.
UI Design and Branding
After the usability testing, I began working on the User Interface design. First, I designed the branding for Mirror by creating a logo and style guide based on the business' desired brand message. The focus was on conveying the brand as neutral, modern, and clean.
Responsive High Fidelity Wireframes
Lastly, I created high fidelity wireframes for desktop, tablet, and phone resolutions.
Next Steps
The next phase of this project would be working with a broader team to launch the product. Once launched, analytics and further usability testing would allow for the continued refinement and improvement of the product's usability. After that, lower priority features would be implemented