Go back home
Contact Close

Product + Web Design

Blockstitch

Redefining the big scale garment production in Bangladesh.

About the project

The challenge:

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.

The outcome:

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.

How did we build blockstitch?

So, how did we get here?

01

Research

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:

Fashion Designers

Merging the creative process with the technical specifications of the garment in order to make the sampling and production development totally accurate.

Fashion designers persona user experience design
Brands

Managing the information about styles and collections in order to generate a Product Data Management document.

Brands persona user experience design
Factories

Updating the orders that have been requested and completed so they can be shared with their clients.

Factories persona user experience design
02

Information architecture

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.

Home

Styles

New Style

Style details

  • Virtual board
  • Measurements
  • Treatment/Washes
  • Printing
  • Packing

Collections

New collection

  • Basic info
  • Collection details

Samples

New Sample

Sample detail

  • Sample info
  • Status
  • Factory feedback

Orders

New Order

Order history

  • Running
  • Completed

Order details

  • Status
  • Specs

Factories

Factory profile

  • Contact
  • About
  • Services
  • Certifications
Blockstitch mockup.
03

Ideation

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.

04

Visual design

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.

#8E15F5

#0079FF

#4FFFD0

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.

06

Implementation

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

blockstitch main page
blockstitch main page
blockstitch main page
blockstitch main page
blockstitch main page

Lessons learnt

  • 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)

next project · next project · next project ·

Have a project to discuss? Hit me up!

hello@felipecastro.co

Mail me
View project
Mail me