Real-Time Supervisor Dashboard — Built for Salesforce integration
Optimizing crisis counselor management through a scalable, Lightning-native UI framework.
Visual System & Brand Integration
A comprehensive look at the renewed visual language — unified iconography, accessible color palette, optimized layouts, and component consistency across the WordPress ecosystem.
Project Overview
The Trevor Project required a scalable real-time dashboard to support crisis supervisors monitoring live counseling sessions. The goal was to design a Lightning-native UI inside Salesforce that streamlined supervision workflows, improved visibility into counselor activity, and enhanced response speed during high-stress situations.
My contribution focused on transforming complex interaction data into a clear, accessible interface that balanced empathy, structure, and performance.
Project Summary
Timeline & Team
3 months
Senior UX/UI Designer, Product Manager, Salesforce Engineering Team
Tools & Methodology
Figma, Salesforce SLDS v2
Wireframing, high-fidelity design system implementation, accessibility compliance
Key Deliverables
- • Modular UI Kit
- • Component library aligned with SLDS standards
- • Lightning tokens and theme variables
- • Accessibility documentation
Performance Metrics
Design consistency across all SLDS-integrated modules
(validated during QA reviews and cross-module UI audits)
Faster handoff between design and development
(measured by Jira sprint velocity and reduced rework tickets)
Reduction in accessibility-related QA issues
(after adopting SLDS-compliant color and typography tokens)
Problem Statement
Supervisors at The Trevor Project needed a centralized tool to monitor crisis counseling sessions in real time. Previous workflows relied on fragmented screens and manual tracking, increasing cognitive load and slowing response to high-risk cases.
The challenge was to design a unified, Lightning-native interface that simplified information flow and enabled confident, timely decisions.
Challenge
Creating a modular UI foundation within Salesforce while ensuring performance, accessibility, and scalability.
The system needed to adapt to different user roles, support multiple states (active, paused, completed sessions), and integrate seamlessly with existing data structures without disrupting platform stability.
Approach
Following a design-system-driven methodology:
- Research & Audit: Reviewed Salesforce Lightning patterns and internal supervision workflows.
- Wireframing: Mapped task sequences to reduce visual noise and cognitive friction during active sessions.
- Component Design: Built Lightning-compliant Figma components with defined states (hover, focus, disabled).
- Theme Integration: Applied Trevor Project's brand tokens (color, typography) while maintaining WCAG 2.2 contrast.
- Prototype Testing: Validated usability scenarios with stakeholders and adjusted UI density for optimal readability.
Solution
Delivered a fully responsive, data-driven Supervisor Dashboard built within Salesforce Lightning Design System v2.
The interface unified multiple real-time indicators—session status, counselor load, emergency protocols—into a single visual hierarchy.
The modular UI Kit and design tokens streamlined collaboration between design and engineering, ensuring long-term maintainability across internal tools.
Results
The redesigned system delivered measurable improvements in usability, accessibility, and cross-team collaboration. Supervisors experienced smoother workflows and clearer data visibility, while engineers reported reduced friction during implementation.
The project reinforced Salesforce Lightning best practices, enhanced design scalability, and improved user confidence—demonstrating how a unified design system can accelerate both delivery speed and product reliability.
Key Takeaway
Design systems can strengthen empathy-driven workflows when clarity, hierarchy, and accessibility are treated as inseparable elements of user experience.
Building within established frameworks like Salesforce Lightning allows teams to move faster without sacrificing craft or consistency.