DSM Theme Switcher Component

How to Promote New Feature?

  • Using a high-contrast 'NEW' banner

  • From the design system

  • Captures attention without disrupting the UI

  • Adding the 'NEW' banner directly into the coach mark

  • Drew attention to the feature while giving context

  • Serves both a visual nudge and a brief explanation of what’s new.

  • Simple coach mark without a 'NEW' banner

  • Keeps the experience clean

  • Easy to implement

    We chose this approach.

  • Inspired by Google Pixel’s feature announcements (a centered modal with a dimmed background)

  • Highlights the new feature

  • Prompts users to take action before continuing

Final Flow of DSM
How to Promote New Feature?

  • Using a high-contrast 'NEW' banner

  • From the design system

  • Captures attention without disrupting the UI

  • Adding the 'NEW' banner directly into the coach mark

  • Drew attention to the feature while giving context

  • Serves both a visual nudge and a brief explanation of what’s new.

  • Simple coach mark without a 'NEW' banner

  • Keeps the experience clean

  • Easy to implement

    We chose this approach.

  • Inspired by Google Pixel’s feature announcements (a centered modal with a dimmed background)

  • Highlights the new feature

  • Prompts users to take action before continuing

Sophie Kamenov

Sophie Kamenov

resume

resume

resume

DSM Theme Switcher Component

DSM Theme Switcher Component

Problem
DSM was visually inconsistent with the rest of the company’s product suite. While other products used dark mode by default, DSM remained in light mode, causing two key issues:

  • Visual Inconsistency Across the Suite: DSM felt outdated and out of sync with newer Fortanix products.

  • User Risk from Abrupt Changes Between Products


Solution
Implement a Theme Preference switcher that enables users to toggle between light, dark, and system modes, improving usability by 5%. We prioritized a solution that was discoverable, non-disruptive, and visually aligned with platform standards.

Legacy Flow of DSM
Legacy Flow of DSM

  • Placed under profile settings

  • Accessed from user dropdown

  • Users able to preview light/dark modes through thumbnails

  • More clicks, but in familiar space

  • Placed under profile settings

  • Accessed from user dropdown

  • Users able to preview light/dark modes through thumbnails

  • More clicks, but in familiar space

Flow Option 1
Flow Option 1

menu

menu

menu

  • Plain, simple

  • Color matches header

  • Smaller font size

  • Plain, simple

  • Color matches header

  • Smaller font size

Flow Option 2

  • Directly in the profile dropdown

  • Reduced clicks

  • Improved visibility

  • Intuitive

    We chose this approach.

Problem
DSM was visually inconsistent with the rest of the company’s product suite. While other products used dark mode by default, DSM remained in light mode, causing two key issues:

  • Visual Inconsistency Across the Suite: DSM felt outdated and out of sync with newer Fortanix products.

  • User Risk from Abrupt Changes Between Products


Solution
Implement a Theme Preference switcher that enables users to toggle between light, dark, and system modes, improving usability by 5%. We prioritized a solution that was discoverable, non-disruptive, and visually aligned with platform standards.

Flow Option 2

  • Directly in the profile dropdown

  • Reduced clicks

  • Improved visibility

  • Intuitive

    We chose this approach.

Problem
DSM was visually inconsistent with the rest of the company’s product suite. While other products used dark mode by default, DSM remained in light mode, causing two key issues:

  • Visual Inconsistency Across the Suite: DSM felt outdated and out of sync with newer Fortanix products.

  • User Risk from Abrupt Changes Between Products


Solution
Implement a Theme Preference switcher that enables users to toggle between light, dark, and system modes, improving usability by 5%. We prioritized a solution that was discoverable, non-disruptive, and visually aligned with platform standards.

  • Small screen previews appear upon clicking on "Theme Preference" tab

  • Offers clear visual cue before making selection

  • Clutters and overwhelms the space

  • Directly clicking on a theme and page instantly changes

  • Keeps experience simple and intuitive

  • Reduces steps

  • Cuts visual clutter

  • encourages exploration

  • Adding icons next to each selection

  • More familiar and easy to recognize

  • Modern take

  • Improves accessibility

  • Easier for screen reader support

    We chose this approach.

How to Make it Visually Recognizable?
Flow Option 2

  • Directly in the profile dropdown

  • Reduced clicks

  • Improved visibility

  • Intuitive

    We chose this approach.

Final Flow of DSM
Final Flow of DSM

  • Adding icons next to teach selection

  • More familiar and easy to recognize

  • Modern take

  • Improves accessibility

  • Easier for screen reader support

    We chose this approach

  • Directly clicking on a theme and page instantly changes

  • Keeps experience simple and intuitive

  • Reduces steps

  • Cuts visual clutter

  • encourages exploration

  • Small screen previews appear upon clicking on "Theme Preference" tab

  • Offers clear visual cue before making selection

  • Clutters and overwhelms the space

How to Make It Visually Recognizable?

  • Small screen previews appear upon clicking on "Theme Preference" tab

  • Offers clear visual cue before making selection

  • Clutters and overwhelms the space

  • Adding icons next to teach selection

  • More familiar and easy to recognize

  • Modern take

  • Improves accessibility

  • Easier for screen reader support

    We chose this approach

  • Directly clicking on a theme and page instantly changes

  • Keeps experience simple and intuitive

  • Reduces steps

  • Cuts visual clutter

  • encourages exploration

Fortanix, an data and AI security company, Data Security Manager, launched in 2021, is its original data security SaaS product but hasn’t been updated to align with the newer design system. While other products use dark mode by default, DSM remains in light mode, creating inconsistency. To address this, I collaborated with senior designers to design and promote a smooth, user-friendly theme switcher, modernizing DSM and visually aligning it with the rest of the Fortanix suite while ensuring an easy user transition.

Feature Promotion

Dark Mode

Consistency

Discoverability

Fortanix, an data and AI security company, Data Security Manager, launched in 2021, is its original data security SaaS product but hasn’t been updated to align with the newer design system. While other products use dark mode by default, DSM remains in light mode, creating inconsistency. To address this, I collaborated with senior designers to design and promote a smooth, user-friendly theme switcher, modernizing DSM and visually aligning it with the rest of the Fortanix suite while ensuring an easy user transition.

Feature Promotion

Feature Promotion

Dark Mode

Dark Mode

Consistency

Consistency

Discoverability

Discoverability

Feature Promotion

Feature Promotion

Dark Mode

Dark Mode

Consistency

Consistency

Discoverability

Discoverability

Fortanix’s DSM, launched in 2021, is its original data security SaaS product but hasn’t been updated to align with the newer design system. While other products use dark mode by default, DSM remains in light mode, creating inconsistency. To address this, I collaborated with senior designers to design and promote a smooth, user-friendly theme switcher, modernizing DSM and visually aligning it with the rest of the Fortanix suite while ensuring an easy user transition.

How to Promote New Feature?

  • Using a high-contrast 'NEW' banner

  • From the design system

  • Captures attention without disrupting the UI

  • Inspired by Google Pixel’s feature announcements (a centered modal with a dimmed background)

  • Highlights the new feature

  • Prompts users to take action before continuing

  • Simple coach mark without a 'NEW' banner

  • Keeps the experience clean

  • Easy to implement

    We chose this approach.

  • Adding the 'NEW' banner directly into the coach mark

  • Drew attention to the feature while giving context

  • Serves both a visual nudge and a brief explanation of what’s new.