B2B · SAAS · WEB
Use data visualizations to quickly derive team analytics
Use data visualizations to quickly derive insights into team performance
Background
Build self service dashboard application to replace numerous variants of existing dashboards
Apple's contact center teams need dashboards to manage and monitor their team performance. As teams grew and needs varied, there were numerous variants developed and maintained. This resulted in duplicated/redundant effort. Different teams had different requests for customization, which took considerable time and effort to develop.
Hence, stakeholders decided to replace all these instances with a customizable, self serve dashboard application.
PROBLEM STATEMENT
Design a self service dashboard for Contact center team leads and managers to monitor and optimize performance
iScore was a web application for contact center leads and team managers to monitor, optimize performance, take operational and strategic decisions
Research
After project kickoff, I gathered requirements around the essential features and functionality
Domain research
I did domain research to understand the basics of Call center operation and metrics used to monitor its performance
Looked at existing dashboards, type of reports and charts generated. Also looked at the list of metrics the application need to host.
User research
My objective of user research was to identify types of reports the users generated and kind of inferences made from the reports.
Any existing tools/softwares that are being used, if any?.
The constraints/challenges with existing tools
I conducted remote interviews with 5 Contact center team Leads/Manager and 2 Regional manager.
Features Review
Once i gathered all the required insights with the user research. I was able to identify that there were three phases of user journey while using this application. Based on which I came up with list features which you ease user pain points and enhance the experience .
CHALLENGE
Design a MVP workflow builder to automate SaaS renewal, in the shortest time to validate market fit
The initial phase involved to build an MVP product to valid product-market fit, so we want to build just enough critical features that can make this feature usable by our customers. So we can valid the hypothesis of SaaS renewals being a recurring pain point and solution address the problem adequately enough for customers to buy this new offering.
Ability to apply complex filters
Modular grid
Support different levels of detail for each metric
Need ability to share views among other team members
Drag and drop was most preferred method to build dashboards
Two dimensional visualization such as Bar and Line chart preferred
Regional managers need views to monitor multiple teams
Users prefer simple data visualizations
Ability to drill down data
Ideation
Widget designs
As first part of ideation, I started to design the core component of the dashboard, the widgets. I came with an approach of modular grid system, as base framework to house all these widgets
6*6 Modular grid ensured to keep max API calls under 36 in any single view
Four different widgets sizes to support different level of visualizations
Small Widget - 1*1 modular grid
Medium Widget - 3*2 modular grid
Large widget - 4*4 modular grid
Extra large widget - 4*6 modular grid
Wireframes
Wireframes
Design iterations to evaluate tradeoff between good UX vs technology constraints,These designs were tested with users for validation. During testing I identified few improvement areas such as
- Need for describing each metric for users to choose.
- More screen space for users to be able to see more widgets within a single view
Creating a dashboard
Visual designs
Visual designs
Once we had a nailed down all the wireframes, I started to design the look and feel for the dashboard. For this case, I created a monochromatic scheme, with neutral shade as primary color and blue for accents.
Developer DOcumentation
Handoff documentation
I also created developer handoffs, detailing the widget views and its attributes
Aravind Rangaswamy · aravindrswamy@gmail.com · 669 225 8310