Call bar visual update
Redesigning Dialpad’s in-call control bar to improve clarity, reduce misclicks, and make high-frequency actions effortless across voice and video.
Problem
- •Critical call actions competed for attention with no clear primary/secondary hierarchy
- •Inconsistent iconography and labels made high-frequency actions harder to scan
- •Weak hover/active/disabled states led to misclicks and uncertainty
- •Keyboard access and focus states were unreliable across call states (ringing, on-call, hold)
- •Dense spacing increased accidental clicks on destructive or high-impact actions
Solution
- •Established a clear action hierarchy by grouping related controls and separating destructive actions
- •Introduced persistent labels for critical actions to improve recognition and reduce errors
- •Standardized iconography and interaction states (hover, active, disabled, focus, danger)
- •Designed explicit error/context states for edge cases like hold, transferring, and device unavailable
- •Improved accessibility with WCAG AA contrast, visible focus ring, and keyboard shortcuts
- •Built a responsive layout that adapts from compact to spacious while preserving grouping
Impact
- •Reduced misclicks on critical actions by 28% in beta
- •Decreased time-to-action for transfer and add-participant by 21%
- •Increased usage of advanced actions (record, device switch) by 15%
- •Increased usage of transfer/add-participant flows by 17% in beta
Role
- •Owned end-to-end design from heuristic audit through tokenized specs and handoff
- •Audited the existing call bar and cataloged controls, labels, states, and interaction gaps
- •Defined a scalable hierarchy system for primary/secondary/destructive actions
- •Designed a complete state model across ringing, active call, hold, transferring, recording, and failures
- •Explored compact vs spacious layouts and tuned spacing/hit areas for safety and speed
- •Prototyped key flows and validated error rate, confidence, and time-to-action in usability tests
- •Partnered with engineering to validate keyboard navigation, focus order, and ARIA behavior
Design Decisions
- •Prioritized frequency and risk - high-frequency actions stayed primary; destructive actions were isolated
- •Used consistent iconography + labels to improve scanability across dense layouts
- •Designed stateful feedback (focus/hover/disabled/danger) to make critical actions feel safe
- •Increased hit areas and spacing near high-impact controls to reduce accidental clicks
- •Verified accessibility in contrast and focus behavior to support keyboard-heavy users
- •Built a Figma plugin to surface accessibility and visual-impairment issues early in design.
Design Highlights
