Responsive eCommerce website for a clothing brand
Mirror, started back in 1994, believes in making good quality but affordable clothing accessible to everyone. They’re a brick-and-mortar business with a global chain of 400 stores around the world that provide different styles of clothing for everyone.
To keep up with the age of digital transformation, they decided to invest in an online store.
The aim of this project was to design a responsive e-commerce website that is easy to use for Mirror. They also needed a logo for the company that is modern and neutral enough to attract all types of people and styles.
ROLE & DURATION
UX Research, UX/UI Design | 4 Weeks
Increasing demand for online shopping has affected the traditional method of buying clothing from physical retailers which led to closing down many retail stores.
Also, the shutdown due to Covid19 proved that lack of an online store means missing many opportunities.
Learning more about users
The first step for this project was to discover and learn more about users. Therefore, I started my design process by conducting primary research.
I conducted user research through 1-on-1 interviews with 5 users to identify their needs and pain points while shopping for clothing online. I tried to cover participants from each of the provisional personas defined. I gathered as much as I could from the end-users to understand the challenges they face.
The Young Professional
I find reviews extremely helpful. I always read other shopper's experiences about the size and fit before making a purchase.
The Bargain Hunter
I am always comparing prices. I think before purchase and would prefer free shipping and returns.
The Trend Follower
I like to see similar items recommendation based on my shopping history and searched items because it helps me to find the items that I like easily.
Identifying the Key competitors and evaluating their strategies to determine their strengths and weaknesses helped me find some opportunity areas for our product and which threats should be mitigated
Fig: Competitive Analysis to identify best practices and opportunity areas.
After conducting user interviews and competitive analysis I came up with valuable data:
Reliable and complete product information is crucial. Also, users would like to see products from all angles.
Fit can be the difference between a good experience or a bad one and comprehensive customer reviews about "fit" can help users to choose the right size.
Product recommendations based on their shopping history can help users to have a more convenient shopping experience.
Free shipping and flexible return policies are necessary. The worst-case scenario is a bad fit + bad return policy.
Insights for Innovation
After conducting user interviews, competitive analysis, and analyzing the gathered data, I was able to categorize the insights into these 3 categories:
Through interface design and/or service delivery, the user desires to be extremely confident about the size and quality of the product before buying the product online
Time-saving and easy to use. The user wants to receive the right amount of information without feeling overwhelmed
Being able to view a variety of options, and place an order seamlessly is what attracts the user to the brand
After getting insights from user research I had a clear understanding of who my target user would be to create a persona. The aim was to help me understand the experiences of users within a broader context — physical, social, and emotional. It also helped me to better ‘define’ what the user's needs are in order to build the desired product.
Creating a user persona
By synthesizing data from the research debriefs and 1-1 interviews, I created a fictional but realistic representation of the target user group and I referred to her throughout the entire product development process. Emily is a millennial and wants to express her individuality through fashion and she is more of a conscious shopper.
Identifying & Aligning User Goals with Business Goals
After interviewing potential users and competitive analysis, I aligned their needs with Mirror’s business goals to develop a common understanding, find compromises, and formulate user goals. This helped me gain full clarity and aligned all parties involved before making feature decisions.
Evaluate the Information -Card Sorting
After identifying the major features of the site, I set out to make decisions on the organization and navigation on the site. To dig a bit deeper, I turned to OptimalSort for an open card sorting study. Users in Mirror’s target demographic were provided 30 cards containing various clothing items to categorize.
Most of the participants ended up sorting the clothes by type (tops, bottoms, accessories, ...) with some difference in names.
One person considered sorting items by occasion, but when asked about finding items she mentioned that she prefers to have both sortings in type and style.
Based on the result all the items will be categorized by type of clothing on Mirror’s website. Also, sorting by occasion will be included to cover both options.
After the card sorting insights, I roughed out a site map to help me focus on the users’ mental model of the site. The frame of reference is always “what does the user need? What will make this process easier and more pleasurable for them?”
Creating Task Flows helped visualize how Emily, and eventually the target user audience, might interact with the website. The idea for the task flow was to map the happy path for the task of buying a new sundress.
It's All in the Flows
The user flows were an opportunity to go deeper into the user needs. It helped me understand how might users interact with the website to complete various tasks based on different scenarios. I created three different scenarios based on the research result and also by considering Emily and her needs.
Iterate, Iterate, Iterate
At this point in the design process, I tried to emphasize priorities that arose from the user research and the client brief keeping in mind the product development roadmap: a clean and intuitive website with options to see product reviews, multiple filters, style suggestions, and big images that show product details. I first began with sketches to get rough ideas on paper before diving into the details.
Low-fidelity homepage wireframes
To make the website accessible to users, I created a responsive webpage for Mirror by adapting it to different screen sizes - desktop, tablet, and mobile. With the user in mind, designing for different screen sizes helped retain the consistency of the pages and created a better user experience.
Product Page Wireframes
Desktop HD: 1440 px X 1024 px
Tablet: 834 px X 1194 px
iPhone 8: 375 px X 812 px
Once the wireframes were created it was then time to work on visuals. The re-branding of Mirror was done to be more modern, minimal, luxurious, and inviting. I wanted Mirror to feel fashion-forward without alienating the mass market. Keeping these brand attributes in mind, I defined/designed the small visual parts, to help build the large structures. I started by creating a logo and then brand style tile in order to outline the color palette and typeface.
Then I defined the UI elements such as icons, spacing, navigation patterns, grids, and other similar elements for the Mirror Brand. Mirror Design System was built to accommodate scalability, so components can work well alongside each other, at the same time, render well on various device resolutions.
High-fidelity Wireframes and Prototype
With Mirror’s branding established, I designed high-fidelity mockups of Mirror’s homepage, category page, product details page, and shopping bag page. Then, I created a prototype using Figma to allow participants to interact with a functional prototype during usability testing.
Your friend’s birthday is in two weeks and you want to buy a gift for her. You’ve been shopping with Mirror before and want to explore the dress category on the website to see if you can find a one that you like for her.
Sign in to your account and then explore the dresses category.
Locate "Floral Mini Dress" and add it to your bag in size 2 and proceed to checkout.
High-fidelity Responsive Homepage
Once the interactive prototype was designed, I conducted usability testing to study how people respond and interact with the design. These are the test goals:
Determine how easy it is for users to complete basic tasks the first time they come across the design
Identify features of the site that create confusion, difficulty, or frustration for the user
Determine ways to improve the website for more optimal user experience
What Did I Learn?
The project resulted in a responsive eCommerce website with a new logo and branding that is relevant in today’s marketplace. The website has easy navigation, feature prioritization, and content organization. Also, users can browse through all products and filter them by size, color, style, and fabric.
The research will act as a foundation to build upon for future iterations - getting closer to users' needs.
Simplicity is strength. As a designer, we are often lured by attractive, trendy, and out of the box designs. But, We must always remember the ‘why’. The primary goal is to understand the user, their problems, and then come up with a design that solves it.
A UX Designer should consider marketing and business aspects as he/she works on design as well.
More research and analytics would uncover additional pain points and would lead us to make better design decisions. Also, creating multiple user and task flows, creating multiple paths in the prototype, and conducting a second round of usability test using the updated prototype.