CottonBrew
2015
How might we redefine the tailoring experience in this new age?
Overview
CottonBrew provides tailored menswear without the measuring tape. Instead of going to a tailor, customers can get a fitted suit shipped to their doors by sharing three photos of themselves and answering a few simple questions online.
Their website was outdated, so they needed to revamp the design from user flow to aesthetics that would better match their product, high-quality, tailored menswear.
As the sole designer in the startup, I was responsible for developing the brand identity, defining a cohesive visual language across the user interface, and redesigning the entire online shopping experience.
Additionally, I was responsible for creating designs for marketing campaigns, VC pitch decks, invoice templates, fabric sample kits, and promotional materials.
Process
Our goal was to provide a smoother and more premium shopping experience to customers. I collaborated with the founders on the redesign through these steps:
Define user flow
Build wireframes and prototypes
Develop brand identity (since branding hasn’t been established at the time)
Translate the brand into the UI style guide
Skin the UI library
UI Design
Implementation
User Flow
Products Page
Before
After
Suit Customization Page
Before
After
Landing Page
Making Data Entry Easier
To find the perfect fit for our customers, we needed to collect a few pieces of information. We’ve all been there - filling out forms can be a daunting task for many. Therefore, I broke down that process into bite-sized chunks to make the whole process feel less overwhelming and added a gamification element to encourage people to move forward.
Reimagining the Body Profile Creation Flow
Below is a redesign of the step for collecting user information.
The progress bar on the left not only shows what to expect but also encourages customers to complete the task.
The FAQ section on the right and the customer service phone number on the navigation bar are displayed to prevent customers from abandoning the flow due to questions or concerns they may have during the process. The text “Free shipping worldwide” is always visible to reassure customers of our promise, providing peace of mind throughout the checkout process.
Lessons Learned
Lesson 1: Something is better than nothing; done is better than perfect.
Working at a three-person startup has taught me to think strategically with limited time and resources.
The most valuable lesson: Sometimes, it's okay not to be perfect.
I remember handing my designs to our developer (also a co-founder), assuming they'd be built exactly as spec'd. Instead, my design became more of a reference than a carefully followed blueprint — given how the app was built and our time constraints, pixel-perfect implementation just wasn't feasible.
At first I was very upset. I'd spent so much time fine-tuning details, getting every detail right, down to the pixel level, and now they weren't being used. But stepping back, I realized the market wouldn't wait for us. One more day we delay the deployment for pixel-pushing would mean a loss in profit. From the customers’ perspective, it would mean one more day of being stuck with the same old clunky user experience.
Lesson 2: A good designer should understand both the business and technical sides of things
Once I understood the reasoning behind that trade-off, I wished I'd spent more time upfront understanding our business strategy and technical constraints — it would have let me design in a way that better aligned with the business from the start.
It’s when I put my designer’s ego aside and focus on what truly matters to the customers that I’m able to make a greater impact.