CottonBrew
UI, UX | 2015 - 2016
How might we redefine the tailoring experience in this new age?
Overview
CottonBrew provides custom 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 wireframe and low-fi prototype
Develop brand identity (since branding hasn’t been established at the time)
Translate brand into UI style guide
Skin the UI library
UI Design
Implementation
User Flow
Products Page
Before
After
Suit Customization Page
Before
After
Landing Page
Collecting Customer Info
To find the perfect fit for our customers, we needed to collect a few pieces of information. We’ve all been there - filling out information online 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.
Creating Your Body Profile
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 the customers to finish the rest of the work.
The FAQ section on the right and the customer service phone number on the navigation bar are displayed to prevent the 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 the customers of our promise, which provides peace of mind throughout the purchasing flow.
Lesson Learned
Something is better than nothing; done is better than perfect.
Working in a three person startup has been challenging and rewarding at the same time. It has taught me how to think and work strategically with limited time and resources.
If anything, the most valuable lesson I’ve learned is to embrace the idea that it’s ok to not be perfect.
I still remember when I handed over my design to the developer (who was also the co-founder), I thought things would get implemented exactly as I designed. It turned out that my design was more of a reference than a carefully followed-through blueprint. In short, due to the way the app was built and time constraints, there was simply no time to implement the design to the pixel level.
At first, I was upset because I had invested so much time fine-tuning these details. And now, I had to see my efforts go to waste? However, once I was able to look at it from a higher perspective, I realized that the market would not wait for us. One more day we delay the deployment for pixel pushing would mean a loss in profit. From the user’s perspective, it would mean one more day that they have to “suffer” from the same old, clunky user experience.
Once I understood why the team made the tradeoff, I wished I had spent more time understanding how things were built and what the strategy was, so I could provide a more efficient design solution.
It’s when I put my designer’s ego aside and focused on what truly matters to the users, that I was able to make a greater impact.