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.

May 10, 2025

Problem

Critical call actions were harder to find and easier to get wrong than they should be.

  • Controls competed for attention with no clear primary/secondary hierarchy.
  • Inconsistent iconography and labels made it harder to scan and recognize actions.
  • Weak affordances (hover/active/disabled states) led to misclicks and uncertainty.
  • Keyboard access and focus states were not reliable across states (ringing, on-call, hold).
  • Density and spacing caused accidental clicks on closely placed destructive or high-impact actions.
Callbar before redesign

Results

  • Reduced misclicks on critical controls 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%.
Callbar after redesignCallbar after redesign, Ai onCallbar after redesign, recording onCallbar supervisor listening inGroup call

Contextual & Error States

  • Defined explicit visual states for ringing, on-call, hold, transferring, recording, device muted/unavailable.
  • Introduced inline confirmations for destructive actions (end, remove participant) to reduce accidental taps.

Accessibility & Keyboard Shortcuts

  • WCAG AA compliant color and contrast for all states; high-contrast mode verified.
  • Logical tab order, visible focus ring, and shortcut hints for power users.

Responsiveness & Density

  • Adaptive layout from compact (narrow windows) to spacious (desktop) with consistent grouping.
  • Increased hit areas and spacing for high-risk controls to reduce errors.

Process

Callbar variantsCallbar actionsCallbar pop overCallbar mic activityIncoming call

Audit & Heuristics

  • Inventory of existing controls, labels, icons, and states; identified redundancy and conflicts.
  • Heuristic evaluation highlighted hierarchy, affordance, and feedback gaps.

Flows & Scenarios

  • Mapped core flows: start/receive call, transfer, add participant, device switch, record, hang up.
  • Captured edge cases: device unavailable, permissions, failed transfer, hold/resume.

Visual Exploration

  • Iterated on iconography set and label patterns; tested compact vs spacious variants.
  • Defined state tokens (hover, active, focus, danger) and elevation for feedback.
Language support GermanLanguage support SpanishLanguage support FrenchLanguage support Japanese

Prototyping & Testing

  • Built interactive prototypes; ran task-based tests with SMB and enterprise users.
  • Measured time-to-action, error rate, and user confidence; iterated based on findings.

Dev Handoff

  • Provided tokenized specs, interaction rules, and state tables.
  • Paired with engineering to validate keyboard navigation and ARIA roles.

Conclusion

The updated call bar makes the most important actions visible, scannable, and safe. Clear hierarchy, consistent iconography, and robust state feedback reduced errors and helped people act faster in critical moments. The result is a calmer, more confident in-call experience.

Next step: expand the pattern to video controls and explore role-based presets for admins and supervisors.

Made with ❤, thank you for reading.