Mix and Match for Fashion Fun!

Creating a Responsive E-commerce Website
Product Design (UX/UI) / Branding

9 weeks - 80+ hours

Tools used:
Miro / Optimalsort / Figma

This project is a fictitious scenario, completed as a part of Designlab's UX Academy.
View Revised Prototype
A global chain retail clothing store for everyone, Mosaic has decided to focus their retail brand into the digital world. They have over 400 stores around the world in 32 countries. Established in 1994, Mirror targets an audience looking for cheap clothing for any occasion (similar to Old Navy and H&M). They would like their clothing to be accessible to everyone and wants their customers be able to change styles as they need and please.
Mosaic currently has an outdated website and don't want to keep anything they have. So they are looking for a fresh start with a new logo, branding, and a responsive e-commerce website where customers can mix and match styles and shop with ease.
Project Goals
Create a Responsive e-commerce website with a new logo and branding kit

01 / Empathize - Exploring & Researching the User's Needs

  • Research Approach
  • Competitive Analysis
  • Customer Interviews
Research Approach

To get a better understanding of the current market and expectations of the potential users, I employed two research methods--competitive analysis and customer interviews. For the competitive analysis, I examined direct and indirect competitors and conducted research on current trends and obstacles as well as future trends of the industry.

The goals for my research process was the following:

  • Understand the online shopping experience for customers at retail ecommerce sites of competitors to recognize patterns and expectations.
  • Identify pain points and unmet needs of customers while shopping online to create a better online shopping experience.
Competitive Analysis

To get a better understanding of the current market and expectations of the potential users, I employed two research methods--competitive analysis and customer interviews. For the competitive analysis, I examined direct and indirect competitors and conducted research on current trends and obstacles as well as future trends of the industry.

Customer Interviews

For this project, I recruited 5 participants who shopped online within the last month. The age of participants ranged of 23 to 32; 4 identified as female and 1 identified as male. Although all frequently shop online, participants varied in clothing shopping habits.

Here are some general insights I observed:

  • All participants shopped for clothing on their desktop or laptop so that they can concentrate and view details carefully. A few did occasionally shop through their phones when they were simply browsing or knew what they were buying.
  • Frequent shoppers love to browse through what's new and the sale section.
  • Some participants look for inspiration on social media for potential outfits.
  • Smart shoppers look around for best price, fit, and material amongst competitors.
  • Participants like to see suggestions and often gets them to browse for a longer period of time and purchase additional items.
  • Participants were concerned about fit, material, price, and manufacturing details.
  • Participants filter out items that are not available in their sizes to expediate browsing.
  • Several participants were very budget conscious and often uses the sort by function to sort by price. One participant point out how she really liked the price range function.

02 / Define - Establishing the User's Needs and Problems

Empathy Map Synthesis

During the interview process, I noticed that patterns were emerging. After I finished interviewing my participants, I synthesized the qualitative data I gathered into an empathy map.

"I look at social media for inspiration when I'm looking for new outfits."
"I try to stick to a
budget whenever I'm shopping"
"I hate it when I have to return my purchase because
it wasn't what I expected"
"I usually run into
problems with the fit so I look through the photos and read reviews carefully."

Persona Development

The participants who were frequent clothing shoppers often checked sales and what's new. They were inspired by what they've seen people wear and were also budget-conscious. From this, I developed our persona to be Emily Rivera, a budget-conscious fashionista. She is a young adult who loves fashion, is active on social media, and has a limited budget because she's just starting off her career and has a number of new expenses she has to juggle.

Meet Emily, the Budget-Conscious Fashionista

How might we make a streamline purchasing experience for a budget-conscious fashionista?

How might we create a better online shopping experience for the budget-conscious fashionista?

03 / Ideate - Creating the Framework

Task Flow

Since I am creating a new e-commerce website, I created a task flow to determine the steps for a person to complete the task of purchasing a clothing item that works within a physical and digital space. This serves as the minimum viable product because the user must be able to purchase a clothing item and everything else serves to augment the user's experience. With this in mind, I created a Feature Roadmap to organize necessary functions to potential considerations for the future.

Information Architecture
Open Card Sort

Before tackling the information architecture for the website, I performed an Open Sort online via Optimalsort. There were a total of 30 cards of different types of clothing items. I gathered 5participants, 4 females and 1 male with an age range of 23 - 35 years old. Most of the participants categorized the cards in the typical e-commerce model with variances on how they named each category. But there was 1 participant who categorized the cards according to occasion, such as workout, summer, comfy, etc.

Site Map

As stated above, mosaic is a retail clothing company that caters to men and women of all ages. While conducting the competitive analysis. I noticed that there were variations on how the homepages were structured. Many defaulted on Women and the user would have to toggle to find the sections for different people. But family-friendly sites had a true homepage where users view items for different people. So for Mosaic, I decided to create a true homepage.

During the research phase, participants who were frequent shoppers would check the New Arrivals and Sales regularly to see what's new and look for bargain finds. So along with the sections for different people, I included a New Arrivals and Sales section. Another observation I made during my research was that frequent shoppers looked for inspiration and wanted help with outfit-building. For this reason, I created a Lookbook feature along with special sizes as some struggled to find the right clothing items for their petite frame.

User Flow

04 / Prototype - Let's make the Design!

  • Sketches & Wireframes
  • Branding & UI Kit
  • Final Design
Sketches & Wireframes

After looking at competitors' sites more carefully again, I put my ideas into sketches. As I noted above, I noticed that some sites have women as its homepage whereas family-friendly sites have a true homepage that shows categories for the whole family. I wanted something that resided between these two types of layouts. During my research, I saw one sit that tried to tackle this by having a dropdown menu below the banners to choose the wanted section. I decided to play with this idea and developed my wireframes with this in mind.

(Note: The original project prompt was with the name Mirror but during the Branding process, I changed the name to be Mosaic so these sketches and wireframes reflect the original project name.)

Mosaic Branding & UI Kit

In the original project brief, the retail company wanted their clothing to be accessible to everyone and give their customers the ability to change styles as they need and please. With my research, I wanted to create an identity where people can mix and match different clothing for their own unique sensibilities, to be on trend, or simply find what they need. After discussing the parameters of the project, I decided to rename the brand to Mosaic. Since this company wanted their clothing to be accessible, I wanted to give it a name that everyone can relate to while also being fun and dynamic. After entertaining a range of names, I chose mosaic.

Initially, I sketched out logos using the "M" in Mirror. But upon research, e-commerce clothing retail companies usually spell out their whole name. Because I knew I wanted to have mosaic shapes, I looked for geometric typefaces that can be abstracted into branding elements. I liked the unique shape of the "s" in the Mostra Nuova typeface and the arcs in the "m" in the All Round Gothic typeface. So I combined these elements and added a dash underneath the o for a whimsical touch. From there, I played around with the mosaic pieces I created while playing around with the logo.

After developing the first style tile, I worked them into the wireframes that I had developed. I liked how the design was down-to-earth, friendly, fun and dynamic. But I wanted the brand to have a fresh and modern look as well. Also the mosaic pieces can get a bit messy, so I wanted a way to structure the elements while looking clean and fun. So I played around with visual texture and then added some punch by switching the color palette from softer pastels to bolder striking colors.

Final Mosaic Style Tile & UI KIT
Final Design
Homepage Features
Homepage Features
  • Toggle Menu - All the content underneath can be changed by switching the view. So the homepage is for everyone but the content underneath is tailored to the target audience.
  • Featured Section + New Arrivals - Mosaic can display the categories they would like to feature along with what's new!
  • Look Books - In my research, frequent shoppers look through the homepage when they are browsing and looking for inspiration. So through different curated look books, users can shop inspired looks!
  • #MosaicLooks - Here users can connect with the online community and look at how other users have worn clothing items through social media integration.
Navigation Features
Navigation Features

The Main Navigation on the desktop is a dropdown menu. The categories that are grouped into different Titles (Featured, Clothing, Accessories, Special Sizes, and Look Book).

Each Category Page has its own Subcategory sections. The user can organize its content with the "Filter", "Sort by", and 2 vs. 8 column view functions. The number of results is presented in the middle so the user can determine if they want to narrow the selection even further.

Product Page & Quick Shop Features
Product Page

Upon my research, I noticed that many of competitors were switching from the typical carousel view to laying out all the photos were it is viewable without clicking each photo. When the photo is clicked, it opens a lightbox for a full screen view to see all the details. So I implemented this into my design.

I also included a dropdown accordion menu to view Product Details, Fabric & Care, Be Inspired (which links to Look Books and Community Looks), and Complete the Look (which includes clothing that Mosaic suggests). Underneath the photos, users can see what other clothing items other users bought when they bought this item.

Below the reviews, users can see other clothing items that are similar to the the product on the page. Usually users read reviews to determine if it is what they want. If it isn't quite right, they can scroll through items that Mosaic determines to be similar.

Quick Shop Function

When the user hovers over the item, an alternative view is shown. The Quick Shop Function is activated when the user clicks on the "+" button and given the option of selecting the size. Upon size selection, the "Add to Cart" button is revealed. When the user, complete the transaction, the Quick Shop pop-up grays out and the button confirms that it has been added to the cart. Also the "Your Bag" icon changes to show it is full with how many items with a pop-up that appears below the top navigation.

05 / Test - It's time to test the Prototype!

Usability Test Plan

I recruited 5 participants for the Usability Test. Three of them were also the research participants when I started this project. I derived my persona, the Budget-Conscious Fashionista, from these participants. So it made sense to invite them back for the Usability Test. I also invited two other participants who were personal connections that fit the persona for Mosaic. The test was administered via Zoom and the participants shared their screen as they ran through the prototype.

Before starting the test, I started with a prompt to thank them, ask them to say their thoughts out loud, and explain the parameters of the prototype. After explaining the scenario, I asked the participant to explain to me what they will be looking for based on the scenario I explained. (The clothing item ready for purchase is the Oversized Alpaca Crew, color Dark Copper, size Small.)

Usability Test Objectives
  • Test participants ease of navigation and experience making a purchase.
  • Test if participants are able to identify and use the quick shop function.
  • Identify any pain points or unmet needs in accomplishing the task at hand
Usability Test Findings

All participants were able to find and purchase the item and they all identified the Quick Shop function and were able to complete a transaction. Each task took about 3-5 minutes to complete and all participants said it was easy to make the purchase.

Here are some insights I observed during the test:

  • 5 out of 5 participants struggled with the subcategory section.

    Two participants did not use the subcategory function and shopped on the category page. One participant zoomed past the subcategory section. Afterwards, when asked about it, she said that she was immediately drawn to the photos and didn't even notice it. The other participant couldn't figure out the right subcategory because she was confused by the pullover category.

    For those who did use the subcategory function, they struggled a little bit with figuring out the right category. They either got it confused with the name of the pullover subcategory or they got it confused with the all subcategory because of the spacing.
  • 4 out of 5 participants wanted to use the filter and sort by functions that were not available. Because they frequently shop online, those were tools they frequently use and expected to work for ease of navigation.
  • 2 out of 5 mentioned wishing they could have seen all the photos available in the quick shop function as well as the colors available.
Priority Revisions

All participants were able to find and purchase the item and they all identified the Quick Shop function and were able to complete a transaction. Each task took about 3-5 minutes to complete and all participants said it was easy to make the purchase.

I compiled these findings into an Affinity Map, where I grouped them by What Worked (Elements that worked, Overall Experience), Main Pain Points in the User Flow (Subcategory, Filter, Sort by, Quick Shop), and Secondary Pain Points that did not related to the User Flow.

Based on my Affinity Map, I made the following improvements by prioritizing user flow issues within a 4-hour time-frame:

  • Improve Subcategory navigation by adding more white space and differentiating the Category title from its subcategories as well as the "View All" option from the subcategory options.
  • Develop Filter and Sort by functions
  • Add Color browsing and additional photo capacity for the Quick Shop function.
View Final Prototype
Next Steps & Take-aways

Now that I have completed the Priority Revisions, I would proceed and test this updated prototype and then hand it off to the Development Team utilizing programs such as Zeplin. Then I would proceed to develop the mobile prototype as it is the new desktop and mobile shopping is the future.

Reflections & Take-aways

It was fun developing an e-commerce site based off of what participants had to say. In marketing and graphic design, many times designs are developed based off of assumptions. Although my research confirmed some of my shopping preferences, it was insightful to notice patterns among participants and learning the details that are valuable to them. But, of course, this doesn't mean that this project was without bias. All the participants who were friends of a similar age group and I already knew most of their shopping habits.

This was my first UX/UI project through Designlab's UX Academy. There were times when I didn't quite understand what I was doing and constantly felt that like there was more that could be done. Looking back now, I am proud of the work that I was able to accomplish these last few months. Very much like work projects, there are time and resource limitations. So as much as I wanted to spend more time to process what I was doing, I'm glad that I was able to successfully complete this project!

Although I wanted to utilize my problem-solving prowess, this project was a great place to start because many people are acquainted with shopping for clothes online and the purpose of this project was to set up a framework that delivers the minimum viable product (purchasing clothing online). Now I am looking forward to tackling more substantive problems and hone my UX skills! I know that many people say done is better than perfect. But I also believe that it is good to be reflective and glean morsels of insight and wisdom from each task we tackle.

Have any questions about this project?
I would love to talk more about it with you!