Building Design Systems

Duration

Ongoing time while at VF Corporation (1 Year), AKAIO New Build for Kyra Group (1 Year)

Role

Senior User Experience Designer

Tools

 

Summary of Work

Through out my time at VF Corporation - I was always building components that would become updates to Design Systems of the portfolio of VF Brands. This was a great period of design career to really get a foothold on how to best utilize Figma as a design tool at the enterprise level. Additionally I stood up a Brand and Design System for AKAIO - an AI powered SaaS platform.

Below you’ll see updates to:

  • Header, Footer and Global Navigation Elements for Altra & Smartwool

  • Product detail page components for the North-face

  • Gift for Purchase Pop Over for Altra

  • Full Design System Build for AKAIO

Homepage/Landing Page Component Redesign

Altra running shoes and Smartwool’s websites are going through a platform migration starting in 2023 to 2024. Our UX design team managing those brands were tasked with rebuilding the entire design system of both brands and optimizing it in Figma. I rebuild all the content modules across both brands leveraging updated font styles, icons, buttons. I went through a comprehensive process to build out:

  1. Component Elements: These were repeated elements to build content elements: things like sliders, star ratings, image styles and sizes. All of these elements had auto-layout properties applied so that these elements could be scaled for mobile, tablet and desktop

  2. Content Elements: Content modules were built out with variants to be able to show hide elements like text styles (eyebrows, titles, body copy), CTAs and aspects of product cards.

  3. Development Assets: Completed certain frameworks based on those content elements that were ready for designers to skin for development for the homepage of Altra and Smartwool

 

DS Updates to Global Navigation & Footer: Altra & Smartwool

Updated the header, footer and mega menu for Altra and Smartwool

  1. Header: Built with updates to search, the icon component library and two variants to responsively change from light to dark based on the time of day

  2. Mega-menu: Created to include a product card that could feature a product or category inside.

  3. Footer: Added with two variants to support various looks to give pages the option to display/hide each brand’s money back guarantee pitch

Core Elements for The North Face Product Detail Page

Built ‘Key Features’ Component & Optimized Ratings and Reviews for The North Face Product Detail Page

Worked as the Senior UX designer on a team to redesign The North Face product details page and identified key components that would improve the overall UI and customer experience.

Key Features Content Card

Our research determined that there was a need to display larger beautiful product images to highlight key features on the North Face technical products like winter apparel, activewear and shoes.

Ratings and Reviews

The North Face Ratings & Reviews section was enhanced to include new features that would make the experience of scanning reviews more easily and pleasurable for the end user with the following features:

  • Including filters to be able to sort by star ratings, most helpful or to only show reviews that featured customer uploaded imagery

  • An ability to see a gallery of customer provided images - an area of opportunity users asked for when we did a benchmark test

  • Showcasing a Northface athlete review to give a robust technically savvy user the spotlight to breakdown how a piece of gear endured at the highest levels of human performance.

Altra Gift for Purchase Update

Updated the free-gift with purchase experience for Altra.com to be more user friendly when a user would select a gift from the pop up.

AKAIO Design System

The AKAIO Design System is a custom-built, scalable framework that blends intuitive UX with enterprise-grade innovation tools. It streamlines complex data into visually compelling, decision-ready insights. With a modular architecture, dynamic trend visualization, and AI-assisted navigation, the system empowers global enterprises to uncover strategic opportunities and build future-proof partnerships effortlessly. Built for speed, clarity, and adaptability, it ensures seamless user experiences across innovation teams, executives, and consultants.

Below are some elements from the Design System that showcase some elements custom to the application that show a range of unique design elements specific to the platform.