thinkful ux|ui immersion — product design, user research
A clear solution for garment alterations, customizations, and repairs.
If you've ever needed to tailor a pair of pants, design a custom wedding dress or repair a hole in your favorite jeans, you're probably familiar with the difficulty of finding a skilled professional to conveniently get the job done. Lost without a clue, you often resort to the tailor at your local dry cleaner with limited service options, or most annoyingly, you put the project off a few weeks and your garment or idea becomes lost in the back of your closet.
​
I took a deep dive into this complex space to develop an ‘MVP’ solution to satisfy the business and user goals. A combination of tools was used, including surveys and interviews, to gather information from our target audience which culminated in the design of Pro Tailorz; a product that aims to minimize the hassles of locating and hiring a tailor to conveniently alter, customize, or repair your favorite clothing and generate a better overall experience for future users.
​
​
My role
Logo Design
User Research
User Interviews
User Flows
Sketching
Wire-framing
Prototyping
Visual Design
Interaction Design
User Testing
​
Team
Team of Me
​
Tools used
Figma
Adobe Illustrator
iOS
​
Timeline
6 Months
the problem​
The clients are urban city residents that currently don’t have a working solution for conveniently tailoring their favorite clothing. In the USA, requests for tailoring services often come from the wedding, and luxury apparel industries, where alterations, customizations, and repairs are the most common service request. When searching for a tailor, the experience can be difficult and inconvenient. Clients who use this app need to be able to review, hire and pay a skilled tailor capable of customizing the fit and appearance of their favorite apparel. I aim to understand who the users are by researching their problems.
the solution​
A simple and easy way to search for, contact, hire and pay for the professional services of a Tailor without the hassle of commuting across town to wait in line at your local dry cleaner.
.png)
the research process ​
design thinking
In the initial research state, it was important to define clearly, the challenges ahead, the potential users, and what we wanted to accomplish with the design.
To narrow down the best solutions and deliver a creative and simple solution to this problem, I used Design Thinking; a process based on user-centered solutions that are divided into 5 steps: empathize, define, ideate, prototype, and test.
Design thinking process
empathize
user research
To kickstart the research process, I needed to define clear goals, the challenges ahead, and how I would approach them. I created a User Research Plan and used it as a guide throughout the process.
​
As a next step, I put together a survey to gather data on my primary audience and get a better idea of their current process and some of the challenges they face while trying to hire a tailor. Here are some of the questions we asked in the survey:
​
• How often do you use tailoring services?
• How do you usually locate and hire a tailor?
• When are you most likely in need of a tailor?
• Do you use any apps for booking services?
empathize
what we found
Users of tailoring services were primarily female fashion industry professionals between the ages of 31 - 50 who want to improve the fit of their everyday clothes.
They currently locate tailoring services by word-of-mouth referral.
100% of respondents are willing to trust an app solution for tailoring services.
empathize
the competition
Very few competitors exist in our market so a SWOT Analysis was done to evaluate our main "lifestyle brand" competitors, to see product UI, usability, and service offering. We want to understand what they were currently doing well, or poorly, areas we could improve and capitalize on, and the potential obstacles they present.
.png)
Competitive analysis using the SWOT method
define
who are the users
From the information gathered, I created a persona of a potential user of the product. I assigned this persona with a user story to further represent the needs and aspirations of the users.
As a User, I want to be able to easily hire a professional tailor with verified skills. The service should have quick turnaround times that work with my schedule so I can always look my best.
Clair is the persona created to highlight our user's motivations, needs, pain points, and scenarios as well as analyze their behavioral attributes.
define
their journey
I then used the persona to create a journey mad to display Clair's process to complete the task of hiring a tailor to alter the fit of her favorite clothing. The map displays the typical processes Clair follows to have her garments tailored. I created this map to empathize with Clair and to thoroughly showcase her emotions.
_edited.png)
Journey Map shows Clair's thoughts and emotions as she goes through the process of hiring a Pro Tailorz Traveling Tailors to tailor the fit of her dress for a wedding next week.
ideate
pen(cil) to paper
Before I began to design the look of the application I needed to determine the user flow to guide the experience. Considering the user pain points and a task-based scenario, I quickly put down some rough sketches of the flow.
The solution proposed focuses in two main goals:
• Organization: Make it easier for users to find the best tailor for their project.
• Easy discovery: Make it easier for users to find get all the relevant service categories.
Pro Tailorz user flow diagram - Hire a tailor
User flow diagram displays steps a user takes to hire a traveling Pro Tailor
ideate
pen(cil) to paper
After a doing few quick sketches to gain some insight into the functionality of the app, I created some low-fidelity wireframes to kickstart the visual design of the application and get some initial feedback on its usability.
Paper wireframes screens
Home Dashboard
Quick Start / Project Categories
Select Tailor
Low Fidelity Wireframes screens before testing and iteration.
In attempts to validate my design decisions and the flow and functionality of the solution, I used the lo-fi wireframes to test with some of the users that I engaged with throughout the process, I discovered the following:
Cons:
• “What if I want to manually put in my location and destination, instead of enabling my location?”
• “What happens in between “Quick Start ” and “Tailor Info””
Pros:
• “Overall this is looking really good. I get a good sense here of how the app will be laid out and how to plan and organize information and functionality.”
• “The experience is simple and easy”
Design Iteration
After doing some user testing with the wireframes, and gathering feedback, I made some adjustments to the design to be more streamlined and user-friendly. These adjustments included:
• Allowing users to choose whether they wanted to enable location services
• Giving the user bite-sized but expandable information about services
​
.png)
.png)
Low Fidelity Wireframes screens after testing and iteration.
ideate
branding + design system
I created the branding around the name I chose for the app - Pro Tailorz. I chose the name Pro Tailorz and the sewing machine graphic in our logo for clear communication of our service offerings. More importantly, the logo was designed to be approachable, and friendly, and to deliver the message of “a great experience” to our primary user base/ target market.
logo
.png)
color + typography
MAIN COLOR PALLETTE
COMP
PRIMARY AND SECONDARY TYPE FACE
TYPE HIERARCHY
design system
APP ICONS
BUTTON STYLES
ICONOGRAPHY
Pro Tailorz branding & design system
IOS mockup for Pro Tailorz App
test
testing it out
During all the steps of this process, I’ve considered the feedback of my test users a great deal. For the final test, I used a high-fidelity clickable prototype of the app and asked them to use it to complete a couple of task-based scenarios;
• Find a tailor to alter the hem of a dress
• Locate and review your pending booking information from the home dashboard.
I was unable to observe my test users navigate the prototype but the general feedback I received was overwhelmingly positive.
The test users were able to complete the task-based scenarios given to them, with ease and fluidity. Words like straightforward, familiar, simple, and user-friendly were used as descriptors for the app’s functionality.
test
​
​
test
what they said
final thoughts + next steps
The iterative nature of the design will determine future explorations into how this current solution can be improved. The goal is to create an almost mindless user experience with the testing and feedback from the users of the app.
The next step is to move into the project's development phase so that we can get it into the palms of the users and begin the next rounds of testing and iterations targeted at creating a complete solution.