As part of a system-wide UX overhaul, I led the redesign of the settings architecture for wallboard slides and custom widgets. Previously, these settings were presented in modal steppers, linear, interruptive, and difficult to scale. My challenge was to migrate these into a new slide-out panel framework that supports modular sections, improves discoverability, and aligns with our evolving design system.
Problem Statement
Our design system recently introduced a new slide-out settings framework for dashboard configurations, anchored to the right side of the screen, modular, and context-preserving. While this solved major usability issues in dashboard workflows, our wallboards still relied on modal steppers for configuring slide types and custom widgets. These modals were linear, interruptive, and inconsistent, making it difficult for users to navigate. My challenge was to adapt and extend the new slide-out framework to the wallboards ecosystem, transforming a fragmented experience into a unified, scalable architecture. This involved reworking settings for every wallboard slide type and custom widget, modularizing their configuration flows, and aligning them with our evolving design standards, all while preserving flexibility and clarity for users managing complex display logic.
Goals
Replace modal stepper settings with a scalable slide-out panel
Ensure consistency across all wallboard slide types and custom widgets
Improve user comprehension and reduce friction in configuration workflows
Future-proof the settings architecture for extensibility
Scope of Work
Slide Types Settings Refactored
Summary
Image
Video
Leaderboard
Racing
Spotlight
Custom Slide
Challenge
Games
Marketplace
Custom Slide Widget Settings Refactored
Current Agent States
Gauge
Image
Summary
Text
Thermometer
Top (Top Performer)
Agent Counter
KPI
Interval
Solution
Adopted a New Framework – Used the new slide-out settings pattern from dashboards and extended it to wallboards.
Mapped Existing Flows – Reviewed current modal setups to find common patterns and edge cases.
Built Modular Components – Created reusable sections and inputs to make the system flexible and scalable.
Improved User Experience – Kept wallboards visible during setup and added helpful features like inline validation.
Prepared for Growth – Designed the system to handle future widgets and slide types with minimal changes.
Impact
Improved Configuration Efficiency: Users now configure wallboard settings faster thanks to the streamlined slide-out panel and consistent UI patterns.
Scalable Architecture: The new framework supports both legacy model wrappers and future custom widgets, reducing developer overhead and enabling rapid feature expansion.
Enhanced Discoverability: Key settings are now surfaced contextually within the dashboard, reducing user confusion and support requests.
Design System Alignment: The solution harmonizes with evolving design standards, reducing fragmentation and improving cross-product consistency.
User Satisfaction: Usability testing showed a 30% increase in user confidence when configuring wallboards, especially among non-technical users.
Comparison Examples
Spotlight Settings Before and After
Modal vs Slideout
Before (Modal)
After (Slideout)
The spotlight settings remake was full of a lot of opportunity to improve some functions while adapting it to a new framework. Here are some of the changes that helped improve the usability of the design:
Steps 2-3 in the original layout where all moved inside the same section in the slide out
Included an upload image button option for the display image
Changed the toggle switch button for Biography, Hobbies, and Badges to checkboxes and added a collapse option for Biography and Hobbies
Changed the radio button options under Badges to a dropdown to conserve vertical space and show less clutter
Games Settings Before and After
Modal vs Slideout
Before (Modal)
After (Slideout)
The Games settings slideout settings adaption was a bit more complex but also full of opportunity to improve usability. Although I don’t show all instances of the settings in my examples, I can highlight some of the improvements made here:
Included a search dropdown input for users to search for a specific game they would like to select
Formatted much of the game details info to be vertical which made it easier to scan
Changed radio buttons to a select input which also leaves more room for future options without taking up more vertical space then necessary
Each game type had its own unique info and layout, of which I adapted the design for each one
Custom Slide Top Settings
Modal vs Slideout
Before (Modal)
After (Slideout)
The Custom Slide options were only slightly different from the other slide types, in that they had a subheading at the top indicating the widget type that is included on the custom slide. For the Top widget, which displays agents in top positions for specific metrics I have the following highlights I would like to mention:
Adapted everything to more of a vertical flow making scanning easier
Added the metric selection to its own section at the bottom of the settings, consistent to what the user would be used to on dashboard widget settings
Brought what was previously on the third step of the stepper to the details sections of the new slideout
What I Learned
This project deepened my expertise in scaling design system patterns across diverse contexts, particularly by adapting the slide-out settings framework to wallboards. While responsiveness wasn’t a core requirement, the constraints and layout challenges naturally highlighted my ability to think responsively, designing components that flex across screen sizes and configurations without compromising clarity or usability. I learned how to audit legacy flows, modularize UI elements, and build scalable systems that balance consistency with contextual nuance.
