FOREVER FASHION
E-Commerce | Web Design
Role: UX Research, UX/UI Designer
Tools: Figma
Project Overview
Challenge
Forever Fashion is an online digital marketplace where customers can select from a variety of in-store and online clothing brands, customize their list of style preferences and shop with ease. It allows users to personalize their shopping experience by creating a single space, where customers can search for a particular style and see results from all of their favourite brands. Gone are the days of switching between multiple tabs trying to figure out which dress you should wear to your ex's weddings. With Forever Fashion's "compare" feature users are able to compare styles from all their favourite brands and make the best purchaseThink of Netflix but for clothes.
A large percentage of online shoppers are loyal to at least 3 brands and it takes the average online shopper about 45 mins to decide what to buy. My goal is to reduce this time, by creating a seamless digital platform where users can personalize their shopping experience.
DESIGN PROCESS
Phase 1: Discovery
User Interviews
Qualitative research
10 Participants
The first step I took to solve this problem was to conduct user interviews. I chose a qualitative approach because it gave me the freedom to ask open-end questions. This way I am able to understand users' pain points, motivations, and behaviours toward online shopping.
n total, I conducted 10 interviews, 7 in-person and 3 virtually. During this process, I was most curious about people's motivations to shop online rather than in-person shopping.
Main Insights:
- Major pain points for users included poor sizing and difficult returns
- In terms of behaviour, most users expressed a fondness for shopping or browsing through multiple sites. Their motivation behind this was that "it is simply convenient"
- Overall attitudes towards online shopping were positive, with 75% positive participants and 25% neutral participantsOther: " I'd like to see similar options when I select an item that is unavailable.
Based on these insights I incorporated functionalities into my design that presented users with similar options whenever they selected an item that is unavailable. I also add a "what's my size" feature which analyzes brand sizes and compares them to one another. For example, this feature would advise that if you are a size 7 at H&M you'd be a size 10 at ZARA
Phase 2: Define
Persona
Qualitative research
10 Participants
Based on the user interviews I created 2 personas and referred to them through the entire design process. These personas are a combination of user insights and participant demographics
Phase 3: Ideation & Prototyping
Next, I created the information architecture (IA). I started by doing a little bit of research on retail brands and their site maps. I was particularly interested in how products were categorized and displayed on retail websites. I chose this approach because it gave me insights into industry standards, this way I am able to provide a service that users would be familiar with, but also improve on those services as well.Once I was satisfied with the categories in the IA, I used card sorting to further organize and improve the structure of the site.
Before I start designing, I create user flows to get a better feel of the product and determine what potential issues the user may have navigating through the site
I usually start the design process with low-fidelity wireframes. By doing this I am I iterate through many design options quickly. My design choices were influenced by the user interviews and the information architecture. Since the website would be heavy with a lot of products, I decided to go for a simple design layout that showcased items well, and also incorporated important features of the site, such as filters, and display tabs.
Once I am satisfied with my sketches, I begin creating my wireframes. For this project, I used Figma to create high-fidelity wireframes. This step is very helpful for me because it allows me to focus on the content of the pages and see how and where things should be placed.
Once I am satisfied with my sketches, I begin creating my wireframes. For this project, I used Figma to create high-fidelity wireframes. This step is very helpful for me because it allows me to focus on the content of the pages and see how and where things should be placed.
I developed this prototype using Figma, my aim was to create an easy-to-use and intuitive platform. I anticipated the user's needs and wants by creating preview sections, filter tabs, and a comparison feature.
Phase 4: Testing
Usability Testing
Once the wireframes were complete I started conducting user testing. My target subjects were adults between the ages of
18-35. The tests were moderated virtually with 3 participants. My goal was to see how users interacted with the site and whether features were intuitive to use.
Insights:
- Increase font size
- A quick preview page would be useful
- Optimize for mobile devices " Sometimes I like window shopping on my phone "
Reflection
What I learned?
This project taught me that user testing is very important because not all designs are intuitive to the users. Sizing is a big issue with online shopping because sizes are not automatically converted or they are not the same for all stores. Users like to see more item suggestions when certain items are not available.Accessibility is very important.
.jpg)
