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.
Huge opportunity for online sales
Customers demand an online shopping option
Getting rid of the remaining inventory in their warehouses
GOALS AND OBJECTIVES
Design a logo for the company that is modern and neutral enough to attract all types of people and styles.
Design a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style, and others.
ROLE UX Research, Product Design, UX/UI Design
TOOLS Sketch | InVision | Zeplin
TIMELINE 4 Weeks
How might we create an online presence with a fresh brand identity and an online store for Mirror while meeting both, the business and the user's goals?
Insights for Innovation
User and Business Goals
Product Dev - Feature Roadmap
User and Task Flows
Low and Mid - Fidelity Wireframes
High - Fidelity Wireframes
Prototyping in InVision
Handoff to Developers
THE DESIGN PROCESS
Repeat the process - Ideate, Prototype, and Test
Identify the target users and learn about their experience while shopping online.
Understand preferred shopping modality of users, i.e., what do they prefer to shop on - their phones, desktop, or tablets? Why?
Learn about the competitors and what they do well or can do better in providing a great shopping experience
Understand the technology (Augmented and Virtual Reality) trends and user demands to make the product future proof.
Customer Interviews and Contextual Inquiry:
User research was conducted through 1-on-1 interviews with 5 users to learn about their experiences and patterns they follow while shopping for clothing items online. I tried to cover participants from five provisional personas defined previously. I gathered as much as I could from the end-users to gain knowledge about their goals, frustrations, motivations, and analyze the scope improvement by empathizing with them.
THE YOUNG PROFESSIONAL
I need to know the model's size specifications. What I also prefer is a liberal return and shipping policy.
THE TRENDY MILLENNIAL
I hate going to the stores to shop. I get more options online. I want the convenience to shop from anywhere and anytime.
I always check for reviews. They usually have someone sharing their experience about the size and its fit.
Competitive Analysis and study of trends online:
Identifying and analyzing some of the major competitors their products, sales, and marketing strategies helped gain some insight into the industry shopping trends.
INSIGHTS FOR INNOVATION
After conducting user interviews, contextual inquiry and analyzing the gathered data, three common insights emerged.
The luxury of being able to view a variety of options at anytime-anyplace, and place an order seamlessly is what attracts the user to the brand
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
The choice of having faster and/or cheaper means of product delivery and product return affects the user’s decision of buying from the specific brand
Based on the secondary and primary research findings, the results were used to create several deliverables to better understand and empathize with our users.
The aim was to help us understand the experiences of users within a broader context — physical, social and emotional. The goal was to be able to better ‘define’ what their needs are in order to build the desired product.
To better understand the target audience, to create empathy, and to give the user base a more ‘human’ feel, I created a persona. Jessica was more of a conscious shopper.
By synthesizing data from the research debriefs and 1-1 interviews, we created a fictional but realistic representation of the target user group.
To enter into a more human-centered mindset and to organize the research into a coherent vision, an empathy map for Jessica was created.
Based on Jessica's persona, I also created a storyboard, showing how she would enjoy the benefits of shopping from Mirror.
DEFINING THE PRODUCT
IDENTIFYING PROJECT GOALS
Based on the analysis achieved through research and empathizing with our users, the next step was to define the information architecture of the website.
For that, at this point, it was important to re-visit the original design brief to chart out the business goals and user goals gathered from the research. Identify where they overlapped, and where they differed.
Based on all the data gathered and understanding the goals it was now time to hone detailed requirements and prioritize by creating a feature roadmap. Given the time constraints, the product roadmap helped me to prioritize the features that were needed for the MVP.
MUST HAVE FEATURES
NICE TO HAVE FEATURES
FEATURES THAT CAN COME LATER
List of features mapped against the interaction/page
SEARCH AND NAVIGATION
Being an e-commerce website, Mirror would be extremely heavy on information. It was crucial to lay down the overall structure of the website.
Based on the results of the card sorting exercise, a sitemap was created to show the relationship between the content on the website. I broke down the product categories into subcategories, to assist in understanding the filtering criteria.
USER AND TASK FLOWS
Created User Flows and Task Flows helped visualize how Jessica, and eventually the target user audience, might interact with the website to complete various tasks based on different scenarios.
At this point in the design process, I began creating low-fidelity to mid-fidelity wireframes and then responsive wireframes. 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, blogs, multiple filters, and many other features.
Desktop HD: 1440 px X 1024 px
Tablet: 768 px X 1024 px
iPhone 8: 375 px X 667 px
BRANDING AND UI KIT
Once the wireframes were created it was then time to work on visuals on the Mirror brand. The re-branding of Mirror was done to be more modern, luxurious, and inviting. The logo, typography, color palette, and imagery was worked out.
Thereafter, based on the principles of Atomic Design by Brad Frost the idea was to define/design the small, independent - atomic - parts, to help build the large molecular structures.
Defined the UI elements such as icons, spacing, navigation patterns, grids, and other similar elements for the Mirror Brand.