UX/UI, User Research, branding
Mirror Clothing: Website Design + Rebranding
Mirror is a brick and mortar clothing retailer with over 400 stores in 32 countries. Mirror provides a wide array of fashionable clothing for men, women, and children of all ages. Mirror recognized the need for expansion into the digital space and wanted to tap into its online revenue potential.
Design a responsive e-commerce platform that will allow Mirror to increase revenue, attract new customers, and sell excess inventory. Give the company a face lift by designing a new logo that captures the essence of the brand.
A usable and aesthetically appealing online platform with strong brand identity.
Length of Project
Lead UX Designer
During the research phase, I sought to understand the current state of the e-commerce retail landscape. My intention for the research phase was to uncover the needs and frustrations of the target user to better understand how to appeal to them.
Define people's common behaviors when shopping in brick and mortar stores.
Define people's common behaviors when shopping online.
Determine what people like and dislike about both shopping experiences.
First, I conducted secondary research to understand user demographics, developments, opportunities, and challenges in the e-commerce retail industry. collected information from articles and case studies to identify industry standards and user expectations.
Primary Research - Competitive Analysis
I analyzed some of Mirror's competitors in the e-commerce retail industry. I uncovered the strengths and weaknesses of Mirror's direct competitors H&M, Urban Outfitters, and Topshop. In addition, I performed a competitive analysis on Asos and Amazon which are indirect competitors of Mirror.
My competitive analysis produced the following insights:
Social Media Integration: More users want the ability to shop the looks they see worn by their favorite influencers. This not only helps the reputation of the brand, but it also engages the customer.
Product Assistance: Customers expect website features that will help them make the right purchase the first time. Successful websites are using sizing helpers that predict the best size for the customer.
Trend Pop Up Shops: Most of the competitors incorporate clothing themes and collections into their online experience to help customers quickly and easily acheive the look they want.
Painless Checkout: Providing 1-step checkout options has been a major asset in the e-commerce industry. Online retailers are starting to incorporate payment plan options such as Afterpay. This makes fashion accessible and affordable in a new way.
Primary Research - Interviews
In order to design a website with a great user experience, I had to first identify the needs of the target audience. To better understand the perspective of users, I had speak with them directly. I sat down with two women and one man between 25 and 62 years old to ask them about their shopping experiences and habits.
Users prefer online shopping to in-store shopping
User prefer a large selection of clothing and accessory styles
Price and quality are the most important considerations for users.
After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic.
Clustering interview responses allowed me to discover trends and patterns from which insights could be constructed. Through this process I identified several user needs:
Customer Service: Users need friendly helpful staff in stores. Online, customer service options should be accessible to the user throughout the browsing and checkout process.
Size Consistency: Users have trouble finding clothes that fit their body types. Clothing stores need to cater to a larger audience.
Seamless Shipping and Returns: Due to the high risk of ordering the wrong size online, participants want to know that the return process will be straightforward.
Time-Efficiency: Users all expressed a desire for their shopping environment to be organized and stress-free. They want to easily find the item they want.
Persona and Storyboard Creation
Next, I used all of the qualitative data i gathered during the research process to create Lauren, my user persona. Lauren is an an ambitious 20-something year old professional in need of stylish well-made clothes at an affordable price.
I then created a storyboard depicting Lauren's struggle to look the part at work on a budget and the solution that Mirror's online site provides.
Define & Ideate
Now that I had empathized with target users and identified their needs, I needed to define the solution. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I had identified common goals, I could decide what product features were necessary for the prototype.
I created a high-level list of site features to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.
To view my Product Feature Matrix click here.
Next, I conducted an open card sort to get a sense of how users categorize clothing, shoes, and accessories. I asked them to arrange 30 clothing items into categories of their choosing to get a sense for how users talk and think about clothing.
I made the assumption that the standard e-commerce navigation system needed to be changed, however participants feedback revealed they were in fact happy with it. While there was confusion about where to place miscellaneous items, the categories used in the industry seem to be efficient and understandable for the user.
Based on response trends, I created a site map which laid out the structure and organization of the content on the site.
I completed a task flow and user flow to imagine the ways a user might navigate through the site to achieve their goals. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user.
Visual Design - Branding
At this point in the process, i began thinking about how the website would look and feel to visitors. I came up with a series of descriptive words that captured the essence of the Mirror brand: Fresh, modern, quality, affordable.
With these adjectives in mind, I created mood boards on Pinterest where I collected pins of typography, logos, and color schemes that aligned with my vision for Mirror.
I began sketching out ideas for a logo, aided by the inspiration I found on Pinterest. I wanted to play on the idea of symmetry and reflections.I settled on a classic monogram logo with a modern flair. As I explored different variations of the letter M, I hoped to come up with a logo that was memorable and unique but would not alienate users.
The result was two very different versions of an M- one that was modern, geometric, and abstract and another which was a modern take on a traditional serif letter. After revisiting the brand adjectives and reflecting on aesthetics , I decided to move forward with the former.
The logos were added to the Style Guide and UI Kit, a comprehensive collection of all site components and UI patterns. Both documents are constantly changing as the website and brand grow.
I began the process of wireframing with sketches of variations of the website landing page. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasbile way. The sketch I chose served as a guide for my digital wireframes.
I created a low-fidelity prototype of the desktop site in Sketch. I created a UI requirements document to outline all of the features and elements I wanted to incorporate into the design.
At this point in the design process, I needed to think about how I wanted the site to look on different screen sizes. It was essential that the website would present as well on tablet and mobile devices as it did in desktop size. I created responsive wireframes for Mirror's key pages and began to flesh them out.
High Fidelity Prototypes
After several iterations of my low-fidelity prototype, I fleshed out the details of each page with images, typography, navigation menus, etc.
I asked 5 participants to test out the prototype's usability. The participant pool was comprised of women between the ages of 18 and 65 who shop at least once per month. Three participants met me in person to complete the usability test, while two others did so remotely via skype. The participants were given three different scenarios, each with a task to complete.
Find a pair of shoes and save them. Then, go view your saved items list.
Find a pair of jeans and navigate to the customer reviews section of the product page.
Find a blue dress under $50, and add it to your cart.
To view the full Usability Testing Plan, click here.
I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way of determine what needed to be changed immediately and what could be saved for later.
Overall, users navigated through the website with ease. Confusion most often stemmed from the fact that the prototype is not fully functional. Participants prefer to use a combination of the filters and sorting options when looking for a specific item, and they value having categories for occasions. Participants do not always use the filters in the way intended; perceptions about price, quality, and value influence how they search for an item.
Disable the call to action button until the user has selected both a size and color on the item product page.
Make header more visible on “Saved Items” page. Add breadcrumb navigation and other elements that make it distinct from the search page.
Increase the contrast of text and background in the secondary navigation dropdown menu (ex: for accessories keep minimum price at “less than $25”, for clothing “less than $50,” etc.)
Change the price filters to reflect the product type.
Click here to view the prototype on InVision.
While the feedback was mostly positive from participants, the prototype is far from perfect. I plan on fleshing out the rest of the pages of the prototype, especially the shopping cart and filter features. I plan to continue the iterative cycle of testing and updating the prototype. I will use Zeplin to hand off the design to the developer team when I have made all improvements to the prototype.