A UX/UI DESIGNER
Mirror.
BACKGROUND
Mirror is a clothing store established in 1984 and recognized for making clothes for every occasion at affordable prices for everyone in the family!
THE PROBLEM
Their sales have declined for the last 2 years due to not having an online platform.
THE SOLUTION
To discover user’s consumption habits when they buy clothes online and what they enjoy most during the process
so we understand what will increase sales on the online plataform.
PRODUCT TYPE:
Product Design
DURATION:
4 weeks
MY ROLES
-
User Research
-
UX/UI Design
-
Branding
-
Prototyping
-
Usability Testing
TOOL KIT
Design Process
Discover
Define
Ideate
Design
Test
Define.
In this phase, I defined the problem I wanted to address. I used the information gathered in the Discover phase to clearly articulate what needed to be solved, how it needed to be solved and why it was worth solving.
Methods that I used in this phase:
-
​POV + HMWs
-
Personas
-
Journey Map
-
Impactful Ideas Brainstorm
Persona
Based on the information I gathered from my research, I created this persona to help me empathize with potential users.​
Project Goals
Based on the information I gathered from my research, I created this persona to help me empathize with potential users.​
Feature Road Map
Based on my research, I evaluated the most popular product features to develop a roadmap that provides an optimal balance of business value with minimal implementation effort.
Site Map
After deciding on features, I created a site map that reflected how I wanted the information architecture to look.
Design.
I this phase I have developed a set of solutions that not only meet business goals, but also allows the users to reach their desired outcome.
-
Feature Set
-
Story board
-
Site Map
-
User Flows
-
Task flows
-
Low Fidelity Wireframes
-
Responsive Desktop Design
-
Mid-fidelity wireframes
-
Mood Board
-
Component Library
-
Brand Logo
-
Icon Set
User Flow
In this project, I approached the design of the user flows by first conducting a competitive analysis of similar websites to understand how they presented information to users. This helped inform my own design decisions and guided me through the process of developing wireframes. The number of screens required for each flow was determined by thinking through typical user flows and using that information to develop my own designs.
Low Fidelity Wireframes
After analyzing the flows, I focused on creating wireframes that effectively visualized the navigation and information hierarchy of the website. I am still in the process of exploring alternative design solutions, with the goal of providing a content-focused user experience. In my current wireframes, I emphasize efficient navigation by simplifying site architecture and minimizing the number of clicks it takes for users to find what they're looking for.
Branding
After researching the meaning of colors, I created a combination of hues that represent sobriety and elegance. These colors shine on their own and can be combined easily with other tones to create harmony, making them ideal for the brand's products.
Mirror also asked me to redesign its logo and brand identity. I started by sketching a few different options, which I then digitized for review. This included a new color palette for the brand's logo. I also created a brand-style tile.
High Fidelity Prototype
When I finalized the site's design elements, I began creating a high-fidelity prototype. I referred to my research findings while designing the site to ensure that it would flow well for users.
Test.
Using the prototype feature in Figma, I conducted usability testing on a set of task flows with various participants to gather the following information:
- Test and check for pain points.
- Test how easy is for the users to filters products on the web.
- Test the user flow in the design when searching for an item.
​
​
I found that users generally had some little problems completing tasks and detected no major pain points. Minor details were mentioned in regards to the general user interface (UI) such as seeing the number of pages for results on top of the products and not at the button this way it will become more notorious, add a link with the option "add to bag" on the shopping bag page, other users made other suggestions so I decided to prioritize it base on the effort it will take and the importance for the user experience.
Final Design
