.png)
Chanodil - Fashion Sourcing Platform
Research
Analysis
Design
Testing
Project Details
Problem: The application was founded in 2019 and ran till 2020 as in it is basic form as well as experimentally. The identification of customer problems was the utmost priority as well as to define a proper user flow which was not properly included in the basic version. Lack of an attractive up-to-date UI was another problem as well.
Client: Chanodil
Role: UX/UI Designer in Chanodil
Duration: March 2021 - May 2021
Contribution
User Interviews,
Competitor Analysis,
Content Audit,
User Journey Map,
User Survey,
Workflow Analysis,
Low Fidelity Wireframes,
High Fidelity Wireframes,
Conducting Usability Testing,
A/B Testing
Tools used
Paper and pencil (Sketches),
Figma (Prototyping),
Miro (User flows and storymaps)
Zoom (User interviews & Testing)
The Project
Chanodil is a fashion sourcing platform/application that connects fashion businesses to garment manufacturers, suppliers, buyers, and fashion designers from all around the world. The platform allows users to easily manage their order process through one platform. The users can process orders whilst cutting costs, instantly connecting with business partners, eliminating the risks involved within the fashion supply chain, and improving sustainability.
Stakeholder / Persona
Throughout the entire ordering, supplying, and managing process there were three personas identified according to the business-to-business (B2B) approach.
-
Buyers/Fashion designers: Buyers or Fashion designers are the people who run their own fashion brands (small-scale fashion brand owners) and sell in smaller quantities.
-
Suppliers: manufacturers of garments in small quantities
-
Account Manager: This is an expert person who manages and monitor orders and supplies, working under the Chanodil administration
Competitor Analysis
In order to better understand this industry and find out where the product currently fit within the market I conducted a competitor analysis.
I focused on companies with a similar market startergy: small to mid-sized online garment manufactures.
Along with the analysis, I included a detailed list of suggested product enhancements. This list included features that the competitors had but my client was missing.
Customer Journey Mapping
I had conducted a usability testing with representative users to understand how they interact with the applications. This also helped to map the user journey to identify areas of improvement in the current application.
.png)
Workflow Analysis
Then I had done a detailed view of the current workflow to identify areas of optimizations based on the previous findings.
.png)
.png)
Wireframes
I created wireframes for desktop screens. Through the wireframes I was able to design Clickable Interactive Prototype which gonna use to conduct user testing.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Design Validation
Hence, I wanted to validate my design, different types of methods have been used by me such as usability testing.
Having my initial designs in hand, I conducted a survey to identify the usability of the application dashboard by reaching end users, to obtain quantitative data. The dashboard has been defined based on the collected statistic data from the user survey.
.png)
Further, I conducted a remote usability test by presenting the high-fidelity clickable prototype to the users via the Zoom video conferencing platform. I asked the users to go with the flow with the clickable prototype to fill up an inquiry, to make changes on an already filled inquiry, and reset an old, finished inquiry as a new one.
During the usability testing, I asked the users regarding their confusion points and observed their steps on the tasks. We spoke about their frustrations while users using the prototype.
The knowledge I have gained from the usability test was priceless and it helped me enormously to change my focus from the visual design of the application to the direction of the functionality of the application to improve the usability.
Some of the changes resulting from the above research have been listed below.
Problem#1: Inquiry Details
.png)
-
The metadata summary table was a nice to have feature but not essential.
-
It is good to visualize the inquiry progress tab bigger with sub-steps, but it is also necessary to see billing details, delivery details, and easy access to invoices.
-
It was confusing for Users to identifying the flow of finding the sub-steps.
-
The users also like to see in detail inquiry progress with sub-steps in the message screen because users need to check sub-steps frequently.
-
It is highly required to see the previously saved/archived chats on the chat tab.
.png)
The Solution:
.png)
.png)
I removed the tabs and used a strategic plan to show all the details on a single page.
There I have used a vertical progress bar with drop-down substeps instead of the earlier horizontal progress bar. Saved items in the chat have been added to a new channel to view as an option.
Problem#2: Inquiry List
.png)
-
Users will generally change the order quantity in bigger amounts. The plus and minus buttons provided to change the quantity on my inquiry list is not that useful because the quantities are always changed in bigger amounts.
-
It is important to see the pending status on my inquiry list, but users also like to see the overall progress of each order.
The Solution:
Plus and Minus buttons have been removed and a small progress bar has been used.
.png)
Problem#3: UI Color Palate
The two users who subjected my usability testing clearly said that the visibility of the existing dashboard with the existing color theme is not enough. Therefore, I wanted to reach more users/crowds to validate the color theme of the design.
Thereafter I conducted the AB testing to identify the most suitable color theme. I created a screen with different color themes and selected two screens with two color themes to use in the AB preference testing.
The UsabilityHub.com website has been used to conduct the AB testing.
Eventually, the AB testing led to finalize the best color theme for the application.
.png)
.png)
The Solution:
75% of users approved the dark color theme to be used in the application and therefore it is adapted to use in the beta version of the application.
