OVERVIEW
ROLE
- Sole UX researcher & UX/UI desinger
- Design logo and e-commerce website
- Maintain brands identity by keeping it modern, fresh, clean and clear.
- Usable from all devices
- Met weekly with a mentor to go over work
- Duration 8 weeks
WHAT IS MIRROR?
Mirror started in 1994 as a clothing store targeting a budget-minded audience who were looking for low-cost clothing for any occasion. Their main goal is to make any type of clothing accessible to everyone. They believe clothing doesn’t have to be expensive and last forever--that we should be able to change styles as we need and please.
PROBLEM
Mirror has not kept up with the growing e-commerce market and have never had a web store.
SOLUTION
A modern and full featured e-commerce website must be created with a great user experience that can compete with the major players in this already crowded space.
PROCESS
RESEARCH
The goal of the research phase was to discover trends and patterns across various e-commerce sites, as well as to discover pros and cons of in-store vs online shopping to discover new ways to improve the online shopping experience.
COMPETITIVE ANALYSIS
The first step of the research phase was to determine which big players in the space were similar to Mirror in feeling or functionality. I explored the strengths and weaknesses to find ways to make the Mirror website encapsulate the best of what’s already utilized in the marketplace.
Strengths
- Big variety of clothing for men, women and children
- Affordable
- Size inclusive
- Show savings in checkout
Weaknesses
- Homepage overwhelming
- Quality can be hit or miss
- Shipping only free $50 and up
Strengths
- Trendy
- Good selection of clothing for all genders
- Typeface clean and sleek
Weaknesses
- Homepage hard to navigate
- Photos of products all over and different sizes
Strengths
- Easy Navigation
- Very good use of whitespace
- Gives user recommendations when adding to bag
Weaknesses
- Homepage images too big
- Have to scroll all the way back to change filters
Strengths
- Easy Navigation
- Very good use of whitespace
- Gives user recommendations when adding to bag
Weaknesses
- Homepage images too big
- Have to scroll all the way back to change filters
GOALS
After the competitive analysis was completed, I compared and contrasted the goals for the user, business, as well as technical considerations in order to determine the optimal solution for each.
USER PERSONA
After completeing the research of the category space, I used this information to create a persona for a fictional potential user of the Mirror site.
information architect
Content was collected by using a method called card sorting to see how prospective users categorize information. Once this information was gathered I then created a site map and sketched some rough drafts for the homepage.
Cards used
Card sorting was conducted through the Optimal Workshop online. Participants were asksed to categorize 20 different cards into categories of their liking. Total of 10 participants.
takeaways
I was really surprised by the results. I had initially anticipated organizing the items by type. Specifically by tops, bottoms, outerwear, etc. But after analyzing the results of the study I realized that it may be better to organize the results more by style -- formal, casual, athletic.
SITE MAP
SKETCHES
interaction design
The goal of the interaction phase was to get into the heads of potential users and create a framework for the best user flow and needed pages.
TASK FLOW
USER FLOW
WIREFRAMES
Visual Design
The research was all brought together in this phase to create the brand identity. From logo to the UI kit, each of these pieces are ultimately brought together for the final design.
LOGO
MIRROR UI KIT
USABILITY TESTING
TEST OBJECTIVES
- Test overall functionality of prototype
- Test efficiency of CTA’s
- Test to see if user can complete a shopping task
TEST SUBJECT
- High fidelity prototype of Mirror
Methodology
- In person testing with audio recording
Participants
- 3-6 participants
- Male & Female
- Ages 22-50
Recruiting Plan
- All participants are family, friends and co-workers.
- A few like to shop often and others every once and awhile.
OVERALL IMPRESSION
- All participants found Mirror to be clean and clear.
- All participants liked the website as a whole.
- 4 out of 5 participants liked the color scheme.
- All participants were able to find and identify things quickly.
FINAL THOUGHTS
OUTCOME
The goal of the project, to create a modern and sleek e-commerce website for Mirror, was achieved. The final usability testing shows that 100% of the users tested were able to navigate the website seamlessly in a variety of ways to land on the same product. This shows that the research conducted was utilized to create a welcoming and user-friendly site. The final result is clean and consistent. It reflects the brands goals and brings this company into the modern e-commerce age.
next steps
There are a few things that could be added that could take this site to the next level. A hover feature to zoom in on clothing on the product page would be a great next feature. While the current design achieves its goal of being gender-neutral, a more masculine design for the mens side of the site could also be added. Finally, some users interviewed expressed a desire for a ‘virtual try-on’ similar to what many e-commerce glasses stores offer. This could be a great goal for the company to implement and set themselves apart from the e-commerce giants.
key takeaways
The key takeaway from this project was the importance of the research phase. As I initially approached this project I felt that it was straightforward and that the research would provide little insight beyond competitor analysis. I found however that card sorting and profile creation had major impacts on the overall architecture of the site.