Mobile UI/UX Case Study – Dressmaking Workshop App

It is through personal experience that I’ve realized, that only those clothes that are custom-made for you would make you feel the most confident. As someone of a less than average height, ready-to-wear clothes never fit me right until I learned to make those dresses myself to my own measurements.

But not everyone might wish to, or have the patience or time to do it, and in fact, they shouldn’t have to. There are professionals who are there to do the job for you, and it’s very common for Sri Lankan parents to have a dressmaker make the uniforms for their school-going kids. And it is the same case with formal attire, party and wedding dresses, if not more so.

But then, MUST you visit your dressmaker each time you want something new made for you? What if there was a way you could just measure yourself at home and let them know the details along with what kind of dress you want?
After all, we now order everything from art-supplies to pizza from home through mobile apps, so what if your dressmaker had an app to connect with you as well!?!

This is how I got inspired to design for a mobile app, that would enable a customer to order a clothing item to be custom-made for them, without visiting the dressmaker as per the traditional way.

But to start off, I first had to know what people’s experiences were from their point of view, and their attitude toward the idea of remote interaction between the two parties involved–the dressmaker and their customer–in our case.

For this, I prepared a Google Form to survey the customers and used scheduled phone calls and personal interviews with tailor-shop owners. The goal was to get to know the standpoint of these potential users of the application, about the prospect of such an app.

Out of the questions on the Google Form, most of the importance can be placed on the questions that ask users their mindset on the traditional procedure of personally visiting a workshop and my alternative suggestion of using a mobile application instead. In order to not overwhelm the subject, I made it a point to use only multiple-choice questions but used one paragraph-type question to provide their opinion on remote-interaction with a dressmaker.

The results of the survey collectively meant that the customers didn’t really mind visiting a tailor’s workshop, and despite that fact they seemed to happily welcome the option of a mobile interface to serve the exact same purpose. This really helped me get further motivated to start giving my idea life.

When interviewing dressmakers, I focused more on their stance on the mobile app. Following are some direct quotes from tailor shop owners that I interviewed:

At this step of the procedure, I decided to narrow down the scope of this project into one that would take orders for tailor-made dress-shirts. I did this by creating a male persona that could manifest as a character, the data I gathered, and yet helped me design the product with a target group of male users in my mind.

In addition, creating personas helps focus on the users' needs without getting distracted by new ideas that would pop up in my head later during the design process.

• Name: Kevin Lee
• Age: 29
• Profession: Secondary School Teacher

• About:
  • Kevin lives with his spouse and two dogs in an apartment in the suburbs. As a school teacher, his typical wardrobe consists of dress shirts and slacks, and he almost always has his clothes tailor-made for him by his dressmaker. His work hours fall between 7 AM and 2 PM unless he happens to have after-school duties which would usually extend the usual time span until around 6 PM. This leaves him enough time for outside visits only during the weekend, but he explains that he would rather wish to spend this time at home with his family.
• Habits:
  • Likes to add new items to his closet as often as once a month.
  • Prefers custom-made clothes to ready-to-wear clothes in stores for the optimal fit.
  • Usually utilizes remote ways of interaction when it comes to tasks like shopping and paying his bills.
• Pain Points:
  • Has to set a minimum of two hours for the task of visiting the dressmaker.
  • Doesn’t appreciate it in cases where there happens to be a line that he has to wait idle in.
• Goals:
  • Save as much time he can so that he can focus more on his profession and spend more time at home with his family.

As the next step I created the usual process my persona goes through once they decide on getting new clothes. This was really helpful to me to create the user experience that aligns as much with the traditional procedure as possible, eliminating the pain points the typical user journey consists of.

By now I had a vague idea about the tasks the app should help the user achieve, and before moving onto user interfaces, I first broke the basic processes down to smaller steps.

Some of the sketches I did follows and they show the beginning of my solution taking shape. Sketching on paper before going for high-fidelity wireframes is beneficial in such a way that it requires minimal tools and I can iterate my ideas considerably quicker.

Wireframing helped me focus more on the functionality, setting visual appeal aside for later.

Note: Content for the section of this app where it instructs users on how to measure themselves and how to choose material and fit of the shirt they want has been taken from the following sources, and doesn't belong to me:

• https://propercloth.com/reference/dress-shirt-body-measurements
• https://sewguide.com/best-fabrics-for-shirts
• https://propercloth.com/reference/based-on-body-measurements-selecting-a-type-of-fit

I wanted the app to reflect stability, depth and loyalty due to the fact that users are paying for something in advance, but they are not seeing in real what it would look like except for the fabric/color swatches offered for selection on the app. The visuals must incite feelings of trust in user on the workshop owner, and user must not feel uncertain about the outcome of using the app to place an order without visiting the workshop in person.
As a color that symbolizes integrity, confidence and seriousness, the color of sky and the oceans, blue was my first choice as the base color.

And also taking the nature of the process of making a shirt in account, I thought it would be informative to keep in mind such details like sharp and seamless edges, luxurious textures and ornate patterns.

I used a dark, deep blue as the base color and a muted, dusty yellow as the accent for the color palette. And I thought there would be white spaces and solid blue surfaces in equal amounts.

Abel is a free Google Font designed by MadType, which is a modern interpretation of the condensed flat-sided sans serif.
It’s a mono-weight, but still for simplicity’s sake, I didn’t use any other font and decided to use properties like size and alignment to convey a typographic hierarchy.

It is common for processes that consist of several steps that the user has to go through, to use a ‘progress bar.’ This mechanism is used to give user a sense of advancement.
And in this app, I had used a block of dark blue that serves as an alternative to the traditional progress bar, by covering the screen gradually during tasks that involve steps, and eventually becomes a background fill by covering the whole screen.
For an example, what follows are the processes of onboarding a new user and placing an order respectively:

Please click here to view the prototype created using InVision App.

I think the stage in the whole procedure that I learned the most from is user research. Mainly because it was my first time doing research to gather data for a targeted purpose, and then the research I had to do on my own before preparing a better questionnaire for them, to obtain the most relevant data that I could make use of, to make decisions.

And I realized that it takes way more care and consideration when developing a product specifically for someone else rather than for yourself, which is mostly what used to be the case for me before I set out to work on this project. I had to pay serious attention to their needs and concerns, as much as I had to use what I knew to be ‘best’ or ‘optimal’ in the design process.

Like I said earlier, I narrowed the scope I initially had in my mind down by excluding all other consumers, and only focusing on the needs of a small niche of users, that is, adult males. But this app can be expanded to deal with receiving orders not just for dress shirts, but for all sorts of clothes, thus, involving more extensive research and subsequently, possibly different design decisions.