Product + Web Design
Redefining the big scale garment production in Bangladesh.
About the project
The garment production industry in Bangladesh is the second largest in the world, coming right after China's. Despite the billions of dollars generated annually by this industry, the communication between stakeholders is still mainly done through email chains and informal conversations.
This often results into loss of important information and lack of control over design approvals, garments specifications and orders tracking.
I partnered with Blockstitch to create a web-based application where designers, brands and factories could meet, communicate and cooperate during the several processes that involve the production of new apparel styles and collections.
So, how did we get here?
After some intense -Zoom- lessons about the garment production industry in Bangladesh, we conducted user research using unstructured interviews and then we generated the personas description by pointing out the main goals they need to achieve from using the platform:
Merging the creative process with the technical specifications of the garment in order to make the sampling and production development totally accurate.
Managing the information about styles and collections in order to generate a Product Data Management document.
Updating the orders that have been requested and completed so they can be shared with their clients.
Based on the insights collected during the user research and considering the business model provided by the company, we held a card sorting session aiming to create the sitemap of the platform.
The goal of this step was to have a general vision of the project's structure, including the navigation flows and the estimated size of the system.
- Virtual board
- Basic info
- Collection details
- Sample info
- Factory feedback
How might we make it easier for factories to have control over orders' production?
We structured the Orders section in such way that users could filter and find all the information about running and complete orders. By consulting the details it is easy to identify the current step of the process that the specific order.
How might we allow fashion designers to clearly point out the specs of new garment collections?
For this, we built the Virtual Development Board, an editor panel where designers can generate their creative ideas while making notations about the specific characteristics of the clothing.
How might we provide brands a simpler way to generate a Product Data Management document?
A navigation bar was designed in order to organize the information that brands must supply to the factories when requesting a sample. The goal was to divide the product characteristics so the user could be conveniently focused in each garment feature.
From a brandbook to a design system
Regarding the visual features of the platform, the main challenge was to create a consistent Design System based on the Blockstitch existing brandbook. The color palette, the typography, the shapes and other caracteristic graphic elements of the brand were adopted and integrated into the user interface elements.
In this particular case, the brand colors happen to be highly bright, so the use of a dark mode layout system was implemented. The benefit from this is to avoid users' eye constrain and to generate navigation patterns through color contrast.
Every UI element is built as a component of a scalable design system that provides visual coherence in each interface while following the visual brand guidelines.
During the implementation phase it became mandatory to establish -along with the dev team members- the most efficient way to recreate with fidelity the design proposed into the real product. In this case, we agreed on the construction of a theme template allowing the development team members to “copy and paste” the styles of the elements and focus their energy on functionality matters.
For the UI implementation we worked with Bootstrap 4 as the base framework, so the integration with Vue.js in the Front-end development could be smoothly done. Having direct control over the styles in the dev environment was incredibly useful to achive a precise look and feel in the platform.
Final Product Preview
- Study and understand as much as possible about your client's business.Knowing how it works, how success look like or what are the specific constrains given by their context, could make a huge difference in how you make decisions towards the right direction of the project.
- Have both wide and narrow vision. Focusing equally on the big picture and the small details will give you control over every stage of the project.
- Be a team player. Always find the way to make the team member's work more efficient by realizing their skillset and workflow.
🙌 Special thanks to: Salman Azim (Blockstitch's CEO) and Ronald Roni Saha (Dev Team Leader)