A complete rebrand and responsive website design for a leading clothing retailer

Founded in 1995, Mirror is an established American apparel retailer based in NYC. The global retailer specializes in fast fashion, and products include clothing, accessories, shoes, swimwear, beauty, and perfumes. While being an established retailer with over 510 shops worldwide, Mirror hasn't competed with competitors in the e-commerce market in recent years because of its lack of presence.

As changing consumer habits shift to online shopping, Mirror would like to stay in the game and focus on updating and modernizing its current responsive website and branding kit. I led the research and redesign of Mirror's web and branding project to increase engagement, revenue growth and create the best possible shopping experience for their customers.

Key Takeaways

• As technology continues to grow, keeping up and pushing the envelope can differentiate one brand from another.

• Investing in tech will improve customer experience and can potentially lead to brand loyalty.

• Users are focused on finding what they want, fast and easy.

• Minimal U.I. interfaces with many options will lead to more purchases.

• User Engagement, such as Zara's co-creator model, is a crucial way to connect to the core consumer and drive the business model.

• Strong digital marketing campaigns have an advantage and can be a differentiator.

• Quality Control is vital for building trust with consumers.

• Return & shipping policy should be beneficial to users and also align with cost strategy for business.

• Sizing tools should be accurate and easy to use.

Based on market research, five provisional persona’s were identified as potential target consumers with similar needs and pain points.

User Research & Insights

I conducted one-on-one user interviews to validate and discard assumptions about online apparel shopping, identify pain points, and learn the user's needs, wants, and desires.

Interview research revealed some top needs include free shipping, returns, and customer reviews. Slow shipping was shown as a significant pain because customers crave instant gratification. Free returns are often a deciding factor when choosing one retailer over the other, and users look to customer reviews to get more information on the product before purchasing.

Customers want stocked products in sizes and colors and access to detailed and accurate sizing and fabric information so they can feel confident about making their purchases. Other popular wants include a fast checkout and follow-up process.

Participants mentioned they desire in-store "shopping experiences" because they like it when products are curated. Finding wanted/needed items quickly also satisfies their instant gratification hunger. Although customers are more likely to purchase items when they are on sale, quality is essential.

After conducting market research and empathizing with users during interviews, I gained a more in-depth understanding of the users' values, perceptions, and experiences, which led me to outline some feature design opportunities:

• Clear product categories and filters

• Large high-quality product images and videos

• Product sizing and fabric details

• Co-customer creation

• Curated collections

• Customer reviews

• Fast checkout process

User Persona

Key findings from all research phases allowed me to formulate a focused main persona.

Ashley is an adventurist who loves exploring and being out and about. Pre-COVID, she often met up with friends to shop for apparel and accessories at her local mall. She craves instant gratification and the "curated" shopping experience. Lately, she's been spending more time shopping online. She appreciates the convenience and looks explicitly for retailers that have sales on quality items, accessible, high-quality images and product details, and free shipping and returns. Ashley gets frustrated when a website is hard to navigate, the checkout and return process is slow, and items are always out of stock.

To assist with essential feature and design decisions, I decided to take a step back and create a Venn diagram to organize Mirror's goals into business, user, and technical categories.

Based on the diagram, and research and analysis, I was able to confirm:

• Creating a user-centric site should be a significant focus point as it falls into all three categories.

• Developing a unique shopping experience is another important goal as it satisfies both business and user goals.

• Data insights indicate, focusing on an accurate sizing tool would be a top priority for technical goals down the line.

I created a roadmap of features to identify and satisfy the most critical needs first. The roadmap reflects market and user research conclusions, target persona, and business needs. I prioritized components on the list based on their level of importance to users and stakeholders.

Before diving into the navigation for Mirror's website, I conducted an open card sorting study via Optimal Workshop to see how users discern product categories.

• 30 Cards were sorted into categories 7 of 8

• (88%) Participants completed the study

• Participants took a median time of 04:28 to complete the task

The similarity matrix shows the proportion of participants who grouped any two cards in the same category. For each pair of cards, the intersecting cell shows the percentage of participants who grouped these cards together. The darker clusters represent the most closely related pairings for potential groupings.

Card Sorting Takeaways

• Key categories included Accessories, Shoes, Formal Wear, Pants, Tops, and Shirts.

• Most categorization was by type of clothing, some categorized by occasion.

• 3 Participants sorted some categories based on gender.

• 1 Participant sorted some categories based on adjectives.

• Top Struggle for classification goes to The Best Sweater Vest.

Utilizing Card Sort Analysis and Competitor Research, I illustrated a sitemap to show the relationship between pages and categories on Mirror's future website. Key pages include Women’s, Men’s, Accessories, Collaborations, Account, Cart, and more.

I created a linear task flow to identify the high-level steps a user would take to purchase an apparel item on the website.

Afterward, using the task flow as a guide, I illustrated a user flow of my persona to completing the task of purchasing the "perfect" black jacket.

The task flow helped me see the primary sequential path, while the user flow helped identify different directions a user may take to get to their desired destination.

Mid-Fi

Using Sketch and adhering to an 8-column grid, I digitized a set of mid-fi wireframes for Mirror's Home, Category, and Product pages. I focused on highlighting essential elements from the research and analysis phases to satisfy the needs, wants, and desires of target users. I annotated key features to communicate my thinking process and laid out designs to reflect a flow from one screen to the next.

Defining Brand Identity

I created a mood board to start visually brainstorming concepts for Mirror's rebrand. I gathered a collection of colors, images, and text to encompass who Mirror is as a brand and what they stand for.

Mirror represents effortless trendy vibes through strong images of Men and Women. A feeling of sophistication is present through white space, minimal elements, earth-tone colors, organic patterns, and zen photos of nature.

I used Mirror's mood board as inspiration to get ideas flowing for the logo design. My objective was to create a unique, versatile design and convey the essence of the brand. I explored a few different fonts and layout options in round 1, and after receiving some feedback, I combined vital elements to create a few other variations.

Option 2 was the winning logo choice because it felt clean and most definitive of the brand.

To help form a common visual language and guide future design discussions with Mirror's stakeholders, I created a style tile including fonts, colors, and other brand visual UI elements.

Responsive Hi-Fi

Utilizing previous mid-fidelity frames, I enhanced design details and illustrated responsive hi-fidelity wireframes for Mirror's Home and Product pages. Since research revealed user’s shop on multiple devices, it was essential to build web pages that detect the visitor's screen size and orientation and change the layout accordingly. The elevated pages included actual content, typefaces, colors, image dimensions, and branding elements.

Design System

I put together a UI kit including components (logo, buttons, colors, typography, etc.) to improve workflow and deliver prototypes and other digital design deliverables within reasonable timeframes.

To be continued…

I thoroughly enjoyed working on the Mirror project. It taught me how to keep users at the forefront while also prioritizing business growth goals for stakeholders. If I was to continue working on this case study, my primary next steps would include conducting a second round of testing, adding all necessary pages, and testing again before finally getting the product ready for launch.

Testing, analysis, and iterations would continue overtime to ensure growth, engagement, and the "best" possible online shopping experience for Mirror's customers.