Messaging Modernization

Overview

The existing messaging room lacked modern chat functionality and clarity. Users were losing context, threads were hard to find, and the system design did not align with upcoming app redesigns. I redesigned the experience to create a more intuitive, organized, and accessible messaging interface.

Challenges

• Users did not use or understand threads
• Lost context when navigating through cockpit views
• Lack of modern messaging features such as quoting and replies
• The interface did not align with the new design system

Research

I interviewed Solutions Engineers, gathered customer feedback, analyzed competitor designs and APIs, and studied discussions on what users valued in chat tools.

Approach

Key Innovation

Conducted comparative analysis of modern chat systems (Slack, Discord, Teams) to identify user expectations and established patterns, then strategically adapted these patterns to fit existing technical constraints while maintaining comprehensive accessibility standards throughout.

Process

1. Created sketches and whiteboard wireframes to explore layout and context flow
2. Designed high-fidelity screens in Sketch to visualize quoting, replies, and side-by-side threads
3. Simplified overflow and action menus for clearer user interactions
4. Added contextual information blocks to maintain message relevance
5. Built accessibility checks using AxeDev Tools and screen readers
6. Rebuilt and documented UI code in Storybook to support scalability and easier debugging
7. Implemented frontend components in Vue/SCSS with full ARIA support and semantic HTML
8. Released under a feature flag for internal testing in production environments
9. Collected feedback from real users and adjusted for long text, system messages, and user access levels
10. Improved sizing and screen reader text after real-world testing

Results

Impact

• Organized, modern, and accessible messaging experience that users could navigate intuitively
• Reduced admin cleanup and increased contextual awareness through threaded conversations
• Seamlessly integrated into the upcoming app redesign with consistent visual and interaction patterns
• Matched modern user expectations for communication features like quoting and replies
• Improved accessibility compliance with proper ARIA support and screen reader optimization

Tools & Methods

• Sketch for high-fidelity design and prototyping
• Whiteboard ideation and pen & paper sketching
• AxeDev Tools and macOS screen readers for accessibility testing
• Vue/SCSS for component implementation
• Storybook for component documentation and design system
• Feature flag testing with real users in production