Huey Lam's Suits Digital Tailor Shop

How a tailoring business survive during the pandemic?

Introduction​

Rebrand with an updated logo and visual system. Design a responsive e-commerce website that walks clients through the purchase process seamlessly

DISCOVERY

I. The fresh look of the site with new branding​

Since the visual aesthetic has been developed, the next step is revamping the website, which supposed not to be challenging as there is a creative direction to follow. I like the contents were put on the old site, which is really business-focused and reflect the niche and style that the store offer to their customer. However, the visual impression was generic and not strong, the main color didn't speak for the attentive workmanship and elegant values of the business. I decided to keep the main wireframe and just performed the modification on layouts, photography, typography and color palette. On top of that, I contacted Sarah - a copywriter to help us audit writing and SEO.

DESIGN PROCESS

I. Understanding the tailoring process

Contextual research from observation

To begin with, I set up several meetings with the owner so he could guide me through the tailoring process. Despite the fact that there is the process diagram on their main page, I still urged for more details. All the info I collected up until then was mainly analytics data and a few assumptions, so learning how and why clients were buying their suits was crucial. Then I spent extra 30 minutes after the meeting observing how Huey work with the customer to construct an empathy map. I also got a lot of notes from the folks on Reddit looking for a recommendation of a place to get their customized suits, which is intrigued me a lot to see which makes them choose Huey Lam among other places.

Key Findings

I conducted an interview with 3 regular customers and 2 potential clients to develop user personas and clear the consumption I had picked about the process so far. After that, I'm coming up with the initial flow

  • Fabric selection
  • Component selection (like collar and cuffs)
  • Measurements input places.

However, there is still something off about the flow that could be improved. There are a ton of fabric options and every customer I talked to seemed to want to see and feel the fabric samples rather than choosing them from little thumbnails.

Thanks to the folks from Reddit, I got to know that the distinction they trust Huey Lam is the way he makes the comfortable suits, not really about the fabric. Therefore I omit the fabric selection step from the steps. My goal is to create the straight, simplest and fast but valid online shopping experience.em choose Huey Lam among other places.

With data from the user interview, I identified the pain points during the whole process of ordering a customize suit online. 90% of customers prefer coming to the store and talk with a tailor instead of completing the purchase entirely online.

Hence, here is the elaborate user flow

  • Product Selection

    Choose whether they want shirts, suits, accessories or all of them. Pick the prefer style.

  • Component Selection (like collar and cuffs)

    Break into small steps with basic options in order not to overwhelm the users

  • Check Out

    Based on type of product, location and need of client, they will get different instruction for next step

  • Measurements Inputs

    For customer who purchase the customized pieces, they will be asked to book a virtual fitting with the tailor

II. Turning business online display to digital tailoring space

Sitemap Proposal

The current website acts like a showroom where people go on there and take a glimpse of what kind of service the store offer. There is a product page but lacks information and not purchasable. Aside from putting commerce space, I need to complete footer section.

Product hierarchy

Researching competitor gives me an insight into how the products should be laid out. One of the pain points users mentioned to me in term of doing tailor shopping is too many choices and they seems to overwhelm their customer with choices and options. I decide to simplify the process by break down our shop into 3 sections: shirts, suits and accessories.

Product Category Screens

Product components

As the measurement and product details will be sent to Vietnam for cutting and assembly, then Huey will do the final fitting to deliver the highest quality and fit comfortably on clients. Therefore, the data collected from carts should be matched with the system be used overseas. In addition, I conducted user testing on the competitive websites and perform force ranking among the same groups of users to execute the most seamless flow for the customizing process.

Checkout Point & Fitting Process

The checkout point is broken down into separate stages. The main reason is the quantities of the product components themselves are overwhelming customer's attention and seeing endless walls of input fields and forms in one can easily drain them out.

I also modified the form sending to the customer by editing the CSS code in template files, providing consistent branding across medium and channel.

The answers for frequently asked questions are placed in accordion in order to cover as many questions as we can on 1 page. The customer will be able to find the answers to their question easily without reading wall of text and confused browsing around the site to get the solution for their problems.

Prototype

IV. Reflection​

This is the most versatile that I have done so far and I'm so proud of myself for taking big responsibility for it: from branding, graphic design, web design, photography, outsource content writer even a little bit of coding. It took me a year to come to this stage of the project, like flying on a roller coaster, there is thrills, worries, uncertain feeling but full of excitement and satisfaction to see the final pieces I made. The project is still ongoing with several revisions and improvements, and here are some key takeaways I got for myself.

1. Balancing the business's need and user's need
Sometimes there's no alignment in values between the business and customer, as a designer, using data and objectives from research and client meetings to make the right decision for the product

2. Working cross-functionally
It was important to engage with many parties during this project. These interactions clarified business goals, provided insight into the key areas of improvement and help the progress work smoothly.

3. I can wear hat! (and many hats)
At the early stage of my career, I'm trying to get involved in as many aspects of a project as possible. At first, I was contacted to shoot for Huey's new lookbook and I end up taking part in their business evolution. One skill I have been sharpened effectively during this project definitely is my web design and coding, from basic HTML, CSS and WordPress, now I'm really comfortable coming up with more ways to complete client's requests regarding websites using advanced programming skills.