Mix and Match for Fashion Fun!
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:
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.
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:
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."
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.
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.
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.
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.
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.)
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.
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.
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.
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.
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.)
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:
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:
View Final PrototypeNow 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.
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.
.jpg)
