Modernizing an established global clothing brand through responsive web design
Mirror’s mission is to make any type of clothing accessible to everyone by providing inexpensive clothing that allows consumers to change styles as they need and please. With over 400 stores in 32 countries, it has built a reputation of reliability and affordability. Customers characterize Mirror’s stores as a shopping experience that’s not fancy, but clean and well-maintained.
Despite its offline success, the company recognizes the increased consumer demand for online services and the need for a digital transformation. As such, Mirror hopes to leverage the convenience of online shopping to better serve its current customers and establish a greater market presence.
- Update Mirror’s logo and brand to be modern, neutral, and attractive to a diverse range of customers
- Design a responsive ecommerce website with sophisticated functionality
Mirror is a fictitious brand. The project and content presented here are speculative and for educational purposes only.
A high-fidelity prototype of a responsive ecommerce website with intuitive navigation menus and search filters, as well as an updated logo and brand identity.
Phase 1: Research
Process: Secondary Research • Primary Research • Synthesis (Empathy Map)
- Identify Mirror's competitors, their strengths and their weaknesses
- Understand people's current experiences with clothing shopping
- Understand the role of clothing shopping in people's daily life
View the full research plan here.
To answer some of the research questions I had, I looked at industry reports and market-wide consumer surveys of the fashion and apparel industry. One key finding was that personalization plays an important role in customer satisfaction. Customers want to feel cared for on an individual level, rather than being treated like a homogenous market.
To better understand how Mirror can uniquely position itself in the market, I analyzed the strengths and weaknesses of three direct competitors: Target, H&M, and Uniqlo. I identified these brands as direct competitors because they are all fast fashion companies that offer similar products and target similar audiences as Mirror.
In contrast, I categorized ThredUp and Amazon as indirect competitors because their brand identities and target users overlap with Mirror’s, but not as much as the previous three brands. They’ve been very successful online, so I also examined their websites for strengths that Mirror could emulate.
Although ASOS is is another fast fashion brand that could be considered a direct competitor, I decided not to include it in my analysis because it doesn’t operate any physical stores. Since Mirror is an established brick-and-mortar brand, I chose to focus my analysis on brands that have been successful both online and offline.
Using findings from market research, I identified three target groups to focus on in interviews:
I went to local coffee shops to interview people within these personas about their shopping experiences. My objective was to learn more about their goals, needs, motivations, and frustrations.
- Number of participants: 5
- Gender: All female
- Age: 20-45
- Location of interviews: Oakland and San Francisco
I found that participants associated shopping online with convenience and that finding exactly what they were looking for (be it size, style, or price) was often a challenge. When I asked about fantastic shopping experiences, participants mentioned having positive impressions of personalization options (narrowing down product listings to show only their desired size, style, or price range) and of customer service representatives who helped them find what they were looking for. The results here match with what I found in market research and I was able to gain a deeper understanding of why users want to have personalized shopping experiences.
Synthesis: Empathy Map
I recorded users' thoughts, feelings, gains, and pains in an empathy map, and noted patterns across all five users' experiences. View the full empathy map on Whimsical to see the observations and patterns in detail.
I highlighted three of the patterns as my primary research insights, which I then translated into user needs that I would be designing for.
Phase 2: Define
Process: User Persona • Feature Roadmap & UI Requirements • Information Architecture (Sitemap, User Flow, Task Flow)
Using those research insights and user needs, I developed a persona as a representation of the website’s target audience – Jenny, a young professional. The goals, needs, frustrations and motivations were all derived from research insights.
This persona serves as a guideline for the rest of the design process – be it mapping out new features, creating a brand identity, or deciding on icon style for the website's user interface.
To determine which features to prioritize in the website design, I mapped out various features according to how mission-critical they are.
Mirror’s mission is to sell clothing, so the Minimum Viable Product (MVP) for an ecommerce website must be able to showcase and sell products. Thus, the checkout flow and product catalog (and navigation menu, so users can find these pages) were set as first priority. I also included the FAQ/Help pages as Priority 1 because Mirror’s reputation is based on its phenomenal customer service.
User Interface Requirements
To ensure that the website's features are aligned to users' implicit needs, I outlined UI requirements using a user story format:
"As a [new/existing customer], I want to [user task] in order to [user goal/need]."
For example: "As a new user, I want to only see items in my size, so that I can shop efficiently and avoid feeling disappointed."
Then, I identified the user inputs and UI components needed for each user story. In this example, design would include search filters and (eventually, in a later release) a personalized dashboard page when an existing customer logs in to their account.
Open card sort
Using an online open card sort activity, I identified categories to use for grouping clothing items in the website's navigation menu: tops, bottoms, sweaters, outerwear (jackets, coats), shoes, and accessories. See the card sort results in detail here.
Next, I created a sitemap and define the content categories.
It’s important to clearly define the website’s navigational structure before creating any wireframes or designs. Otherwise, the project risks becoming inherently disorganized, running into scope creep, or having illogical navigation – all of which would result in an unpleasant user experience.
This user flow walks through the process of landing on Mirror’s website from a Google search, finding a particular item, and purchasing that item. The choices available at the end of the checkout process allow the user to continue to interact with the website, so that engagement with the brand doesn’t stop at purchase.
I took one of the branches from the user flow and outlined a task flow as a way to map out the individual pages that I need to design.
Phase 3: ideate
Process: Sketches • Design Patterns • Low-Fidelity Wireframes
I sketched some versions of Mirror’s homepage to explore how to layout various types of content, such as featured products and product collections.
While sketching each feature/component, I thought about how the content and its placement would help Jenny (our persona) achieve her goals, meet her needs, and avoid her frustrations.
I looked at several clothing websites for UI patterns. Using those patterns, I was able to determine what to maintain on Mirror’s homepage and areas for innovation. It’s important that designs are based on mental models that users are already accustomed to, so as to minimize their cognitive overload while using a particular website, app, or product.
Phase 4: Design
Process: Mid-fidelity Wireframes • Branding & Logo Design • UI Kit • High-Fidelity Wireframes
With these patterns and ideas in mind, I moved onto wireframing in Sketch.
I also created a set of mid-fidelity mockups of the homepage and product page in desktop, tablet, and mobile viewport sizes, since the goal of this project is to design a responsive website that can be accessed on a variety of devices.
Before adding detailed content and color, I put together a brand style tile with an updated logo in order to set guidelines for color and imagery.
Branding & Logo Design
I started by listing out adjectives that describe Mirror’s image and searched for colors, imagery, typography, and logo designs that conveyed those ideas.
After sketching out some logo designs, I digitized a few. I chose the final logo based on scalability, uniqueness, versatility (e.g. if Mirror expands into a lifestyle brand), and adherence to Mirror’s brand concept.
The symbol is derived from an abstracted section of the wordmark's “m” – the rising curve of its second shoulder.
Though most clothing brands only utilize a wordmark in their branding (and using this particular logo would risk “breaking” users’ mental model of typical clothing brands), I chose to include the symbol because it helps set Mirror’s logo apart in a sea of clothing brand logos. And, who knows? With Mirror’s current global reach, it could easily become more than just a clothing brand. This logo provides that versatility.
With the logo design finalized, I created a brand style tile with images, typography, and a color palette. The colors reflect Mirror’s brand image: modern, fresh, neutral.
I created a UI kit using the brand style tile to maintain consistency between the brand and the website while designing the rest of the UI.
High-Fidelity Responsive Wireframes
With the branding and style set, I moved on to designing the high-fidelity responsive wireframes for the homepage and product page.
Phase 5: Prototype
Process: High-Fidelity InVision Prototype • Usability Test • Synthesis (Affinity Map)
High-Fidelity InVision Prototype
In preparation for usability testing, I created high-fidelity wireframes for the rest of the task flow – purchasing a shirt on the website. I focused on main screens and included some simple interactive elements (e.g. button hover states, an “added to cart” popup).
Interact with the prototype here.
With my prototype ready for testing, I drafted up a test plan and recruited participants at local coffee shops. Each person was given two scenarios and asked to complete a series of tasks related to purchasing an item from the website. These tasks were meant to test whether the navigation, flow (order of screens), and content layout was clear. While participants interacted with the prototype, I observed their behavior and thoughts (they were asked to think aloud) to identify strengths and weaknesses of the design.
- Number of participants: 6
- Age: 20-30
- Gender: 4 female, 1 male, 1 genderqueer
- Completion rate: 100%
I synthesized the test findings using an affinity map, noting patterns and insights – which were translated into specific design improvements. In general, participants praised the website as being easy to use and matching their idea of a “typical” clothing store website.
There were just two points of friction:
- 50% of testers couldn’t say definitively if an item was on sale while looking at the product page.
- There was a minor design error on checkout page that made the shipping method look as if it were already selected by default.
View the full affinity map here.
Revised InVision Prototype
With the recommendations from the affinity map, I revised the product page and shopping bag page to show that the product is on sale. I also fixed the design error on the checkout shipping method page.
Phase 6: Iterate
Since the prototype is housed in InVision – with assets and designs synced directly from Sketch – handoff to developers is straightforward. The developer/engineering team can simply open InVision’s Inspect tool to view design specs, download assets, etc. The comment feature in InVision also makes it easy for all stakeholders to quickly note if something needs to be adjusted, etc.
With the core screens designed and prototyped, we can repeat the design and testing process with additional pages and features. It’s also important to revisit our UI requirements and feature roadmap, to ensure that we’re designing at the intersection of business and user goals, while being aware of technical and human resource constraints for each project.
Since this was my first UX design project, I dedicated the majority of my time to learning each tool and understanding the process. I gathered key takeaways from each step of the process, so that future projects can be more streamlined:
- I’m an academic at heart and I thoroughly enjoy research, but this particular process felt arduous and confusing. Despite the phase being only a week long, I spent around 50 hours on it because I had difficulty gauging how deep to go with my interview questions. In retrospect, my perfectionism kept me from presenting rough drafts of my research plan to my peers, which was probably what I needed to gain clarity.
- Moving forward, I’m working on letting go of that perfectionism and presenting more of my drafts, sketches, and rough ideas – not just the pixel-perfect finished work. :)