MIRROR
Role : To create a new branding website for Mirror
Project Timeline : 2 Weeks
Project Overview
Mirror is a chain clothing store with clothing for everyone in a wide variety of styles. They wanted to take their business online since their only online presence was an outdated website with only locations, promotions and a bit of background about the company. To go along with their brand new responsive website where they can sell their products, they decided to not keep any of their original branding and also requested have a new logo and brand for this 21st century refresh.
Challenges Solutions
Mirror has a very outdated website with only information
about the company.
Mirror is looking to change their look and style to better represent their brand image.
Mirror is losing their existing customers; if a customer
can’t find their size in-store, they are ordering clothing
online from other stores.
Design a new logo to attract all types of people and to represent the brand image.
Design a responsive e-commerce website that is easy to use and accessible from different devices.
Offer a convenient and noteworthy experience for Shopping
RESEARCH
In order to gain a better understanding of Mirrors users, I conducted market research, user interviews and assessed competitor offerings. My Goal was to step into customer’s shoe and see what are their needs from a brand like Mirror.
Market Research
To gain a better understanding of the current market, I conducted some market research and came to find that mobile shopping is getting bigger with the rise in shopping via social media and a majority of new online shoppers fall within the 23-35 year old age range.
Competitive Analysis
I took a look at what other similar clothing stores were doing with their online presence and found that a lot of the more appealing websites had clean and simple interfaces with vibrant, high-quality images. Some of the brand colors were used in UI designs throughout, but ultimately it appeared that the simpler the designs, the better the products stood out.
User Interviews
In order to get more qualitative data to supplement my online survey, I conducted one-on-one interviews with three survey respondents. From these conversations, I learned that filtering and sorting items by size was important and that having customer reviews and images available directly on the website helped shoppers decide if they would ultimately buy a product.
Empathy Map
Insights:
1. Doing- Customer wants packages to be delivered on time.
2. Seeing- The quality of product matters to customers.
3. Hearing- User wants to get good deals and free shipping.
4. Pains-Customer wants to avoid unnecessary fees.
5. Gains- Customer wants smart search results to get in and out faster.
6. Thinking & Feeling- The customer doesn’t want to spend too much.
Key Takeaways
After Analyzing Mirror’s competitors I was more clear as to what to design and when speaking with Online Shoppers I got to know what problems they face and what are their expectations. I decided to focus on incorporating those aspects in my design.
DEFINE AND IDEATE
To begin defining the problem, I developed a persona, discovered some useful product features, built a sitemap, and created a user flow and Task Flows.
Persona
Now that I have gained a better understanding of Mirror's users, I created persona that I can reference and focus my future designs on.
Project Goals
I combined the business goal that the brand wants to achieve, the user’s goal that we found out from the research, and the technical considerations.
Featured Road map
I brainstormed solutions to meet user’s needs or to achieve the mutual goals from the project goals. These features are prioritized in the order of necessity to define.
Site Map
I brainstormed solutions to meet user’s needs or to achieve the mutual goals from the project goals. These features are prioritized in the order of necessity to define.
Task Flow
I made a task flow to identify how user(persona) will follow to achieve a main task on our website
User Flow
I made a user flow that shows how a user(persona) could achieve each task with two different scenarios.
User Flow
.
Key Takeaways
Creating a persona helped me empathize with users in order to better formulate a solution to their problems. I could then contribute these solutions to my potential website features, and begin working on my ideas for the design through wire framing
BRANDING AND UI
I focused on creating branding and UI elements for the final visual design and created moodboard and style guide.
Mood Board
Mirror is all about being inclusive and inviting. From that, I collected some imagery I was drawn to on Pinterest that I thought evoked these feelings and found that more muted colors and simple, easy to read type faces made the most sense for this brand.
Style Guide
Once the wireframes were created it was then time to work on visuals of the Mirror brand and make style guide. The re-branding of Mirror was done to be more modern, luxurious, and inviting. The logo, typography, color palette, icons,button options and imagery was worked out.
Key Takeaways
The final design helped me consider how to build a e-commerce website to reform a brand. I also learned how to keep consistency between different pages of a website, in order to build the whole visual. Practicing my responsive design skills gave a lot of insight on how to display content on different screen sizes..
USABILITY TEST
After forming a clear picture of the site structure and flow between pages, I was ready to test for usability with my prototype.Once the interactive prototype was designed, I conducted usability testing to study how people respond and interact with the design and made affinity map which will shows the feedback given by four different users.
Wireframes
I created low-fidelity wireframes with three pages; homepage, product list and product page. To make a better understating about the wireframes, I added annotations to explain about each element.
I created wireframes in all three formats to make sure user can access our website using different devices desktop, tablet and mobile.
Responsive Design
Once the branding and style were completed, I polished the low-fidelity responsive pages with desktop, Tablet and Mobile versions.
I Created final prototype with desktop screens to see how users will navigate on Mirror’s Website
Affinity Map
Test Goals: To see how users react to the design of Mirror Prototype.
01 To spot the elements on the website that create frustration or confusion to the user while they perform the required task.
02 To examine how much time does the user take complete the task.
03 To observe where the user is able to predict the upcoming step while purchasing a specific product.
04 Individual data points gathered were categorized as seen in the image. Based on the insights gathered from the affinity map, the highest priority revisions and prototypes were created on the website.
Key Takeaways
Testing with my wire frames gave me the flexibility to quickly incorporate any changes needed to the design. I learned how to remotely conduct a usability test and got more comfortable with letting participants lead the way after giving them tasks. The affinity map helped me summarize their thoughts into one space, and further guided me on how to improve my design.
NEXT STEPS
REFLECTION
Design more Pages & more Filtering
This project was my very first UX design project and I learned A LOT! I had a lot of fun figuring out how to take the user feedback I gathered and translate that into these designs.
If I were to further this project in the future, I would be really interested in designing some additional pages and do some more work on coming up with creative solutions to filter products in an inclusive way for folks to find what they're truly looking for without the constraints of gender classifications.
View Next Case Study
Pan am Airlines
Providing an elevated booking experience to a beloved brand.
Spotify
Adding more features to keep music listeners connected
Heem
Augmented Reality for Interior Design