Brooks Brothers Pattern Library
UI Case Study
Teams: Brooks Brothers
Problem:
“Since 1818, Brooks Brothers has upheld traditions and craftsmanship that have defined over 200 years of American style, dressing 39 presidents, along with industry leaders and cultural innovators,” but their website lacked the same consistency.
Solution
Create a uniform design system based on Brooks Brothers’ brand guidelines.
Lesson Learned
Consolidating 200 years of brand into the digital space comes with a lot of cooks and a lot of kitchens
Discovery
The first few months of working at Brooks Brothers, I took on an observational approach to learning the brand. Being the only UX Designer, I familiarized myself with the design systems in place through speaking with various teams, stakeholders, and digging through the servers
What I found were:
Continuous asks for various components and icons
Frustrated designers asked to stop their current projects to design icons that they had no interest in creating
Frustrated developers rushing to make a deadline without all the assets or information they needed to succeed
Frustrated leaders who had to deliver frustrating news
Print focused brand guidelines
High fidelity wireframes designed in heavy and inconsistent photoshop files
Badges saved in varying formats and resolutions.
There was no available library for patterns or design systems to make designing new features easier for anyone.
Goals
Audit web components
Create a consistent pattern library for more cohesive and productive designing
Design
Stakeholder input showed that the Brooks Brothers consumers were resistant to big changes on the website, so we created an initial set of components that pulled from existing ones, but allowed for better usability through Web Content Accessibility Guidelines (WCAG) 2.0 AA and UX best practices. I worked with the brand designers to ensure my designs matched their standards while also allowing for usability, and aligned these updates with the developers release schedules to ensure cohesion. Font sizes, icons and field heights were increased, colors were altered slightly, and a digital library was created and made accessible via cloud to all Brooks Brother’s designers and developers. Digital designers and front end Developers were also given a series of learning sessions and QAs with an Adobe representative to better understand how to design with the newly launched Adobe XD, the brand’s collaborative wireframing tool, to make designing for digital more collaborative, and ease the weight of the company servers as well as the developers’ hearts.
Analysis & Iteration
Pattern libraries are meant to be living and breathing documents. As new features were tested and introduced on site, the library also grew and evolved alongside it.
Results
Through this exercise we learned more about what each department needed from each other in order to create a cohesive site. Consolidating components and icons as well as migrating to a wireframing tool for new product features and updates allowed the digital designers and front end developers to focus on what they were hired to do, rather than hunt down the right icon, interaction design, or pattern.
User Interface Design