This is my first UX/UI project, which taught me a number of skills and methods to apply during the creation of a responsive website. I learned about the Design Process and how important each stage is in order to launch a product that meets the user's needs and expectations by conducting multiple methods of research, organizing the content architecture, and building consistent UI.

Final Thoughts

After prioritizing and making the respective changes to my prototype based on the feedback received, my next steps would be to test the prototype again to validate with the users that the changes made meet their needs and fit what they expect to see on Mirror's website.Subsequently, I will hand this off to the developers or other stakeholders to start building the product where I will assist with any follow-up questions.

Next Steps

During the research process, I found out how important it is for users to have good customer service, find clear information on the website about returning or exchanging products, payment information, purchase history, sizing guide, and so on when making their purchases online. For this reason, I conducted a closed card sort remotely with 4 participants through OptimalSort to classify this type of information into different categories based on how they try to find this information on a website.

Findings

Card Sorting

During this phase, the main objective was to synthesize the findings of my research and define the primary audience for the website. Created: User Persona, Empathy Map, Storyboard, Project Goals, Feature Map, Card Sorting, and Site Map.

To get to know Natalia better, I created an empathy map made of observations and statements from my user interviews. It allowed me to discover common themes within the user data from which insights could be identified.

Empathy Map

Based on the results of my research, I compiled a list of different features that Mirror should include in their e-commerce website, allowing them to prioritize the most important features to achieve high user satisfaction and reach their company's goals.

Feature Roadmap

Based on my research, with a well-rounded understanding of the user’s motivations, needs, and frustrations, I created a primary persona. It's time to meet Natalia!

Persona

Business Goals

Business-User Goals

Business-User-Tech

Now that I had empathized with target users and identified their needs, I needed to define the solution. I created a Venn diagram outlining the different goals between the business, the user, as well as a few technical considerations, to take into account each perspective in order to create a product that meets the needs for everyone.

Technical Considerations

Project Goals

User Goals

After setting up the project goals and organizing the content of Mirror through card sorting, I created a sitemap, based on trends of user responses, to determine the website’s information architecture. This shows the structure of the website and the relationship between each different screen.

Site Map

To quickly synthesize my findings and add a human element to my research through storytelling, I created a storyboard to illustrate how Mirror would fit into Natalia's life and pose as a solution to her online clothing shopping problem.

Storyboard

Define

#4B888B

To better understand Mirror's competitors, I began to identify the strengths and weaknesses of existing online clothing stores. Doing this analysis provided me with more information about Mirror's direct and indirect competitors, which would help me identify opportunities to improve Mirror's product strategy.

Competitive Analysis

Starting with research allows me to deepen my understanding of what users need, what the company offers to meet that need, and what is already established in the apparel shopping market. To ensure that my investigation stayed on track, it was important to create an investigation plan before I dived into the investigation phase. That led me to create a research plan to define my goals and outline the different methodologies I would use during this phase.

Research

Research Goals

Research Methodologies

Empathize

After conducting the competitive analysis, I started with user interviews to help discover common patterns, understand the user's problems, and compile statistics. This allowed me to empathize with their needs and expectations. I conducted 5 interviews (3 females, 2 males) between 20 and 61 years old to ask them about their shopping experiences and habits. All participants were busy professionals who shop for clothes frequently online.

Frustrations

Motivations

Needs

User Interviews

Branding enables relationship-building with users, which can eventually turn them into loyal customers. As part of the rebranding refresh, I started sketching ideas that incorporated attributes alluding to a neutral, simple, professional, and modern feel. Then, I digitized a few shortlisted options examining their legibility at different scales.

Branding

The ideation phase represents a key transitional step from learning about your users and the problem to coming up with solutions. Now, it is time to bring ideas to life and gain a better understanding of how users would be using Mirror and meeting their goals.

After identifying all the needed pages through the sitemap, I created some drafts of hand-drawn wireframes to gather ideas. During this process, I thought about how the layout and content could be structured to satisfy user and business goals.

Sketches

After I designed the logo, I created a Style Tile to communicate the essence of the visual brand for the website (color palette, typography, imagery, and the logo).

Style Tile

A Task flow was created based on the following scenario:
Natalia has a birthday party that will take place in one week. She wants to buy a nice dress that will make her stand out and feel confident at the party.
This task flow show's the most common path for a user from their entry point to the final end goal of purchasing an item.

Task Flow

Ideate

To create the responsive UI Design for the different devices, I started examining the overall aesthetic and visual balance of the website based on the new branding defined for Mirror as well as the wireframes I had created earlier.With that in mind, I started creating high-fidelity wireframes so that users have a consistent experience regardless of what device they're using when interacting with the Mirror website.

Responsive UI Design

To capture the key elements of the design I created a UI Kit, which is a compilation of existing UI elements on the website, that provides references for future design and foments collaboration among the design team.

UI Kit

I created a user flow, to understand how my persona Natalia will navigate through the structure of the site. This user flow shows how she would search for a dress and go through the checkout process. This is the main task that will be performed in my usability test.

User Flow

Once I decided on the visual design direction that best fit Natalia's goals and needs, I created a low fidelity prototype of the desktop site in Figma to illustrate the overall product interface design based on sketches. In addition, I created responsive wireframes for desktop, tablet, and mobile to ensure users have a consistent experience across different devices.

Low Fidelity and Responsive Wireframes

Mirror has decided that it is time to launch an online store to expand its sales and provide its customers with a way to shop effectively and efficiently online. Mirror would like to do a complete rebranding maintaining a clean, professional, and modern style and providing a seamless online shopping experience.

Challenge:

MIRROR is a fictional clothing store targeting an audience looking for affordable yet fashionable clothing for all ages. The company believes that clothing should be modern and cool, in a variety of styles, and at affordable prices for everyone.

Project Scope:

Role:

Create a new brand identity for Mirror and design a responsive e-commerce website, where customers can easily browse and purchase apparel. In this way, Mirror will be able to reach and attract new customers and increase its revenue by addressing the needs of the company and its users as well.

Solution:

Time:

Tools:

Based on the initial wireframes and the Style Tile, I designed high-fidelity prototypes using Figma in order to observe how users interact with the site during usability testing and identify where improvements could be made.

Desktop Prototype

Prototype

As I synthesized findings from our usability testing, I was able to find out where the pain points of the users were stemming from and what could be further improved. I used an affinity map with all the observations I had made. I started by writing all the participant observations made during testing. Then, I grouped them by common patterns that I noticed amongst the participants to draw insights from the information I gathered.

Affinity Map

Users can refine their search using filters such as color, price, and size.

Category Page:

I added a background with the primary accent color (DDCFC2- 10%) to give more emphasis to the Bag summary and the product details. In addition, I reduced the size of the bag summary and product details so they fit on one screen and the user doesn't have to scroll down to see the information.

Checkout Page:

Listening to and observing the participants during the usability test helped me visualize how people in real life would use this website. During this study, all the participants completed the tasks they were asked of, but as they went along they told me about their expectations and how Mirror's website could be improved. As a result of that, I made the corresponding revisions and created the final prototype.

1. I created a transparent gradient effect for the background images and expanded the width:

  2. I reduced the size of the images, which gave me more space to add a few more products

Homepage:

Quick review stars are clickable to take users directly to the customer's review section.

I added a new section with "Related items" to allow users to compare items without going back to the previous page.

Size guide: I included a popup with measurements in inches and centimeters and measuring tips.

Product information and details are clickable now.

Product Page:

Priority Revisions

Test

To validate design decisions, I started by creating a test plan to have a clear plan of how testing would be conducted. I asked 5 participants to test out the prototype's usability to observe how users interact with it and to identify how I could improve the design. The usability plan can be viewed by clicking on the button below.

Mirror

A functional & responsive e-commerce website for a fashion company.