KPI cards redesign
Project Title:
Redesign of KPI Cards for Enhanced User Interaction
Objective:
To address and resolve design issues in KPI cards, ensuring they are user-friendly, interactive, and accessible to all users, including those who are colorblind.
Project overview
Problem Statement
KPI cards can be perplexing and are not accessible to individuals with color blindness.
Success of the task is creating a solution that is accepted by the users and does not confuse them.
The current design of KPI cards presents several usability issues:
❌ Users are unaware that some KPIs are interactive.
❌ There is no clear indication of the type of interaction (link or filter) on the KPIs.
❌ Color-coded cards (blue, yellow, red) are often confused with chart items due to similar colors.
❌ Colorblind users cannot differentiate KPI statuses.
❌ Selected filtering KPIs are overly dominant, overpowering the entire page.
Current solution state
To assess issues with the current solution, I have conducted research actions:
Analytical Tool Insights:
Randomly clicking on all the KPIs on the page, including those that are static, and clicking on the KPI that is a hyperlink then navigating back..
Feedback Tickets:
Users raised tickets via the feedback feature inside the platform.
User Interviews:
Direct feedback was gathered during user interviews that I have performed.
Research
Solution
Key Improvements:
Interaction Clarity:
Added buttons on KPI cards that clearly state the type of interaction: "Filter," "View More," or "Details."
Distinct Color Scheme:
Changed the color scheme of KPI cards to shades and vibrancy distinct from the chart palette to avoid confusion.
Clear Marking for Filters:
Implemented clear markings on KPI cards that act as filters, ensuring they are easily identifiable.
Accessibility for Colorblind Users:
Indicated KPI status with smaller elements that change in size according to severity, catering to colorblind users.
Ensured these elements provide visual cues that do not rely solely on color.
Improved user awareness of KPI interactivity and the type of interactions available.
Reduced confusion between KPI cards and chart items due to the distinct color scheme.
Enhanced accessibility, allowing colorblind users to differentiate KPI statuses easily.
Created a more balanced visual impact on the page by managing the prominence of selected filtering KPIs.
Tests showed that new KPI cards were more intuitive, distinguishable, and accessible, enhancing overall user experience and interaction with the platform.