❦ Cimu helps fashion brands reduce return rates and waste by connecting online shoppers to tailors for easy, accessible clothing alterations.
I spent two months creating the user experience and design system for Cimu’s tailor-facing app, which tailors use to manage incoming appointments and pickups. The app is currently under development, and will soon undergo a trial run to further test and improve the interface.
Disciplines
Art Direction
Team
Kaci Xie
Timeline
Tools
Adobe Creative Suite
Enter Cimu.
Cimu is a start-up that offers a new alternative to clothing returns. When Cimu users accidentally buy an ill-fitting outfit, they will be connected to a local tailor to get their clothing altered to the perfect size. Consumers can keep the clothes they like, companies save money, and pollution is reduced.
However...
To build an app that could effectively solve this problem, I needed to generalize Cimu’s appointment scheduling process. After meeting with Cimu’s CEO to discuss their pilot phase, I divided it into three steps:
1. Schedule
The tailor receives an incoming alteration request from a customer. If both the customer and tailor match availabilities, then the appointment is scheduled.
2. Meet
The customer then visits the tailor’s shop to give the tailor the garment to alter. This also will allow the tailor to take any necessary measurements of the client.
3. Pickup
Once the tailor is done with the alteration, the customer will come to the tailor store to pick it up. This could technically happen during any time the shop is open.
Of these three steps, I determined that scheduling and pickup could done asynchronously through an app. For example, tailors and customers could give availabilities and be matched through the app instead of scheduling via phone call.
Based on tailoring demographics, user interviews, and Cimu's recorded data, I constructed 2 user personas to keep note of when designing the user interface.
Meet David.
David is an industry veteran. He has been working for 30+ years, operating from a tailor shop in Chinatown, NYC. However, due to the COVID-19 pandemic, he has recently lost a significant portion of his customer base. As a 65-year-old Asian-American immigrant with limited English proficiency, he is skeptical of using technology to track orders, but is excited at the prospect of using Cimu to connect to new clients in the local area.
Meet Chiara.
Chiara is a middle-aged Italian-American who recently opened a tailoring business in New Haven, CT. She is looking to expand her customer base and easily schedule appointments. However, she has is skeptical about organizing appointments through phone calls and pen-and-paper tracking. She is eager to use Cimu’s appointment tracking to schedule and manage orders from new clients, granted that the user interface is clean and easy to use.
Many tailors belong to marginalized communities, and often are less technologically proficient and/or speak English as a second language. How can I ensure that this app equitably accommodates its users?
Use consistent visual design to aid Limited English Proficiency (LEP) users.
Over 50% of tailors are people of color, many of whom don’t speak English as a first language. The app would need to have a consistent visual language and clear, simple instructions.
Avoid overcomplicating the app, especially for older users.
Over 85% of tailors are older than 45, and many struggle to use complex apps. This means that processes like onboarding should be divided into linear steps if possible to avoid unnecessary confusion. Users should also be offered tutorials to become accommodated with the interface.
Many of Cimu's users are older, and skeptical of technology. To make matters worse, Cimu requires a lot of initial information from tailors to set their accounts up.
At first, I was lost. How could I design an onboarding system that's simple and thorough, at the same time? I turned to look at the flows of other apps that had similar user bases.
Here's what I learned:
- Make account creation extremely fast to maintain retention. Then include a secondary set of verification steps for additional information.
- Ensure that every screen corresponds to one simple step; instead of creating one long form, walk the user through step by step.
- Create delight when possible, with smooth transitions from each step to the next, to keep users engaged.
With these principles in mind, I split the onboarding process into three phases.
Create Account
This takes a minute, tops. Additionally, once a user finishes creating their account, they will be more incentivized to continue completing their profile in the future.
Complete Profile
For Cimu to get all necessary tailor profile information, they need information such as tailor shop addresses, hours of availability, etc. Again, to avoid overwhelming the user with a long series of questions, I split this phase into three organized substeps.
Verification Meeting
The tailor receives an incoming alteration request from a customer. If both the customer and tailor match availabilities, then the appointment is scheduled.
Thanks to a delicate plotting out of the user flow with low-fidelity prototypes, the transition from low- to high-fidelity was almost painless.
Almost.
What was the issue? We quickly realized that our north star of intuitive, consistent design for our target users wouldn't be possible to achieve within the current restraints of Cimu's brand kit.
I met with Cimu’s CEO to explain why using the Cimu’s current brand kit would cause accessibility concerns for the app, and worked with them to adapt the branding in order to create a better user interface.
Color Palette
Cimu’s original brand kit was bright and colorful, but the colors were too saturated to include in an interface that was trying to accommodate older users. I desaturated the three green midtones to make them less abrasive and increased the contrast to improve readability. I also removed colors from the original brand kit in order to not overcomplicate the app’s visual language.
Typefaces
Cimu’s original brand kit included two typefaces: Halogen and Avenir. However, since we were designing for users that had limited English proficiency, I decided not to use Halogen at all. Instead, I opted to use the more standard typeface, Avenir, for the entire UI, since I wanted to prioritize readability and accessibility.
From our initial briefing with Cimu, our team realized that there was a lot of information that we may need to potentially display on the home page. How exactly would we organize an intuitive user journey through the homepage?
A potential user journey through the app, made in collaboration with my teammate Alana Liu.
We narrowed this information down into two possible low-fidelity versions of the homepage:
Option 1: General Dashboard & Calendar
Pros:
- ✓ Operability: Incoming appointment orders are the first thing the user sees.
- ✓ Clarity: Clear schedule view.
Cons:
- ✗ Clarity: Homepage is a lot more crowded, which is especially problematic considering our north star principles.
- ✗ Operability: Three-card header view sets up a confusing architecture.
Option 2: Orders & Appointments (CHOSEN)
Pros:
- ✓ Clarity: Incoming appointment orders are the first thing the user sees.
- ✓ Operability: Clear distinction of information that will be displayed on the Order vs. Appointments page.
Cons:
- ✗ Clarity: Unclear that accepted incoming orders go to the Orders page from the Appointments page.
Our team chose the Orders & Appointments page because there was a more logical division of information between the two screens, and was generally less overwhelming from a usability standpoint.
And as we moved from low to high fidelity, we also made a couple of other improvements to the homepage to increase intuitiveness, accessibility, and general visual clarity.
Tailors can book appointments in seconds, while also getting all necessary information about the clothing piece ahead of time. This app allows Cimu to expand and continue to grow its customer base.
The homescreen for Cimu is split into two pages: orders and appointments. The former is for incoming orders (the "schedule" step), while the latter is for confirmed meetings (the "meet" and "pickup" steps). This compartmentalization reduces complexity and clutter.
Users can quickly view all incoming requests.
Schedule appointments within 30 seconds.
Take charge of your calendar.
This was my first contracted product design project, and it taught me a lot about designing and prototyping in a professional setting.
Navigating team disagreements.
Throughout this project, I ran into conflicts with developers and the other designers on my team. Considering the brevity of my contract, I learned how quickly and effectively to realign our team’s interests and work towards a common goal.
Staying organized!
At first, I had all my designs thrown across a horribly messy Figma file. After I realized how difficult it was for others to go through to find my "Password final final FINAL" mockup, I worked on organizing everything into simple sections with explicit names. And honestly, it helped me as much as it helped the rest of the team.
Designing equitably.
Oftentimes, flashy UI can appear to mask bad functionality. I learned the importance of designing with research-based objectives, instead of aesthetic-based ones.
Behind the scenes...
Thanks for reading! And thank you to everyone who helped with this effort: Alana, Kaci, and Zepto. :)