H.M.Cole
Creating custom clothing website

H.M.Cole is an American company specializing in crafting custom clothing for all aspects of life; professional attire, casual wear, formal dress and even outerwear. H.M.Cole has showrooms in America, where managers, consultants and tailors will help you choose the style, fabric, design of a suit and then take your measurements.

We have redesigned the site entirely, upgraded frontend to Angular 2+, implemented UI for tailors to enter customers measurements, established data synchronization with Odoo instance, used by factory.

The problem and the goal

H.M.Cole turned to Gearheart.io to update existing website and add more features. Our task was:

  • generally update the overall look and feel of the application to be more stylish and sleek
  • extend measurements UI to allow tailors to enter measurements in all possible modes (fully custom, based on standard size, based on past orders) for all available types of products.
  • update product customization wizard to contain more options, while become minimalistic and simple for customers, while powerful for tailors
  • extend payment system
  • implement limited landing page editor

The Execution

Design

To match H.M. Cole's concept, our partners have offered a modern, original and stylish design. The task was quite challenging:

  • the site is used by tailors and customers. We needed UI to be mostly the same, while tailor needed more features
  • main use case is following: tailor and customer discuss order details and tailor enters the order alongside with measurements to the system, while customer is sitting next to him. So UI must have a bunch of functionality available for a power user, while still be minimalistic and stylish so that customers would love it.
design

Workflow

There are two types of users - customers and tailors. Tailor's use case is the most common. Here is how it works:

  1. When customer enters the shop, tailor creates a customer record in the system. Or selects existing customer to shop for.

add customer

2. together with client, tailor adds products to cart and customizes each of them.

Here is an example of a jacket customization. H.M.Cole is all about fully custom clothing that is tailored to match any customer preference, so there are tons of available options. On this screenshot we see only options, available to customer. Tailor's UI allows even more detailed customization.

jackets

3. After filling in all the necessary fields, the tailor goes to the measurements section. There are three modes of measurements UI:

  • Fully custom measurements - tailor takes measurements required for selected products.
    • In order to adjust suit's fit (slim, comfort, etc), tailor can adjust allowances
  • Measurements based on standard size. Tailor selects one of the predefined product sizes and applies adjustments.
  • Measurements based on past orders. Tailor makes adjustments to past orders, so that user could add the shirt "same as last time, but with a little shorter sleeve"
measurements

There are also some built in rules, like which measurements are needed for which product. Which measurements can have allowances, and others.

tailors's measurements

4. When order is ready and all the measurements are entered, payment is made and the order is sent to factory using Odoo API. Order data is updated in Odoo as order is moving through production pipeline. Changes are synchronized back to the Django backend.

payment

Landing page

We have also built a frontend editor that allows admin to tweak the look of the site.

label management page

Technical side

Under H.M.Cole's hood, there are Django, Python, Angular 5, NGRX, Typescript and PostgreSQL.

Results

  • We have redesigned an application.
  • We have improved customization wizard to make it easy to use.
  • During half a year of the project, we have expanded the interface of measurements.
  • We have moved from Angular 1.x to Angular 5.
contact us right now