Lessons learned

During the course of this project, we gained valuable insights and knowledge that have greatly contributed to our growth as UX professionals. Here are some key lessons I learned:

We discovered the value of prototyping and iterative design. Creating interactive prototypes allowed us to validate design ideas.
Our case study reinforced the significance of effective collaboration and clear communication among team members.
Understanding our target users' needs, pain points, and expectations played a crucial role in shaping a successful user interface.
We witnessed how user-centric design By conducting user research and usability testing, we will improve the overall user experience.

Future goals and opportunities

Building on the knowledge and experiences gained from this project, we are excited to pursue the following goals and explore new opportunities:

We aim to improve our search method by uploading pictures and integrating AI assistance to make the user experience better by giving more specific and personalized results.
We would like to design and deploy virtual try by AR/VR.

Usability & Iteration

Using our ideation process, we created several different home pages and shows 3 version of them here. After testing and iterating, we chose Versions 2 and 3. But, based on the usability test showing that users do their tasks easier in version 3. We chose design number 3 as the final design for further development.

Menu Iteration

It was a big challenge to make categories that clearly show the offering products. Finally, we divided products based on occasions and clothing types. Also, we consider a searching method, so users will be able to upload pictures of their favorite styles from their devices to identify key elements, patterns, and colors in the uploaded images.

After Card sorting for final classification, we did many usability tests, so based on user experience, we changed and defined all categories and subcategories.

Size page Iteration

We had an iteration process in order to custom-make each garment to the user's unique measurements and specifications with a step-by-step AI measurement experience and high-quality customized clothes. Also, for users who are still not comfortable using the new digital process, we consider a video guide to do their measuring more accurate. In this way, we used new technologies to give a unique fitting experience to our users.

View Full Desktop Figma Prototype

View Full Mobile Figma Prototype

User's Pain Points:

Problem Solving:

1-Lack of online shops that carry customizable products with a fast and easy flow

2-Lack of awareness about the design and final view of the product after customizing

3-Returning clothes because of fit and quality problems

4-Difficulty in finding the desired product that they are looking for

5-limited number of sustainable custom clothing businesses

5-Highlighting the sustainable approach of the brand

4-Image Upload searching

3-Perfect Fit and Consistent Quality

2-Real-Time Visualization

1-Extensive Customization Options with Tech

Goals

Improve Customer Online Shopping Experience: Transform online cloth shopping with customization options into an online platform to create a unique and easy experience based on the user’s specific preferences.

Proper Searching Methodology: Create clear categories and filters to lead the users to find their desired product.
Highlight fit guarantee and measuring options: Utilize new technology to analyze data and assure users that their product will fit them perfectly.
Transparency in sustainability features of the brand: Provide clear view of different aspects of our sustainability in a fashion industry.

Challenges

How to encourage customers to buy customized clothes online
How to demonstrate the perfect fit with new technology
How to help customers find their desired clothes online
How to encourage users to buy sustainable products and educate people who don't know about them

Users and Audience

This Conceptual Project was created at UX-Land Online School as part of a project focused on User Experience and User Interface:

2- Interview and Affinity Diagram

Based on the results of the survey, we found our potential users to interview. This gave us the confidence to select the right users to ask open-ended questions and get more details about customization. We interviewed 14 people based on their experiences and challenges to take a deeper dive in areas where we did not have a clear direction for the Custom Clothing website.

We wanted to figure out:

How do people do their shopping and customize clothes through online platforms?
How do fashion enthusiasts address the needs of those who seek customizable options?
What challenges have users encountered when buying clothes online in the past?

After our interview, we grouped and categorized the data into an Affinity Diagram which enabled us to have a clearer understanding of the user experience.

What we found out about users:

Challenges: Size, fit, quality
Needs: Visual previews, efficient search and filtering, customer reviews, user-friendly navigation, formal and special occasions, and time-saving features.
Priorities: Price, fabric, color, design and style

3- Competitive Analysis

We also performed the competitive analysis to discover what is already offered by similar stores, and what the gap is. After analyzing 8 similar websites in features, and workflows, got valuable insights to develop a UX strategy to enhance a product's user experience, business value and information architecture. The important thing about these websites to consider is a clear and vast classification or filtering to find the exact product. Four of the 8 are highlighted below.

CustomFitz

Sustainable Custom Clothing Website

PROJECT OVERVIEW

"CustomFitz" is an e-commerce brand with a sustainable approach, offering a wide range of high-quality, customizable clothes for both women and men. Our unique customization features allow these clothes to be tailored to your exact preferences. As one of the few brands in the world embracing digital innovation, we provide a distinct and seamless online shopping experience.

Tools

Team

My Role

Timeline

Figma, Adobe Suits, Primer Pro

Google docs, Zoom

Group of 4

UX/UI Designer

12 weeks, Part Time

The Most Important Results & Challenges

Most of the users usually have size and fitting problems.

Users are often disappointed when they can't see the final design visualization.

The majority of users consider quality to be their main concern.

PROCESS

Our 12-week design sprint consisted of 4 phases:
Note: There is no doubt that iteration is necessary during all phases.

DISCOVER

Research Methodology

We performed comprehensive user research and engaged with individuals to understand their clothing shopping preferences, challenges, motivations, and interest in clothing and customization options. This deeper understanding of our users will guide us in making our final product more usable, accessible, and user-friendly.

1- Survey

During the user research and empathizing process, we asked 72 people about their challenges in the online buying and customizing process. We questioned their shopping method, sex, and interest in customizing. From the 11 questions in our survey, we showed some of them with the results that we got.

88.9% of responses show that lots of users do their shopping online.
87.1% of potential users are female.
81.9% of users would like to customize their clothes online.

59.1% of users care about sustainable technologies and products.
72.2% of users are eager to customize clothing online for a unique style and design.

Top Takeaway

DEFINE

DEVELOP

Site Map

The development of the site map was based on the findings from the Survey, Interview and Competitive Analysis. To organize the pages, sections, and contents and specify how they are interconnected, we follow a Card Sorting process with our potential users and based on that we created the following diagram as a part of Information Architecture, showing the structure and hierarchy of our website.

DESIGN

Mid-Fidelity Wireframes

Sketches and Low Fidelity Wireframes

Based on the information we have received during our research, we started to design with hand sketching to map out our ideas, which helped us in the early stages of the design to go forward and have better communication with the team. Then we created low-fidelity wireframes on Figma to map out page layouts design vision. The wireframes went through a couple of rounds of iteration before the final content was developed.

UI Kit & Mood Board

UI Design Direction: For designing high-fidelity interfaces, we defined a design system consisting of colors, fonts, and dimensions of elements that should be consistent on all screens. As a Sustainable Custom Clothing project, our UI kit and mood board contain all the images, fonts, features, and UI elements that have inspired us to find out how the website looks and is presented to the user.

TESTING

Customization Iteration

We tried to show the Extensive Customization with Tech in different iterations. The Website will offer intuitive customization tools, allowing users to modify suggested clothing items according to their preferences. Users can customize elements such as color, pattern, fabric, neckline, sleeve length, and more to create a unique and personalized design based on their body shape and their size. Besides, we developed a Real-Time Visualization method to satisfy the need for users to see their final designs.

A-B Testing

After multiple versions of Mid-Fidelity, we made 2 versions of the High-Fidelity prototype and performed A/B testing. We then incorporated feedback and recommendations into our final prototype.

High Fidelity Prototype

Take a look at our final high-fidelity designs, complete with colors and images! The final high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after usability studies. Usability testing insights were used to update the wireframes to address the points of frustration, confusion, and hesitation with added features.