Victoria's secret design sytem
Role:
UX & UI designer
Year:
Sep 2023 - Present
I have undertaken a diverse range of responsibilities, including building the design system and toolkit at Victoria’s Secret, establishing design-to-development workflows, and ensuring WCAG compliance across digital platforms. My role involved creating scalable UI components, redesigning inconsistent patterns, and introducing processes and documentation that streamlined collaboration between designers and developers. I also conducted WCAG audits, resolved over 100 accessibility issues, and achieved certification for compliance improvements. In addition, I facilitated training sessions, onboarding of the design system to ensure adoption across teams.
Design System Practices & Methods:
Specific component UX research
UI design
QA of implementation
Style Guide
Toolkit library
UI Inventory
UX Audit
Accessibility Integration
Software
Built victoria's secret's design system and toolkit in figma, transforming inconsistent website elements into resuable, accessible components. Collaborated with design leads and developers, focusing on UI/UX design, accessibility, and scalable design-to-dev processes.
The challenge & solutions
The challenge
While working at Victoria’s Secret, I faced several key challenges that needed to be addressed in order to establish a scalable and efficient design system:
No existing design system or toolkit prior to my joining.
Website had inconsistent UI (duplicate button styles, uneven padding, irregular swatches).
100+ WCAG compliance issues went unnoticed before accessibility testing
No defined process for design-to-dev handoff or component usage.
The Benefits
Serves as a single source of truth for components, patterns, and styles across web and mobile.
Enables scalable updates — new changes can be implemented efficiently without disrupting existing designs.
Allows design and development teams to focus on complex problems and solutions rather than tweaking visual details, ensuring consistency both visually and functionally.
Speeds up design replication by leveraging pre-built components and patterns.
Reduces redundancy by eliminating the need to recreate components, ensuring a consistent user experience.
Minimizes wasted design and development time caused by miscommunication or inconsistent implementations.
The style guide consisted of:
These style guides are incorporated into the component library as well, to provide relevant guidance in context.
In-page annotations
Branding foundations
Spacing guidelines
Layout grids
Iconography
Border radius rules etc..
I created a comprehensive component list by auditing the existing website to identify frequently used elements and documenting additional components needed for future scalability. Building this library required significant time and effort, but it established a strong foundation for a consistent and reusable design system.
The approach
The website already had an established visual style, but there was no formal design system in place. We started by extracting and organizing these styles — colors, typography, spacing, and iconography — into a cohesive style guide, which then became the foundation for all components and patterns in the design system.
The component library consists of:
These style guides are incorporated into the component library as well, to provide relevant guidance in context.
Usage Guidelines
Clear instructions on when and how to use the component (and when not to).
Accessibility Notes
WCAG compliance checks to pass AA standards.
Variants & Properties
Different sizes, styles, and behaviors
Responsive Behavior
How the component adapts across desktop and mobile.
Do’s & Don’ts
Quick visual examples of correct vs. incorrect usage.
Version History / Change Log
Notes on updates, so teams know what changed and why.
Victoria's secret design system
Role:
UX & UI designer
Year:
Sep 2023 - Present
I have undertaken a diverse range of responsibilities, including building the design system and toolkit at Victoria’s Secret, establishing design-to-development workflows, and ensuring WCAG compliance across digital platforms. My role involved creating scalable UI components, redesigning inconsistent patterns, and introducing processes and documentation that streamlined collaboration between designers and developers. I also conducted WCAG audits, resolved over 100 accessibility issues, and achieved certification for compliance improvements. In addition, I facilitated training sessions, onboarding of the design system to ensure adoption across teams.
Design system practices & methods:
Specific component UX research
UI design
QA of implementation
Style Guide
Toolkit library
UI Inventory
UX Audit
Accessibility Integration
Software
Built victoria's secret's design system and toolkit in figma, transforming inconsistent website elements into resuable, accessible components. Collaborated with design leads and developers, focusing on UI/UX design, accessibility, and scalable design-to-dev processes.
My design Principles
Be meaningful
Everything we develop should focus on simplifying the complex by removing what isn’t necessary.
Our UI components, design and motion communicates the story of an object, how to use it, whether it’s active or not, when it’s been used to take an action, where it’s gone when it’s no longer visible.
Establish familiarity
Our products are individually tailored to best meet our users needs and at the same time remain visually and behaviourally harmonious.
Our patterns are consistent. Same functions look and behave the same way.
Familiarity across our products reduces cognitive load for our users and ensures our design system is as efficient as possible, reducing repetitive work.
Collaborate often
Our design system is a living breathing ecosystem developed in collaboration between our designers, engineers, researchers and project stakeholders.
We encourage contribution, accessibility and share ideas regularly.
Our design system is approachable and learnable and also powerful and efficient for those who are more experienced.
The challenge & solutions
The challenge
While working at Victoria’s Secret, I faced several key challenges that needed to be addressed in order to establish a scalable and efficient design system:
No existing design system or toolkit prior to my joining.
Website had inconsistent UI (duplicate button styles, uneven padding, irregular swatches).
100+ WCAG compliance issues went unnoticed before accessibility testing
No defined process for design-to-dev handoff or component usage.
The benefits
Serves as a single source of truth for components, patterns, and styles across web and mobile.
Enables scalable updates — new changes can be implemented efficiently without disrupting existing designs.
Allows design and development teams to focus on complex problems and solutions rather than tweaking visual details, ensuring consistency both visually and functionally.
Speeds up design replication by leveraging pre-built components and patterns.
Reduces redundancy by eliminating the need to recreate components, ensuring a consistent user experience.
Minimizes wasted design and development time caused by miscommunication or inconsistent implementations.
The style guide consisted of:
These style guides are incorporated into the component library as well, to provide relevant guidance in context.
In-page annotations
Branding foundations
Spacing guidelines
Layout grids
Iconography
Border radius rules etc..
I created a comprehensive component list by auditing the existing website to identify frequently used elements and documenting additional components needed for future scalability. Building this library required significant time and effort, but it established a strong foundation for a consistent and reusable design system.
The approach
The website already had an established visual style, but there was no formal design system in place. We started by extracting and organizing these styles — colors, typography, spacing, and iconography — into a cohesive style guide, which then became the foundation for all components and patterns in the design system.
The component library consists of:
These style guides are incorporated into the component library as well, to provide relevant guidance in context.
Usage Guidelines
Clear instructions on when and how to use the component (and when not to).
Accessibility Notes
WCAG compliance checks to pass AA standards.
Usage Guidelines
Clear instructions on when and how to use the component (and when not to).
Variants & Properties
Different sizes, styles, and behaviors
Responsive Behavior
How the component adapts across desktop and mobile.
Do’s & Don’ts
Quick visual examples of correct vs. incorrect usage.
Version History / Change Log
Notes on updates, so teams know what changed and why.
Documentation
Confidential – Can walk through live
Documentation was always included directly on the same page as the component, ensuring that designers and developers had immediate context. This consisted of:
A clear explanation of what the component is and its intended purpose, with additional do’s and don’ts for proper usage.
Picture references and annotated examples to make the component’s appearance and behavior unmistakably clear.
Guidance on when to use the component, when not to use it, and how to implement it effectively.
Specific WCAG compliance considerations, such as color contrast, focus states, and keyboard navigation.
Documentation of how the component adapts across breakpoints (desktop, and mobile).
Variants and states – Details on default styles, hover/active states, error states, and other variations for consistency.
Cross -Functional collaboration
The website already had an established visual style, but there was no formal design system in place. We started by extracting and organizing these styles — colors, typography, spacing, and iconography — into a cohesive style guide, which then became the foundation for all components and patterns in the design system.
When I joined, the Victoria’s Secret website had not undergone accessibility testing, and a WCAG audit revealed more than 100 compliance issues. I took the lead in identifying and resolving these problems, redesigning components to improve color contrast, focus states, keyboard navigation, and error messaging. I also worked closely with developers to ensure fixes were consistently implemented across both web and mobile. As a result, the system became WCAG AA compliant, and I was recognized with a certificate for resolving 100+ accessibility issues in a short timeframe.
Confidential – Can walk through live
Documentation
Documentation was always included directly on the same page as the component, ensuring that designers and developers had immediate context. This consisted of:
A clear explanation of what the component is and its intended purpose, with additional do’s and don’ts for proper usage.
Picture references and annotated examples to make the component’s appearance and behavior unmistakably clear.
Guidance on when to use the component, when not to use it, and how to implement it effectively.
Specific WCAG compliance considerations, such as color contrast, focus states, and keyboard navigation.
Documentation of how the component adapts across breakpoints (desktop, and mobile).
Variants and states – Details on default styles, hover/active states, error states, and other variations for consistency.
Cross-Functional Collaboration
The website already had an established visual style, but there was no formal design system in place. We started by extracting and organizing these styles — colors, typography, spacing, and iconography — into a cohesive style guide, which then became the foundation for all components and patterns in the design system.