Responsive Dashboard Design
Praiseworthy provides businesses with real-time customer feedback by allowing customers to individually review employees, like a privatized 'Yelp for employees'. Praiseworthy's most important customers, managers and above, who pay for the platform, have the lowest level of engagement. Managers loved seeing individual feedback data, but wanted to see this data in aggregate and in a digestible way.
Design a responsive dashboard that provides upper-level management with high-level but actionable data on their employees and customer experience.
I was on a team of 8 designers. I focused on:
- Ideation & Lo-fi wireframes
- Hi-fi prototyping & validation
- UI/Visual Design
I specifically owned the critical "Alerts" screens.
Responsive Web + Mobile
We identified metrics that were the most important to managers and designed a responsive dashboard that provides critical & actionable metrics to help managers make key decisions about their employees and customer experience. We also modernized and did a visual overhaul of their interface to better reflect brand principles.
Our designs will be developed in the latter half of 2017. Stay tuned!
User Interviews: Understanding Praiseworthy's Users
To understand who we were designing for, we interviewed 7 of Praiseworthy's current users: 3 associate-level employees and 4 regional managers and above. While we were designing a dashboard for upper-level management, we also wanted to learn from associates, who use the platform as well, to make sure we didn't negatively affect their experience.
Our goals were to understand:
- Why and how they use Praiseworthy
- What data they found most important
- How they respond to feedback and alerts
- How a dashboard could be useful
Synthesizing Insights: Defining Managers' Needs
Since we were designing a dashboard for upper level management, we focused on understanding how managers and directors currently use Praiseworthy and what information was most valuable to them. This helped us define the features and functionality of our dashboard. Some key insights were:
- Most important metrics: NPS, Praise Power, and Customer Satisfaction
- Alerts are critical: Managers log-in whenever there is an alert. They expect to close alerts within 24 - 48 hours.
- Ranking is important: Managers focus on bottom-performing employees/stores to take action on
- Dashboard Needs:
- Important metrics at a glance
- Ability to drill down into more detailed data
- Trends overtime
- Ranking of employees & stores
- Alerts response rate
- Information on alerts
Defining Product Goals & Design Principles
In addition to designing for managers' needs, we wanted our dashboard to align well with Praiseworthy's brand and product values of overall positivity.
Exploring as many alternatives as possible
Armed with our set of dashboard needs, persona, and product values, we used the Lean UX method to rapidly sketch, critique, and refine ideas. After dot-voting and agreeing on several core design elements, we converged on a set of mobile & desktop wireframes.
Creating a Lo-Fi Prototype & Iterating
After the design studio, two members of our team turned our sketches into wireframes in Sketch. We then showed a clickable prototype to the Praiseworthy co-founders for feedback, since they knew their customers well and were also users of the platform.
While we ideally wanted to get feedback from Praiseworthy's customers as well, they only had time for one round of validation testing. Given this and our tight timeline, we decided to design higher fidelity prototypes before putting our dashboard in front of Praiseworthy's delicate customers.
Here's a snapshot of a few of our screens after refining our designs according to feedback:
Style Guide: Overhauling the Existing Visual Language
Because we wanted to better reflect Praiseworthy's brand principles of positivity, we did a visual overhaul of their entire platform and created a style guide to keep our components and elements consistent. Praiseworthy also wanted to use material design principles as a basis for the interface.
To reduce the cost and increase the efficiency of software implementation, the hi-fi team (myself and two others) divided our design responsibilities by components. I owned the overall material "tile" design of the dashboard, as well as the Alerts section.
Alerts were managers' top priority, so it was the most critical page (aside from the overall dashboard) that needed to be designed. I wanted to highlight the most important information and signal important actions to take.
Here's a snapshot of a few other components the hi-fi team designed:
Putting it all together
Because we designed by components, it was relatively easy to create individual screens when it came time to put together a hi-fi prototype to test users with. Here's some of the main screens we designed:
Getting Feedback from Managers
To validate our designs with real users, we tested with 5 of Praiseworthy's customers. We wanted to know overall impressions, comprehension, and identify usability issues.
To test for usability, we gave managers a set of scenarios & tasks. Here's a few examples:
Filters: "Suppose you want to see which employees performed the worst at a certain location last month. How would you do that?"
Alerts: "Imagine you got a notification about a bad review. Can you show me how you would view that alert and close it?"
Rankings: "How would you go about seeing the worst performing teams for Date Range Y?"
Results & Refining the Dashboard
And...all customers easily navigated through the dashboard and understood the data! Huzzah! Here are some opportunities we identified for improvement:
- Overall Health: Customers wanted to see NPS along with Praise Power
- Alerts: Customers wanted to quickly see why an alert was closed and what sales transaction triggered the alert
- Rankings: Customers wanted to see rankings by other metrics besides Praise Power
- Employees: Customers wanted the ability to edit the information in the data table
Based on our usability tests, we made a few straightforward updates before delivering desktop and mobile mockups and clickable prototypes. Watch the Alerts screens I designed, in action:
This project was a fantastic exercise in adapting when the circumstances of our process are less than ideal. I learned:
- Talking to colleagues in other teams (i.e. Sales, Customer Support) is a quick way to get valid feedback. Ideally, I like to get as much direct user feedback as possible (in the beginning, after lo-fi, and after hi-fi), but we needed to maintain Praiseworthy's customer relationships and respect managers' time. Getting feedback from the Praiseworthy co-founders, who are users of the platform themselves, as well as their customer support specialist, helped us design a solid lo-fi foundation that managers loved in hi-fi!
- How to practice component-based design. Designing individual components first helped our team ensure consistency across our screens and will accelerate the development process when Praiseworthy implements our designs later this year.