CustomFitz
Sustainable Custom Clothing Adaptive Website
project overview
“CustomFitz” is an e-commerce brand with a sustainable approach that sells a wide range of high-quality customizable clothes for women and men online that can be tailored to their exact preferences with our unique customization features. Our store is one of the few brands in the world adopting digital innovation, providing a distinct and seamless online shopping experience.
Duration:
12 weeks
Team:
Group of 4
Role:
UX/UI designer
Skill:
Qualitative and Quantitative research / Competitive Analysis / low-fidelity Architecture / Low-High Fidelity Design / Usability Testing
Stakeholder Needs
- 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 the sustainability features of the brand: Provide a clear view of different aspects of our sustainability in the fashion industry.
Potential Users
Those with a passion for fashion who like to design and customize clothing to reflect their unique and personalized style
Those with a special body shape who like to cover or bold a part of their body
Those with a Passion for Sustainability and Eco-Consciousness who like to respect the environment
Design Process
Scope and Constraints
The project had a tight deadline and required both desktop and mobile versions. This limitation influenced the project’s scope, requiring a strategic approach to balance design quality, user testing, and timely delivery.
Our 12-week design sprint consisted of 4 phases:
Note: there is no doubt that iteration is necessary during all phases
Empathize
Research Methodology
How do you encourage customers to buy customized clothes online?
How do you demonstrate the perfect fit with new technology?
How can you help customers find their desired clothes online?
How can we encourage users to buy sustainable products and educate people who don’t know about them?
Our first step was conducting a survey to gain a deep understanding of the business and its users.
1- Survey
As part of our user research, we surveyed 72 people to understand their challenges when buying and customizing products online. We presented some of our survey questions and results below:
- 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.
- Would you like to use a custom clothing website? If yes, what is your primary reason for customizing your clothes? (You can pick more than one.)
- How can you find a specific item based on a picture that you like? (You can pick more than one.)
- 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.
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 as their main concern.
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.
Based on the affinity diagram, we discovered some key insights about our 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
User's Pain Points
- Lack of online shops that carry customizable products with a fast and easy flow.
- Lack of awareness about design and final view of product after customizing.
- Returning clothes because of fit and quality problems.
- Difficulty in finding a desired product that they look for.
- limited number of sustainable custom clothing businesses.
Problem Solving
- Extensive Customization Options with Tech.
- Real-Time Visualization.
- Perfect Fit and Consistent Quality.
- Image Upload searching.
- Highlighting the sustainable approach of the brand.
3- Competitive Analysis
After analyzing eight similar websites in features and workflows, we gained 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 eight are highlighted below.
Strength: Visual customization with a sketch preview; Considering different design options for customization
Weaknesses: complicated measuring method; lack of product review; lack of visualization of the final design with the selected fabric.
Strength: Visual customization with a sketch preview; Considering different design options for customization
Weakness: Using standard size without perfect fit; Lack of product review; Lack of Visualization of final design with selected fabric
Strength: Visual customization on the picture of product, Considering different measuring options
Weakness: Long quiz for a perfect fit, Lack of product review, Lack of search bar, Lack of Visualization on a real body
Strength: Considering different design options for customization, Product with perfect fit
Weakness: Too many steps for measuring, Lack of product review, Lack of Visualization of final design
Define
Based on our research, to better understand and empathize with the final user we created a fictional character with its needs, behavior, and preferences to focus more on user-centered design.
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 Affinity Diagram as a part of Information Architecture, showing the structure and hierarchy of our website.
Design
Sketches and low-fidelity wireframes
Based on the information we 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 and design vision. The wireframes went through a couple of rounds of iteration before the final content was developed.
Sketches
low fidelity wireframes
Style Guide
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
UI KIT
Mood Board
Testing
Using our ideation process, we created several different home pages and show three versions 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 products being offered. 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.
Version 1
Final Version
After Card sorting for final classification we did many usability tests, so based on user experience we changed and defined all categories and sub categories.
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 make their measuring more accurate. In this way, we used new technologies to give a unique and fitting experience to our users
iteration 1
- In the first version, sizing was a part of the customizing process, but users who use standard sizing don’t have to see this information, which caused a lot of confusion.
iteration 2
It changed to a pop-up, so all users won’t get involved in sizing. only if they select it, they can go through the process.
Iteration 3 (Virtual & Manual Measurements)
- This sizing method comes as a pop-up just for users who want to have easy and accurate measurements using body scanning to have unique measurements and specifications with a step-by-step AI measurement experience.
- For users who are still not comfortable using the new digital process, we consider a video guide to make their measuring more accurate.
Customization Iteration
We tried to show the extensive customization with technology 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 size. Besides, we developed a real-time visualization method to satisfy the need for users to see their final designs.
Version 1
- In the first version, for each customizing process, users had to press the next button, and it took many clicks to go from first to last.
Version Final
- In the final version, we gave all options on one page, with the possibility of selecting different steps. Also, the real-time visualization at each step will give an idea of the final product.
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.
customization options
- In design A, users have to go step by step, see all options, and pass until the end of the customizing process. So, they didn’t have easy navigation with obligatory steps.
- In design B, we placed all options on one page, so users can select the steps they want. Users were more comfortable when they had freedom in their process.
Shopping Card
Users were confused about the summary of their order because they couldn’t distinguish the detailed information.
Users had a better understanding of their order when the price part was separated from the product detail part.
Deliver
High-fidelity mockups
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.
Website Mockups
Home page
All Clothing
Dresses-3photo
Dresses-2photo
Customization
Shopping
Image Upload
Sustainability
Size & Fit Guide
Search by photo
measurement type
Checkout
Mobile Mockup
Final Prototype
Reflection
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 that 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 a virtual try by AR/VR