Customer Support Chat Dashboard
The interface excels in clear compartmentalization of conversation threads, profile information, and notes, facilitating efficient multitasking. However, improvements could be made in reducing the visual complexity and improving the discoverability of some interactive icons and status indicators for faster user navigation.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity5
Visual Consistency, Imagery & Media2
Navigation & Structure1
Conversion & Actions3
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics3
Efficiency & Cognitive Load3
Flow & States Completeness2
Strategic DesignRecommended Fixes by Impact
0Critical
3Major
20Moderate
6Minor
Missing reassurance about data privacy around contact details
Major
Tone, Friendliness & Delight
The Problem
The contact details panel shows personal information such as address, phone number, and email without any wording or iconography to reassure users about data privacy or security.
Why it Matters
Users may feel uneasy or concerned about how their sensitive personal data is handled or shared, reducing their trust in the platform.
How to Fix
Add trust signals or a brief note near the personal data section confirming secure handling and privacy compliance, such as a privacy icon, tooltip, or short message.
Issue Highlights
Multiple Micro-steps in Chat Conversation Increase Task Completion Time
Major
Efficiency & Cognitive Load
The Problem
The chat interface presents the loan application process broken into many small sequential messages and responses, increasing time and effort to complete the task.
Why it Matters
Users must read and respond to many separate short messages, creating friction and slowing task progress.
How to Fix
Consolidate messages or offer users an overview form with fewer steps to speed loan application completion.
Issue Highlights
No clear action to respond to chatbot's offer
Major
Flow & States Completeness
The Problem
The chatbot ends the conversation by asking if the user would like to be connected to a mortgage advisor, but there are no visible buttons or input fields to explicitly confirm or deny this offer on screen.
Why it Matters
Users may be uncertain about how to proceed or respond to the chatbot's offer, causing confusion or hesitation to continue the flow.
How to Fix
Add clear response buttons (e.g., Yes/No) or input cues to let the user easily accept or decline the connection to a mortgage advisor.
Issue Highlights
Low contrast for light grey text in conversations list
Moderate
Color & Contrast
The Problem
The light grey text in the conversations list (e.g., 'Hi there. I have a few questions…' and timestamps) has low contrast against the white background, likely below WCAG AA standards for normal text.
Why it Matters
Low contrast text is harder to read, especially for users with visual impairments or in bright environments, reducing accessibility.
How to Fix
Increase the contrast by darkening the grey text color or changing the background slightly to improve readability and meet at least WCAG AA contrast ratio of 4.5:1 for normal text.
Issue Highlights
Different icon background styles for user avatars
Moderate
Visual Consistency, Imagery & Media
The Problem
The user avatars in the conversation list use circular colored backgrounds with initials, while the avatars in the chat bubbles and notes are circles with either blue or yellow backgrounds and different styling.
Why it Matters
Inconsistent avatar styles can confuse users about identity and reduce perceived interface polish.
How to Fix
Adopt a unified style for all avatar icons across conversation list, chat, and notes.
Issue Highlights
Small icons in message action bar
Moderate
Accessibility & Input Ergonomics
The Problem
The icons in the bottom message action bar (emoji, paperclip, tag, smiley, etc.) are visually small and likely smaller than the recommended minimum touch target size of 32x32 pixels.
Why it Matters
Small touch targets increase error rates and reduce usability for touch users and those with limited dexterity.
How to Fix
Increase the touch target size of these icons, for instance by adding padding or a transparent hit area maintaining visual design but allowing easier interaction.
Issue Highlights
Dim grey text for conversation timestamps
Moderate
Color & Contrast
The Problem
The timestamp text like 'Just now' and '1 hour ago' in the conversation list uses a dim grey color on white background, likely below the required contrast ratio of 4.5:1 for normal text.
Why it Matters
Users may have difficulty reading timestamps, reducing the clarity of message timelines.
How to Fix
Use a darker grey or black color for timestamps to meet WCAG contrast guidelines.
Issue Highlights
Ambiguous timestamps on notes without timezone
Moderate
Ambiguous Date/Time/Timezone
The Problem
Timestamps for notes (e.g., '10 March 2020 3:36 PM') lack timezone or context, making it unclear which timezone the times refer to.
Why it Matters
Users may misinterpret when notes were added, causing confusion in collaboration or response timing.
How to Fix
Include timezone abbreviations or convert timestamps to user-local time with appropriate labels.
Issue Highlights
Inconsistent speech bubble design in chat conversation
Moderate
Visual Consistency, Imagery & Media
The Problem
The chatbot's speech bubbles are bright blue with rounded corners, while the user's messages are pale blue and more rectangular with less distinct rounding, causing inconsistency within the chat UI.
Why it Matters
Users may find the conversation harder to follow due to inconsistent visual cues, reducing clarity between speaker roles.
How to Fix
Standardize the speech bubble style for both parties by matching the shape and corner rounding with distinct color differences only.
Issue Highlights
Unlabeled icons in conversation action bar
Moderate
Visual Consistency, Imagery & Media
The Problem
The row of icons below the conversation chat area (e.g., SMS, email, phone, etc.) have no visible labels or tooltips, making it unclear what each represents.
Why it Matters
Users might struggle to understand icon functions, increasing cognitive load and errors.
How to Fix
Add labels or tooltips to each icon for clarity.
Issue Highlights
Missing Clear Page or Section Title in Main Content Header
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
The main content area is labeled 'Conversations' on the top left, but there is no clear, prominent page title or breadcrumb structure indicating the specific location or context within the app. The sub-navigation above the message thread (Assigned, Snoozed, Queued) is not very distinct.
Why it Matters
Users can struggle to understand exactly where they are in the app, especially if they navigate away and return or switch contexts quickly.
How to Fix
Provide a clear, visible page title or breadcrumb navigation at the top of the main content area that indicates the exact current section or workflow.
Issue Highlights
Small text action icons in conversation list
Moderate
Accessibility & Input Ergonomics
The Problem
The action icons (SMS, email, messenger) next to each conversation in the left panel appear to be less than 32x32 pixels, making them small targets for touch input.
Why it Matters
Small touch targets can cause user frustration and input errors, especially on touch devices or for users with motor impairments.
How to Fix
Increase the touch target size of these icons to at least 32x32 pixels by adding padding or margin around the visible icons without visually enlarging them.
Issue Highlights
Icons in conversation list are tightly spaced
Moderate
Accessibility & Input Ergonomics
The Problem
The small action icons next to names in the conversation list are placed close to one another horizontally with little spacing, making it possible to accidentally tap the wrong icon.
Why it Matters
Too-close touch targets increase the chance of user errors and frustration when trying to select one icon.
How to Fix
Increase horizontal spacing between the clickable icons in the conversation list to at least 8-10 pixels apart to avoid accidental taps.
Issue Highlights
Light grey text in side panel metadata section is low contrast
Moderate
Color & Contrast
The Problem
The light grey text under the 'Notes' section (e.g., 'Note added by Elliott Foran...') on the dark grey background shows reduced contrast and might not fully meet WCAG AA for small text.
Why it Matters
Users with low vision or color deficiencies may struggle to read important metadata information, impacting usability.
How to Fix
Use a lighter color with higher luminance difference or increase font weight to improve text visibility on the dark background.
Issue Highlights
Insufficient visual hierarchy in notes section
Moderate
Content Readability & Clarity
The Problem
Notes content with highlighted backgrounds, author initials, and timestamps all appear visually similar in size and weight, lacking clear emphasis on the most important elements.
Why it Matters
Users may find it difficult to quickly scan and distinguish notes, authorship, and timestamps, reducing efficiency.
How to Fix
Use distinct font weights, sizes, or color contrast to differentiate author names and timestamps from note content.
Issue Highlights
No Clear Active State in Left Sidebar Navigation
Moderate
Navigation & Structure
The Problem
The left sidebar contains several icons for different navigation sections (headset, magnifying glass, messages, video, inbox, settings), but none display a clear active or selected state. The current active section is not visually distinct, making it harder for users to know which section they are in.
Why it Matters
Users may feel disoriented or confused about which main section they are currently using, increasing cognitive load and lowering efficiency.
How to Fix
Add a distinct active state highlight or background color to the currently selected navigation icon in the left sidebar to clearly indicate the active section.
Issue Highlights
No trust or empathy cues in chatbot language related to sensitive loan application
Moderate
Tone, Friendliness & Delight
The Problem
The chatbot messages about loan application and pre-approval lack empathetic language or privacy reassurances given the sensitive financial topic discussed.
Why it Matters
Conversational UI without empathetic tone around financial topics may reduce user comfort and trust leading to disengagement or skepticism.
How to Fix
Incorporate softer phrasing, privacy assurances, or friendly reassurances about data confidentiality within chatbot messages.
Issue Highlights
Multiple Yes/No Decisions Without Context Add Cognitive Burden
Moderate
Efficiency & Cognitive Load
The Problem
The chatbot asks several sequential yes/no questions (e.g., property ownership, first-time buyer) without visible context or guidance, increasing cognitive load.
Why it Matters
Users may feel overwhelmed by multiple binary choices without clear explanations or options for help.
How to Fix
Show progress steps or provide clearer options to reduce decision complexity and improve clarity.
Issue Highlights
Crowded Sidebar Tabs with Poorly Grouped Click Targets
Moderate
Navigation & Structure
The Problem
The right sidebar has multiple small tabs (Current status, Profile, Customer journey) and many individual interactive sections like 'Show' toggles within tight vertical spacing. This makes the sidebar visually cluttered and increases difficulty selecting the correct target without misclicks.
Why it Matters
Users may feel overwhelmed or frustrated with too many small, competing clickable areas in close proximity, which can slow down task completion.
How to Fix
Group related controls more clearly, increase vertical spacing between click targets, and consider collapsing or hiding less-used sections to reduce visual clutter.
Issue Highlights
Unclear next steps after chatbot offers connection to mortgage advisor
Moderate
Tone, Friendliness & Delight
The Problem
The chatbot ends with an offer to connect the user to a mortgage advisor but does not provide reassurance about what happens next or alternative options if user declines.
Why it Matters
Without clear guidance or recovery options, users may feel uncertain or pressured, negatively impacting their confidence in continuing the interaction.
How to Fix
Add follow-up text or options that explain what to expect after connection and provide an easy opt-out or alternative ways to proceed.
Issue Highlights
No indication of saving or sending message state
Moderate
Flow & States Completeness
The Problem
The interface shows a text input area and a send button, but there is no visible feedback for message sending progress, success, or failure.
Why it Matters
Without feedback, users may be unsure if their message was sent or if the system is processing, leading to confusion or repeated sends.
How to Fix
Add visual indicators like loading spinners or success/error notifications for message sending.
Issue Highlights
Chat conversation UI lacks visual hierarchy between user and bot messages
Moderate
Strategic Design
The Problem
Both user and bot messages use similar shapes and sizes for chat bubbles, distinguished primarily by color of blue shades. There is limited visual hierarchy, making it less immediately clear who is speaking.
Why it Matters
Users need to quickly differentiate between their own messages and the chatbot's replies to follow the conversation flow efficiently.
How to Fix
Use distinct shapes, styling, or additional labels/icons to clearly differentiate user and bot messages with stronger visual hierarchy.
Issue Highlights
Empty conversation section lacks guidance or call to action
Moderate
Flow & States Completeness
The Problem
The 'My conversations' section shows 4 conversations, but the screen does not show what happens if this list is empty or how to start a new conversation.
Why it Matters
New users or users with no conversations may have no guidance on how to begin the conversation flow, increasing friction or causing drop-off.
How to Fix
Provide an empty state message with instructions or a button to start a new conversation when this list is empty.
Issue Highlights
Right panel lacks clear highlight on active tab
Minor
Strategic Design
The Problem
The 'Profile' tab in the right-hand panel is active but only indicated by a subtle underline and text contrast. The other tabs 'Current status' and 'Customer journey' appear visually similar which can reduce clarity of the active state.
Why it Matters
Users may have difficulty quickly identifying which tab is currently active, impacting ease of navigation within the profile section.
How to Fix
Add stronger visual distinction for the active tab such as a background highlight, bolder text, or a more prominent underline.
Issue Highlights
Misaligned timestamps and message status indicators
Minor
Visual Consistency, Imagery & Media
The Problem
The timestamp on the right side chat messages and the status circles with initials appear unevenly spaced and misaligned with the message bubbles.
Why it Matters
Misalignment can reduce readability and give an unprofessional impression.
How to Fix
Align the timestamps and status circles vertically centered relative to their message bubbles with consistent spacing.
Issue Highlights
Send button icon-only without text label
Minor
Conversion & Actions
The Problem
The send button in the note input area is represented only by a paper plane icon without a clear textual label.
Why it Matters
Users may not recognize the action immediately, especially those less familiar with icon-only buttons, which can reduce ease of use.
How to Fix
Add a clear text label such as 'Send' alongside the icon or use a tooltip on hover to clarify the button's purpose.
Issue Highlights
Vertical misalignment in side panel tabs and status indicator
Minor
Visual Consistency, Imagery & Media
The Problem
The red exclamation status icon is not perfectly aligned vertically with the 'Current status' text, creating a slight visual imbalance.
Why it Matters
Small misalignments can distract users and give an impression of lower interface quality.
How to Fix
Adjust vertical placement so the icon and text baseline align properly.
Issue Highlights
No Clear User Role or Context Indication in Header
Minor
Orientation Missing (Environment/Role/Location)
The Problem
While the user name 'Cara Reynolds' is shown in the top-right sidebar header, there is no visible indication of the user's role, permissions, or environment context (e.g., agent, admin, support rep).
Why it Matters
Without role or environment information, users may be unsure of their capabilities or the context of their interface, leading to potential confusion.
How to Fix
Add a role label, badge, or environment indicator near the user name to clarify user context and role within the system.
Issue Highlights
Right Panel Notes Area Adds Visual Clutter Without Action
Minor
Efficiency & Cognitive Load
The Problem
The notes panel on the right shows multiple highlighted notes and metadata that create visual noise unrelated to the immediate chat interaction.
Why it Matters
Excess visual elements can distract from core chat functions and increase cognitive effort for users focusing on the conversation.
How to Fix
Collapse or hide non-essential notes by default to reduce visual distractions during key task flows.
Issue Highlights