A successful (fictional) fashion retail store with over 400 brick-and-mortar stores around the world in 32 countries, Mirror set its sights on entering the online e-commerce space.
Mirror has been very successful offline, however, they realised that the opportunity for sales online is huge, as the behaviour is rapidly mainstreaming.
Going online also presented a prime opportunity to address the remainder inventory in their warehouses, which can be very difficult to move when there are only a few pieces left.
Late to the digital game, Mirror wanted to make a strong impression with a refreshed visual identity and a responsive website offering a user experience a cut above the rest.
Disclaimer: I completed this project as part of my Designlab UX Academy coursework. Mirror is a fictitious company - any relation to an already existing company is purely coincidental.
In order to design the right solution, I needed to understand who I was designing for. I conducted a competitive analysis to understand the current market trends and evaluate opportunities in the e-commerce industry. I also did a literature review and conducted 1-on-1 interviews with regular online shoppers to understand their pains and gains when shopping online.
Using the data I gathered, I developed a persona, empathy map and story board that would be my touchstones throughout the design process.
It was important to get the structure of the website right before digging into the wireframe sketches.
I conducted open card sorts with potential users and used that data to build a sitemap with clear pages and categories. With this ready go, I could get started on defining the visual hierarchy of each page in a series of exploratory sketches.
Based on the site map and data from my research, I explored how the people using Mirror's site would achieve their goals. What steps would they need to take to say, buy a sweater? Or add a shirt to their Favorites?
Although most online shoppers prefer to complete their purchases on desktop devices, many engage in "window shopping" on mobile devices. Because of this, designing a responsive site that would work on any device was key. I produced low-fidelity wireframes showcasing how different pages and elements would behave at different breakpoints.
I put together lo-fi prototypes in Marvel Pop and InVision for quick-and-dirty testing to validate the designs and adjust as needed.
Mirror was looking to get a fresh face, so I created a new visual identity for them that could translate well on any medium. I gathered feedback from users after the first version and found that what they were perceiving didn't match up to the brand experience Mirror was trying to offer. So I went back to the drawing board and was able to produce a visual identity and UI kit that reflected Mirror's goals and values.
With the UI Kit ready to go, it was time to take the interface out for a spin - did it meet the users' needs? Where did the design fail to support users in achieving their goals?
I put together a usability test plan in order to evaluate the designs I had so far. The objectives were to evaluate how users navigate the site to search for and find specific products, how users assess size and fit of the products, and also to test out the check out process.
I recruited participants from a pool of people that fit into the target market for this product and ran a series of moderated remote & in-person tests, using a prototype created using InVision.
Participants were invited to complete four key tasks, while sharing their comments and observations out loud throughout the test.
After conducting the usability tests, I watched and listened to each recording and took notes about the participants' actions and comments.
I arranged my findings in an affinity map, noting Wins (things that went well) and Weaknesses (things that didn't go so well) in order to spot any patterns in the participant feedback.
Based on the feedback from users during usability testing, I came up with a list of priority revisions to implement in the designs.
Participants were invited to complete four key tasks, while sharing their comments and observations out loud throughout the test.
With the priority revisions complete, my next steps will be to re-test the revised designs and gather more feedback.
After re-testing it will be possible to do a few more necessary design changes before redlining and handing off the design with specs to the development team.
As Google's Nicholas Jitkoff once said, "Design is never done", and this is the first iteration of many.
As shoppers use the website in a real-world context, we will be able to gather more data and continue to iterate and improve on the design.
