Redesigning KPI widgets for dashboards
Company
Tools
Skills
Context + Challenge
During my co-op at Agilence Inc., I was given the opportunity to redesign a highlighted feature of their core product. The widget feature found on the KPI dashboards was out of date and needed to be redesigned to improve both functionality and update its appearance to match modern standards. This project was led by me with guidance from the product team manager.
My Role
UX Research - Learning about KPI widgets, doing market research for existing solutions, user research, surveys/interviews to understand user needs
UI Design - Led iterative design processes in Figma to explore different widget presentations and features
Presenting findings to teams - Presented my progress and findings in cross functional teams (product, engineering, customer success, marketing) and received feedback for improvements and further insight
An intro to Agilence Inc.
Agilence Inc. helps companies reduce shrink and increase their profit margins by targeting loss prevention operations and has a variety of customers (retail, restaurant, grocery, etc.) like CVS, Five Below, and L'Oréal. Agilence Inc. provides their customers with a software that helps them methodically track all interactions to help find where losses can be targeted and stopped. My role at Agilence during my co-op was UI/UX designer where I redesigned different features on the product side to help customers build reports more efficiently.
A dive into my starting point
Key issues of the pre-existing widgets
There were too many options of background color for the widgets, making them distracting when there were many multi-colored widgets next to each other
There wasn’t enough valuable content to take away! The role of a widget is to provide key information at a glance, but the pre-existing widgets had one key metric and categorical icon
The only additional information (enabled by toggle) available was a graph line that overlayed on the widget and had no point of reference of values to explain what it represented
UX Research
Planning my research process
First things first: I needed to know what KPI widgets were before I could even begin to design. Before this project, I worked on different features of the software and didn't have a lot of knowledge about retail products or what KPI even meant (it stands for key performance indicator). Understanding the purpose of KPI widgets, who the users are, and the different kinds of features/elements it can show was the first step I had to take.
My three research approaches
Departmental research
Interviews with the product, engineering, customer success, and marketing teams
to learn more about the product and users
Market research
Research existing softwares that use
KPI widgets and what features and
designs they include
User research
Create user personas and journey maps for different types of users based on what I learned from my interviews
UX Research
My market research findings
Most KPI widgets display a key metric which will be paired with supplemental info (like an increase or decrease value) to learn about the metric's impact
Graphs are a fantastic data visualizer but pose a few issues: they require a lot of space for readability and to have a wide enough range for analysis
The most important thing is for users to be able to intake a lot of info at one glance. The information in the widget needs to have different color coding, font sizes, and appropriate hierarchy for info to be taken easily and efficiently
A few widget examples I pulled from different sources
UX Research
User research
Identifying the features to include on the widgets relied on what the user's goals are. In order to understand who the target audience for these KPI widgets were, I spoke with different colleagues on the customer success team. Asking questions like 'for those who regularly use the dashboard, what positions or roles do they have within their company', 'what are day-to-day goals versus long term foals for these specific users', and 'what are the top motivators for someone to open a dashboard' helped me learn the intentions of the user base. It was also really insightful to ask about examples of how different existing customers used the widgets–some were really creative with how they created and organized them.
UI Design
Design: Phase 01
My first pass of design was one I had actually done prior to my research process. I wanted a version of quick design where I applied my initial ideas for improvement for the original widgets before diving into research-based design. Here I experimented with simple layouts and colors.
