Mirror

Responsive Website & Rebrand

Role: Individual, UX/UI Designer

Timeline: 8 weeks

Tools: Figma, Marvel, Invision

Role: Individual, UX/UI Designer

Timeline: 8 weeks

Tools: Figma, Marvel, Invision

Role: Individual, UX/UI Designer

Timeline: 8 weeks

Tools: Figma, Marvel, Invision

Role: Individual, UX/UI Designer

Timeline: 8 weeks

Tools: Figma, Marvel, Invision

VIEW FINAL PROTOTYPE

Background

Mirror is a successful clothing company that believes in making affordable, great quality clothing in many styles. The project for Mirror (fictional) was done for a student project at Designlab.

Problem

Mirror has been focusing on keeping their services in person, but because of customer demand, they would like to create a responsive website where they can sell their products online. An ecommerce website would be more convenient for customers and even for the company as they have lots of remainder inventory in their warehouses that would be easier to sell online.

Outcome

I was able to prototype a hi-fidelity responsive website that clearly displays their products. Mirror’s rebrand is neutral, modern, and clean to allow users to have a pleasant and easy shopping experience. Users are also able to shop the items on Mirror's instagram through the website as well. Mirror also offers services such as personalized sizing recommendations and style experts to help users find exactly what they need.

Design Process

RESEARCH: Secondary Research, Competitive Analysis, Interviews, Persona Creation, Empathy Map, Storyboard
INFORMATION ARCHITECTURE: Card Sorting, Sitemap, Page Sketches
INTERACTION DESIGN: Task Flow, User Flow, Wireframes, Prototypes
UI DESIGN: Moodboard, Brand Logo, Style Tile, Responsive UI Designs, UI Kit
ITERATION & IMPLEMENTATION: Usability Testing of the High Fidelity Prototype, Affinity Map

RESEARCH: Secondary Research, Competitive Analysis, Interviews, Persona Creation, Empathy Map, Storyboard
INFORMATION ARCHITECTURE: Card Sorting, Sitemap, Page Sketches
INTERACTION DESIGN: Task Flow, User Flow, Wireframes, Prototypes
UI DESIGN: Moodboard, Brand Logo, Style Tile, Responsive UI Designs, UI Kit
ITERATION & IMPLEMENTATION: Usability Testing of the High Fidelity Prototype, Affinity Map

RESEARCH

Secondary Research & Competitive Analysis

Research & Competitive Analysis

Researching the top competitors of Mirror and analyzing their strengths and weaknesses was helpful in finding ways Mirror can improve and succeed in the ecommerce industry.

Interviews

I conducted a 1:1 interview with 3 participants and a combination of a contextual inquiry + 1:1 interview with 1 participant. They ranged from ages 30-35 and were all working professionals living in California. The interviews revealed the needs, wants and pain points of users while using clothing ecommerce websites. Overall, users would like to save time, money, and energy while shopping.

These features will help the users shop efficiently:

Free returns and free shipping
Low minimum purchase amount for free shipping
Many options for sizing like regular, tall, and petite
Easy and clear navigation and categories
Reviews (Get a better idea of sizing and quality, which would lead to less returns)
Direct chat function for quick answers
Clear images of clothing
Models of different sizes and the model's weight, height, and size they are wearing
Inform users if an item is really backordered and how many are left in stock

Free returns and free shipping
Low minimum purchase amount for free shipping
Many options for sizing like regular, tall, and petite
Easy and clear navigation and categories
Reviews (Get a better idea of sizing and quality, which would lead to less returns)
Direct chat function for quick answers
Clear images of clothing
Models of different sizes and the model's weight, height, and size they are wearing
Inform users if an item is really backordered and how many are left in stock

Define

I developed a persona based on my research and interview findings to better empathize with customers who would shop at Mirror. Charlene is a busy working professional living in San Francisco. She has long commutes and has a stressful job so she shops online for retail therapy. Since she lives in a busy city and it's not easy to get around, she does most of her shopping online.

INFORMATION ARCHITECTURE

Site Map

I performed a card sorting exercise with 4 participants to learn how users categorize and group certain clothing items. From the results, I created a site map:

Sketches

After getting a better idea of the structure of the website, I began sketching out potential ideas for the homepage:

INTERACTION DESIGN

User Flow

I created a user flow and mapped out all the potential routes my persona Charlene could take to purchase a new sweater:

Wireframes

Based on my sketches, I created wireframes to lay out the structure and content of the site:

UI DESIGN

Color Style Tile

For the logo, images, colors, and typography, I chose elements that showcase Mirror's clean, modern, and neutral brand. The tones of green and gold convey a message of quality, comfort, and value. I chose a minimalistic and sleek logo design. The simple font and clean images allow the users to focus on the products and enhance the shopping experience.

Hi-fidelity Wireframes

Hi-Fidelity Wireframes

I incorporated the UI elements to create the hi-fidelity wireframes:

Responsive UI

I created a responsive homepage and product page for tablet and mobile devices as well:

Mirror UI Kit

The UI kit below includes all of the UI elements included in the final website layout.

Test & Changes

I put together a prototype from the initial hi-fidelity wireframes in Invision to test out the usability of the website and pinpoint any successes and improvements that could be made. Below are the main challenges users faced and the changes that were made:

1. Make “Quick Access” bigger and more noticeable. One option is to make the white space around the words take up the entire bottom section of the product photo and lower the opacity.

2. Make the 1st homepage image gallery smaller so that you can see more of what’s below.

3. Change “The Spring Capsule” section to men’s only.

4. Figure out how to make the white spacing more balanced on the homepage.

5. Try to reduce the wording of the services.

Through user testing, I saw how white space is used to focus the user's attention on specific sections of a website. There also needs to be enough space between words, icons, and even within buttons to make them easier to tap. Negative space between lines of text in paragraphs and within words is also important for readability and easy comprehension.

I also learned the importance of containers to make sure users can see everything on a website on different devices. For example, for a 1280px width screen, I kept the container around 1180px.

I also learned that in order to find innovative solutions we need to spend time uncovering what users actually need instead of being preoccupied with finding solutions without user research.

I put together a prototype from the initial hi-fidelity wireframes in Invision to test out the usability of the website and pinpoint any successes and improvements that could be made. Below are the main challenges users faced and the changes that were made:

1. Make “Quick Access” bigger and more noticeable. One option is to make the white space around the words take up the entire bottom section of the product photo and lower the opacity.

2. Make the 1st homepage image gallery smaller so that you can see more of what’s below.

3. Change “The Spring Capsule” section to men’s only.

4. Figure out how to make the white spacing more balanced on the homepage.

5. Try to reduce the wording of the services.

Through user testing, I saw how white space is used to focus the user's attention on specific sections of a website. There also needs to be enough space between words, icons, and even within buttons to make them easier to tap. Negative space between lines of text in paragraphs and within words is also important for readability and easy comprehension.

I also learned the importance of containers to make sure users can see everything on a website on different devices. For example, for a 1280px width screen, I kept the container around 1180px.

I also learned that in order to find innovative solutions we need to spend time uncovering what users actually need instead of being preoccupied with finding solutions without user research.

I put together a prototype from the initial hi-fidelity wireframes in Invision to test out the usability of the website and pinpoint any successes and improvements that could be made. Below are the main challenges users faced and the changes that were made:

1. Make “Quick Access” bigger and more noticeable. One option is to make the white space around the words take up the entire bottom section of the product photo and lower the opacity.

2. Make the 1st homepage image gallery smaller so that you can see more of what’s below.

3. Change “The Spring Capsule” section to men’s only.

4. Figure out how to make the white spacing more balanced on the homepage.

5. Try to reduce the wording of the services.

Through user testing, I saw how white space is used to focus the user's attention on specific sections of a website. There also needs to be enough space between words, icons, and even within buttons to make them easier to tap. Negative space between lines of text in paragraphs and within words is also important for readability and easy comprehension.

I also learned the importance of containers to make sure users can see everything on a website on different devices. For example, for a 1280px width screen, I kept the container around 1180px.

I also learned that in order to find innovative solutions we need to spend time uncovering what users actually need instead of being preoccupied with finding solutions without user research.

I put together a prototype from the initial hi-fidelity wireframes in Invision to test out the usability of the website and pinpoint any successes and improvements that could be made. Below are the main challenges users faced and the changes that were made:

1. Make “Quick Access” bigger and more noticeable. One option is to make the white space around the words take up the entire bottom section of the product photo and lower the opacity.

2. Make the 1st homepage image gallery smaller so that you can see more of what’s below.

3. Change “The Spring Capsule” section to men’s only.

4. Figure out how to make the white spacing more balanced on the homepage.

5. Try to reduce the wording of the services.

Through user testing, I saw how white space is used to focus the user's attention on specific sections of a website. There also needs to be enough space between words, icons, and even within buttons to make them easier to tap. Negative space between lines of text in paragraphs and within words is also important for readability and easy comprehension.

I also learned the importance of containers to make sure users can see everything on a website on different devices. For example, for a 1280px width screen, I kept the container around 1180px.

I also learned that in order to find innovative solutions we need to spend time uncovering what users actually need instead of being preoccupied with finding solutions without user research.

VIEW FINAL PROTOTYPE

Let's work together -

grayspeckdesign@gmail.com

Find me here -