A global clothing retailer
rebrand and online launch.
CHALLENGE
Mirror is a successful clothing retailer with over 400 stores globally but had no online presence and was in need of a brand refresh to be more modern and inclusive. I led the end-to-end UX/UI design.
My role: UX/UI Designer
Skills: User research, UI/UX design, Prototyping, Usability testing.
Tools: Figma, Adobe Ilustrator & Photoshop, OptimalSort, Miro.
Team: Self-directed, with feedback from mentor and peers.
Duration: 2 weeks (80 hours)
My Process
RESEARCH
My first step was to identify through market research, competitive research and user interviews the competition, industry best practices, target user and their experience and feature needs.
Understanding the Marketplace
I conducted market and competitive research to familiarize myself with the competitive landscape and understand best practices. Review the full research plan.
Mirror resides within the fast-fashion category known for its on-trend clothing that flow from the catwalk quickly to the shelves to capture current fashion trends. The leaders in this category are H&M, Old Navy and Zara and they are able to sell this type of clothing at a very reasonable price point.
Understanding the User
I chose user interviews as my main research methodology as I felt it would provide me with the greatest opportunity to uncover the why I was looking for and allow for unexpected discoveries. It did not disappoint.
Great insights were gleaned in my three, 1-on-1 remote interviews. Participants were between the ages of 34-49, one male, one female and one mother of a small child. My user questions were both broad and specific including: “Tell me about a time when you had a fantastic online shopping experience” to “What search/filter features are most important to you when online shopping?” The following are some of my findings uncovering their motivations, wants and needs.
DEFINE & IDEATE
Building off the collected data, I was now able to define our target user and begin to synthesize and align user, business and technical goals developing a variety of deliverables and artifacts.
Persona: Meet Christina
The results of my research revealed there were several type of users with diverse needs. I synthesized the different insights and patterns and integrated them to form a primary persona.
Empathy Map
To provide further insights and gain a better understanding of Christina, I did a deeper dive into her behaviors and attitudes.
Goal Mapping
Now that I understood my target user’s goals and pains, it was time to map it with the business goals and define some mutual goals to give us a clear path forward.
Feature Roadmap
The feature roadmap functioned as a checklist which guided my decisions during the sitemap, user flow and wireframes development. I was also able to categorize each according to its business and impact cost so that I could focus on what needed to be implemented first.
Information Architecture
Sitemap
An integral part of the process is the information architecture to help users to navigate through complex sets of information effortlessly. To help guide my sitemap, I conducted card sorting research using OptimalSort to discover how users prefer to catagorize their information and this informed the heuristics and taxonomy of the site. Since this was IA from scratch, I conducted an open sort with users to understand how they naturally categorize the types of information. Future iterations will be conducted in hybrid fashion to build off these initial learnings.
User Flow
I then mapped out a user flow of two typical journey scenarios a user might experience.
Wireframes
This part of the process began with sketches that increased to mid-fidelity wireframes and included responsive consideration
for optimal desktop, tablet and mobile view.
Branding Design
Now it was time for one of my favorite parts of this case study, developing the brand! Mirror wanted to maintain their brand equity and keep the name but reimagine the logo and identity with a more modern and inclusive sensibility. The brainstorming was underway and logo concepts, moodboard and brand attributes were identified. See the full logo presentation here.
Final Logo & Moodboard
The chosen logo direction is a thin san serif font with a clean, modern look that is neutral and inclusive. The underscore with the letter “O” is a very subtle mirror icon reference. It serves as a standalone submarket as well with lock up version and tagline. The strong san serif font holds up well at a small size. A color palette and photography style were developed and displayed in a moodboard.
Brand Kit
To complete the brand kit for our UI build out we included a full color palette, photography style recommendations and examples of icons, button treatments and other assets.
User Interface Design
With the branding and information architecture in place, the site now comes to life with user interface design.
Responsive homepage for desktop, ipad and mobile.
Purchase journey screens.
PROTOTYPE & TEST
Now was time to put the user interface design and branding to the test. I conducted usability tests on a prototype flow, developed an affinity map and applied feedback, measured outcomes and planned for next steps.
Usability Testing
With a high fidelity prototype ready to go, I conducted user tests with a simple purchase journey. My goals were to gather feedback on the overall architecture, new branding and to discover any friction that the user might experience throughout the process. I also asked questions related to the sizing features that had been built into the site to aleviate the pains that had been uncovered during the user interviews. Participants were encouraged to “think aloud” and share whatever came to their mind while using the prototype. View Prototype.
Usability Testing Results
User feedback was very promising and the initial prototype was well received. This affinity map provides a visual reference outlining some of the key takeaways including successes, roadblocks and user suggestions gleaned from the usability testing.
Outcomes & Opportunities
After reviewing all the feedback, I made one immediate change to the navigation bar based on user insights. The remaining feedback will be measured against business goals, tested and considered in future iterations.
Next Steps
• Do future testing on moving store locator to top navigation.
• Consider motion or scroll feature on homepage.
• Develop and iterate free shipping features based on business feasability.
• Continue to innovate sizing feature.
• Iterate and expand site architecture and flows including account setup features.