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.
⏱️ Time Constraint: 3 days to ideate, prototype, and validate accessibility enhancements.
🎭 Stakeholder Sensitivity: Marketing and product teams emphasized the importance of dynamic visual branding.
🧠 UX Psychology Approach: Leaned heavily on cognitive load theory, Fitts’ Law, and Universal Design principles.
Due to the lack of time on a 3 day timeline, I made the iterations for the first day center around applying 4 core psychology design principle. Each visual design solution chose based on the psychological theories attached to them as illustrated below.
この文章はデザインやレイアウトの確認のために使用される仮のテキストです。内容には特に意味はありませんが、文章の長さや構成を視覚的に確認する目的で作成されています。山川草木が静かに揺れるような風景を想像させる言葉ではなく、純粋にスペースを埋めるためのものであり、読み手に特定の情報を提供するものではありません。このテキストは必要に応じて繰り返し使用可能で、デザインの調整に役立ちます。
01
この文章はデザインやレイアウトの確認のために使用される仮のテキストです
🌀 Reduce Animations
Cognitive Load Theory
Simplified visual complexity to reduce distraction, aiding users with ADHD or cognitive limitations.
Learn More: Cognitive Load Theory as shown by Tinder and Hopper
Principle: Cognitive Load Theory
By reducing motion-heavy elements, I ensured that users wouldn’t be overwhelmed by too much visual information, which can detract from the main content. Excessive movement can distract users, particularly those with ADHD or other cognitive challenges.
Psychological Insight: Cognitive load theory suggests that humans have limited cognitive resources, and too much movement or information can overload their capacity to process information. By reducing unnecessary animations, the site becomes easier to digest.
この文章はデザインやレイアウトの確認のために使用される仮のテキストです。内容には特に意味はありませんが、文章の長さや構成を視覚的に確認する目的で作成されています。山川草木が静かに揺れるような風景を想像させる言葉ではなく、純粋にスペースを埋めるためのものであり、読み手に特定の情報を提供するものではありません。このテキストは必要に応じて繰り返し使用可能で、デザインの調整に役立ちます。
01
この文章はデザインやレイアウトの確認のために使用される仮のテキストです
📏 Increase Padding
Fitts’ Law
Enlarged clickable areas for faster and more error-free navigation, helping users with motor challenges.
Learn More: Fitt’s Law as shown by Amazon and Adobe.
Principle: Fitt’s Law
Increasing the padding around key text and interactive elements made the content easier to skim and the clickable areas easier to target. This made the user interface more efficient and less frustrating for users.
Psychological Insight: According to Fitt’s Law, the time required to reach a target is a function of the distance to the target and its size. Larger and more spaced-out elements are easier and faster to click, improving usability for all users, including those with motor disabilities.
この文章はデザインやレイアウトの確認のために使用される仮のテキストです。内容には特に意味はありませんが、文章の長さや構成を視覚的に確認する目的で作成されています。山川草木が静かに揺れるような風景を想像させる言葉ではなく、純粋にスペースを埋めるためのものであり、読み手に特定の情報を提供するものではありません。このテキストは必要に応じて繰り返し使用可能で、デザインの調整に役立ちます。
01
この文章はデザインやレイアウトの確認のために使用される仮のテキストです
🖼️ Add Alt Text & Captions
Universal Design
Ensured all image-based content could be interpreted through screen readers and captions.
Learn More: Universal Design Principles as shown by general Airport design
Principle: Universal Design
Incorporating alt text and captions for all images ensures that visually impaired users can comprehend the content using screen readers. Alt text is essential for users who cannot see the images but still need to understand the information conveyed by the visuals.
Psychological Insight: Universal design emphasizes creating environments that are accessible to everyone, regardless of their abilities. Adding alt text ensures that all users, including those with visual impairments, have access to the same content.
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.
