Create a robust design system for platform migration to achieve digital governance where there was previously none. Fit into the framework of a built out theme while making improvements to current functionality of identified issues in discovery and solutioning for new features while bringing two new brands to the platform.
Lead designer and main point of contact for the Smartwool Brand Leaders on the UX team leading review presentations. Creating master components and master page layouts such as the product details page (PDP), product landing page (PLP) and more. Overseeing designers throughout the project, training in new hire, ensuring consistency in builds and checking work. Promote teamwork through hosting virtual working sessions on Mondays weekly and setting team goals and expectations for the remainder week.
We successfully delivered the design system in a record time of three months, from initial planning to developer handoff. Having a standardizes system in place has been beneficial for both the UX and Engineering teams having a source of truth for styles and basic components while being able to rapidly mockup new products and solutions to current platform limitations with for high fidelity prototypes for brand leaders.
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
