With the retirement of Adobe XD, Adobe is building a new design system to be used in Figma called Spectrum 2.
Type of product
Web Design &Â Design System
Role
UXÂ Designer
Key responsibilities
Led updates and changes to the design system for Spectrum as well as the Adobe website design system.
Fluent 2 is Adobeâs next-generation design language. The goal was to align all Adobe cloud products to a more modern, accessible, and performant interface standard. But layout discrepancies were slowing things down. My role was to create a reusable, token-driven layout model that could be adopted across multiple teams with minimal friction.
01
What: Introduced a toggle that enables users to disable animations across the Spectrum 2 website.
02
Why: Heavy animations can hinder navigation for visually impaired users and slow down experiences for users on lower internet speeds.
03
So What: Supports Adobeâs "Design for All" principle and empowers users with more control over their browsing experience.
Inspired by military GPS vests, I designed Vestagogoâa Bluetooth-powered wearable that delivers navigational cues through vibration.
Now, those 4 solutions were made quickly right? But how do we prioritize without using any time for typical user validation or testing? I focused on the solution about reducing the animations since it required the least effort to create while providing high impact.
After evaluating the potential impact of each solution, I selected the most effective options based on the principles outlined above. I decided to prioritize the following:
Why? Because this impacts the most people and we can improve other relevant kpis like user engagement and scroll distance.
Today
Some other day
However, the dynamic motion graphics used by the product and marketing teams were a point of contention. These elements were an important part of the brand identity, and the team was hesitant to reduce them.
To compromise and address both accessibility and brand needs, I proposed an interactive solution where users could toggle the visibility of animations:
01
Secondary Button: A dedicated button to turn animations on/off.
02
Toggle: A toggle switch to control dynamic content.
03
Checkbox: A checkbox where users could consent to seeing dynamic content.
04
Custom button: the custom button was a âshoot for the starsâ custom component that would draw attention to the button.
Inspired by military GPS vests, I designed Vestagogoâa Bluetooth-powered wearable that delivers navigational cues through vibration.
We landed on the toggle switch, as it felt most intuitive and familiar to users. It minimized visual disruption while providing instant controlâespecially important for accessibility preferences and consent design patterns.
02
â
20% of returning users used the animation toggle in the first month
03
𧩠Improved accessibility and reduced cognitive strain
04
âïž Minimal dev effort; fast to implement, easy to QA
05
đ§ Empowered users to customize their visual experience
Inspired by military GPS vests, I designed Vestagogoâa Bluetooth-powered wearable that delivers navigational cues through vibration.
02
Thoughtful UX doesnât require massive overhaulsâsmall, user-centered changes can drive big results
03
Collaboration and compromise (especially with visual stakeholders) unlock the best solutions
04
Accessibility should be flexible, user-controlled, and built into the core system
Inspired by military GPS vests, I designed Vestagogoâa Bluetooth-powered wearable that delivers navigational cues through vibration.
02
This project proves that accessibility doesnât have to come at the cost of brand or speed. By embedding user control directly into the Spectrum 2 framework, Adobe created a richer, more inclusive digital environment. Even in just three days, good design made a measurable difference.
Inspired by military GPS vests, I designed Vestagogoâa Bluetooth-powered wearable that delivers navigational cues through vibration.
