Mirror - Online Retailer Rebrand & Redesign
Project Overview
With an outdated site showing only store locations, Mirror, an affordable box-store clothing retailer, wanted to revamp their presence online with both a rebranding overhaul and a new website that customers could order products through directly.
Roles: UX & UI Design, Rebranding
Tools: Figma, Optimal Sort, Whimsical
Duration: 140 Hours
( *Mirror was a project as part of UX Academy’s curriculum)
Design Process
Empathize - Research & Interviews
With previous experience in working with clothing retailers in the past, I was partially savvy to some of the practices in the industry. However, it was still important to gain a full picture of the market, users, and standards for an ecommerce site.
Competitor Research -
Preliminary research for Mirror’s updated site focused largely on direct competitors and the current online retail market. With Mirror’s clothing inexpensive and standard in styling, competitors were selected with these specific traits in mind. Provincial personas were developed to provide background for future potential conversions for Mirror.
Market Research -
With the competition understood, additional market research was completed through examining end-of-year memos, reports, and industry predictions. Research showed that the online clothing retail market was expected to grow before COVID19, and was already up to $500bn/yr at the beginning of 2020. As with most retail, online availability has been a lifeline for many businesses during temporary lockdowns, so Mirror’s decision to expand online couldn’t have come at a better time.
User Research & Interviews
Five potential users were selected to participate in both an online 1-on-1 interview, as well as a card sorting exercise for later product categorization. The users were sought out specifically based upon their frequency regarding online clothes shopping through various personal connections of mine. During the interview, participants were asked specific questions about their online shopping habits, focusing particularly on their joy and pain points when purchasing clothing online.
Card sorting was done remotely using Optimal Sort, and participants were left much to their own devices on how to categorize potential products available for sale on Mirror.
Define - Goals, Persona, and Information Architecture
After the interviews and card sorting completed, highlighting the goals of the project were necessary to keep focus and direction for work throughout the rest of the project.
Persona -
Having a clear direction forward, common traits and themes were gathered from among the interview responses and were combined with the previous secondary market research to create a persona that was both realistic, but also a likely Mirror user.
Empathy Map -
With the persona completed, an empathy map was generated based around responses from interview participants to better understand the potential user, and how to best plan to meet their needs while avoiding causing undue frustration.
User & Task Flows -
Now with a solid understanding of the online clothing retail environment, who the potential users are, as well as their habits, work could finally begin on organizing the layout of Mirror’s site. In order to design a site users will be able to navigate and understand easily, task and user flows were created using the persona as a base with respect given to make sure the flows would be applicable to other users. The site map was completed later, and used previously gathered data from card sorting in page organization and hierarchy.
Ideate & Design - Wireframes, branding, and UI
Once an idea of what all the site would require was established, much of the bulk of the design work could begin. Low fidelity wireframes were sketched within Figma for desktop, before eventually being refined and designed for responsive/alternative viewports.
UI Kit -
With clear direction to move forward with the layout of the site, work was put into rebranding the logo and developing a design system. In line with the clean and modern look requested by the client in the design brief, a minimal palette was chosen for both its contemporary look, as well readability and accessibility. A style tile and later UI kit were created to give context to the components and molecules of UI that help to make up the completed high fidelity wireframes.
High Fidelity Screens -
Elements from the UI kit were assembled together using earlier wireframes. Stock imagery of people and clothing were gathered and replaced earlier placeholders.
Prototype & Testing -
Once the wireframes were finalized and updated with high fidelity elements and images, work began on prototyping the site within Figma. Once this was completed however, I encountered some of the largest issues since the project began. Users were selected from both previous participants and willing volunteers, however the research environment wasn’t formal, and the research that came out of it undetailed and flawed. What was able to be used showed every participant able to complete each task without difficulty, but many finer moments and interactions during the testing weren’t recorded or forgotten due to the environment. It ended up proving a learning experience, and I now have a more solid understanding of how to conduct user testing effectively.
Key Takeaways
As my first beginning-to-handoff site, much of the entire process was full of first time learning experiences. Much of the software and methodologies became familiar, and I can say I am much more comfortable calling myself a junior UX designer after having gone through the design process fully. Possible next steps would be to create additional pages that were not completed (cart, item browsing, etc.) or to adopt features users mentioned they wished to see in interviews (such as videos of products or order tracking page.)