Create a robust design system to support a multi-brand platform migration, introducing digital governance where none previously existed. Two brands were built within the constraints of an externally delivered theme, while UX enhancements were made to address identified issues. These included improving functionality, efficiency, and long-term scalability. In parallel, the system was retrofitted to support the initial brand post-development, ensuring consistency across all experiences.
This project was one of my early projects acting as lead UX designer and primary point of contact between UX and brand teams. With this role came many other responsibilites throughout the project lifecycle including:
In just three months from initial planning to developer handoff, we successfully launched a comprehensive design system. This rapid delivery provided both UX and Engineering teams with a unified source of truth for styles and foundational components. The system has significantly improved collaboration and efficiency, enabling teams to quickly prototype high-fidelity solutions and address platform limitations while maintaining brand consistency.
Altra, Dickies, Smartwool
Figma
Design Systems
Critical Thinking
Project Management
Leadership
Presentations
Alexis Dunn, Lead UX Designer
Myself, Lead UX Designer
Leah Roberts, UX Designer
Erin Horvath, UX Designer
Kit Silvers, UX Research
Jason Wilson, Product Designer
Phase One
Acting as a co-lead UX designer on this project, I was responsible for managing timelines, facilitating communication with product owners, and coordinating with an external agency handling the engineering work for the migration. I led communication for the Smartwool brand, while my partner, Alexis, managed the Altra Running brand. While we worked on the systems collaboratively between both brands, we acted as the UX Point Of Contact (POC) individually for each.
Our deliverables included two comprehensive design systems, encompassing global elements like typography, colors, input fields, image standardization, buttons, and global components (WYSIWYG tools) tailored for brand usage. Additionally, we designed and delivered key page layouts within the ecosystem, including the Homepage, Product Listing Page (PLP), Category Landing Page (CLP), and Product Details Page (PDP). These layouts integrated custom solutions that required extra documentation and collaboration with our partner agency, bridging gaps between UI/UX design and engineering.
Recognizing Skills
The ambitious timeline and breadth of work were significant challenges, especially given the small core team working on this project (just Alexis and myself). To meet deadlines, we strategically brought in designers from other teams when they had capacity. This approach not only helped us meet our objectives but also provided other UX team members with opportunities to expand their skill sets.
We brought in Kit, a UX Researcher eager to learn Figma components. They initially worked on building buttons for both brands, learning essential skills such as auto layout, text properties, booleans, and variants. This was a perfect task to hand off, as it allowed us to guide them and review their work through hands-on sessions.
Erin, from the mobile team, brought valuable insights from her experience with mobile native apps. This engaged us to think more deeply about responsive web design and unique characteristics we may be able to leverage. Erin built out a theme widget library, offering a deep dive into the various boolean properties and how to leverage them effectively, which enriched our system with more flexible components.
Jason contributed in a smaller but impactful capacity by focusing on more complex elements, such as filters. His product experience in building and governing platform components allowed us to think through the technical details, from atoms to organisms, and refine our design system accordingly.
Delivery & Thereafter
Throughout the project, we adhered to atomic design principles. However, I don't believe in a one-size-fits-all solution. As the system evolved, Leah, who joined the project later, offered a fresh perspective, questioning some of our setups and sparking essential discussions. This led to weekly working sessions where we reviewed our components, assessed scalability, and made necessary adjustments to ensure the design system was robust, adaptable, and easy for all team members to use.
Due to the complexity of the system and all that it entails, it is difficult to highlight all aspects within this portfolio setting. If you'd like a deeper dive into the system please contact me to schedule a review of process, components, and build decisions.
This project was a significant achievement, delivered in record time with a tight-knit team that efficiently managed multiple moving parts. Alexis and I led the charge, but the success of this project was also a testament to recognizing and utilizing the strengths of other team members. By fostering a collaborative environment, we were able to produce a comprehensive design system that set the foundation for digital governance and enhanced efficiency across the Smartwool and Altra Running brands. This system continues to be a reliable resource for UX designers, brand teams, and developers, supporting ongoing enhancements and streamlining communication.
Due to the speed of the build of this system, we took into account past projects and best practice learnings across the VF portfolio of brands while building this system along with the latest Figma tools that were available.
2024 Kaitlyn O’Malley
