Mirror Branding and Website Design

• Mirror Branding and Website Design
• Mirror’s history highlights
• 🔍 Searching for insight
• Familiarizing with the competition
• Connecting with the users
• Scoping the project
• 💡 Ideation
• Flow Charts
• Wireframes
• Paper Wireframes
• Digital Wireframes
• Mobile Wireframes
• 🖋 Crafting the Perfect Look
• Logos
• Branding: Colors, Fonts, & Style
• Design Time!
• Usability Evaluation and Optimization
• Next Steps
• 🎁 Wrapping Up

Mirror’s history highlights

Although Mirror is a prosperous clothing retailer with a prominent brick-and-mortar presence, the company is looking to expand its reach and streamline inventory management by establishing an online presence. To achieve this, Mirror is embarking on a comprehensive rebranding initiative that caters to a diverse demographic.

🔍 Searching for insight

Familiarizing with the competition

To understand the market, a competitive audit was completed. The goal was to understand what competing companies do right along with trends in gaps to fill that will help Mirror stand out and increase user loyalty.

What I learned…

To make Mirror’s User Experience stand out, the site must:

• be responsive
• be organized well with options to sort & filter
• include plenty of white space
• reduce visual clutter
• contain reviews

Connecting with the users

To minimize personal bias and enhance user experience, I interviewed 6 participants to empathize with their preferences and pain points. This provided valuable information on user motives, behaviors, moments of joy, & moments of frustration for users.

Obtaining this information led me to create our person, Ty:

Now, after looking over the goals, needs, motivations, and frustrations, we shall refocus on what we are aiming to accomplish.

Scoping the project

To effectively scope the project, I identified key goals for users and the business while considering technical feasibility. I used a Venn diagram to visually represent the intersection of these goals for clear communication and organization.

💡 Ideation

Flow Charts

I first used flow charts to develop the information architecture. They helped me identify necessary pages and functions for the prototype.

Task Flow

Wireframes

Paper Wireframes

Creating these wireframes, I moved features around and played with hierarchy and highlighting of different features. I doodled each one quickly while still putting in a lot of thought to each feature and section.

Landing Page

Shopping Cart Page

Category Page

Product Page

Digital Wireframes

After creating paper wireframes, I chose my favorite one and started creating digital wireframes. I expanded on the landing page idea to create a single, complete flow through the website.

Mobile Wireframes

In order to create a responsive landing page, after finalizing the desktop browsing page, I drafted some options for rearranging the information and sizing to be appropriate for a mobile browser.

Whew! That was a lot of drafting for these pages, only some of which is displayed above to provide a glimpse of this process. Now, it is almost time to turn these ideas into a work of art, but there are a couple other things needed first.

🖋 Crafting the Perfect Look

Logos

While exploring logo ideas for a modern, trendy, affordable, and versatile brand, I decided that symmetry and a mirror-like effect would be a theme that would translate nicely into the logo. To get the creative juices flowing I drafted a lot of options.

From these, I picked my favorite and drafted digital versions, creating sizes for responsiveness. After presenting various options to colleagues, the choice was easy.

Branding: Colors, Fonts, & Style

Incorportating a strong brand can be tricky in a e-commerce clothing store. There are so many colors in the pictures of the clothes, that color in the site can be overwhelming. Because of this, I chose relatively neutral colors and used them minimally.

UI Kit

Design Time!

Desktop Landing Page

Since the structure of this page had already been decided, the main task at hand was adding style, though some functionality remained still required addressing:

• Dark green icons add subtle color.
• Light pink text on dark backgrounds also adds subtle color.
• Light pink is featured as a background color, as it is a neutral color yet adds a pop. It also provides contrast with the green shades used which allows for easy layering.
• The browsing sections offer scrolling options or link to full inventory.

Womens Clothing Page

• The female clothing categories are listed on the page, with accompanying pictures to give users a quick idea of what they can expect to find in each section.
• Below the category section, all items in the female clothing inventory are listed, which allows users to browse all items on the same page. This can save time and help users compare and contrast different items more easily.
• Clothing item cards display star ratings in dark green, creating a cohesive look.
• Number pagination at bottom helps users navigate through pages of items.

Womens Tops Browsing Page

• The page features a pink gradient background, adding personality to the design.
• Users can filter and sort options for easy browsing.
• Breadcrumbs are available for users to navigate backward as needed.

Product Page

• You will see colors featured again here in similar ways
• colored stars for reviews
• blocks have pink background
• Users reported making clothing decisions based on reviews, so these are included
• Users can post pictures, comments, personal measurements and the size purchsed for reference
• Items suggested based on the item being viewed encourages users to continue shopping
• Users are able to like this item to help produce effective algorithms for suggestions
• This also saves the item to a wishlist for easy access

Shopping cart

• It is essential to show the user their cart details including:
• item sizes
• colors
• prices
• quantities (including the option to change quantity)
• This allows user to ensure all the details are correct before placing the order.

• The order summary is pinned so the user can easily see the cost breakdown.
• The rounded corners on all the pages are made to give a modern, friendly feel to the site.

• User can easily move back and forth throughout the process to allow for changes and confirmations.
• User is able to check “same as shipping address” to quickly enter this information, if it is indeed the same.
• User is then able to save information for future purchases for convenience.

Mobile Landing Page

In order to create a good user experience on a mobile site, I created a mobile landing page. While wanting to keep the features and format consistent, I made a few changes:

• Font sizing/boldness & icon sizing
• CTA almost the full length of the screen to make it easy to touch
• Title of “must-haves” below the card to avoid either the text or image being too small
• Fewer card items shown at once to allow for readible sizing
• Stacked items in the footer instead of rows and columns

Usability Evaluation and Optimization

3/5 people successfully located the sweater

5/5 people successfully located the reviews

4/5 people successfully located the wishlist

1/5 people abandoned the task when the search bar was inactive

Next Steps

Most of the comments from the usability studies were about the functionality of certain features, like the search bar not working, not having the cart indicate items in it, not being able to delete items from the cart, etc., so I went through and created extra screens to show these functions. Seeking further feedback, I brought the designs to colleagues and mentors. From here, I found several places of improvement:

From these comments, I transformed the version on the left to the more modern and usable version shown on the right. As these componenets repeat throughout the design, I also implemented these updates throughout the site.

🎁 Wrapping Up

After implementing all the iterations found necessary in the first round of usability testing, I concluded this project. Had it been preparing for deployment, I would have gone onto a second round of usability testing to ensure the iterations made were sufficient and look for further improvements.

To experience the live version, click through the prototype below or click here. *Please note, due to lack of inventory, the prototype is limited to searching women