Praiseworthy

TL;DR

Praiseworthy provides businesses with real-time customer feedback. We were tasked by the co-founders to design a mobile-first dashboard for their customers. By focusing on the needs of people in manager and director level roles, we created a dashboard that their most important customers found valuable.

Project Overview

Show customers critical information at a glance

I worked with a team of product designers to create a dashboard for Praiseworthy, a feedback management platform that allows businesses (mostly retail stores) to ask customers to review each transaction via a survey. Praiseworthy then provides businesses with their Net Promoter Score (NPS) and Praise Power percentage, which is a combination of overall customer satisfaction and other metrics such as employee knowledge, promptness, kindness, etc.

The Problem

Praiseworthy currently does not show aggregate data by store, district, or region in a digestible way, so their users at the manager/director/owner level do not have a quick and easy way to see the data they need to make improvements.

The Goal

Design a responsive web dashboard that shows important metrics quickly and easily on desktop and mobile. We hypothesized that having this dashboard will create tremendous value for Praiseworthy’s higher up users and increase product engagement at those levels.

My Role

The team was divided into 4 sub-teams: UX research, lo-fi, hi-fi, and hi-fi validation. My primary roles and responsibilities were:

  • UX Research Lead (initial customer interviews)
  • Ideation and creating lo-fi wireframes
  • Hi-fi UI design

Methods

  • User interviews
  • Design studio
  • Prototyping
  • Usability testing

Timeline

6 weeks; January - February 2017

The Results

By talking to Praiseworthy customers, we identified the metrics that were most important to them and created a dashboard that delivered these metrics in a functional and visually appealing way.

Check out one of the dashboard pages below or click here to check out the clickable prototypes.

 

Process

With a 6 week timeline, we followed a lean process to collect customer feedback, ideate, prototype, and iterate quickly.

 

Discover

Creating a shared vision of success

Praiseworthy is a small B2B SaaS company, so they’ve built strong relationships with their customers. Therefore, it was important for my team to understand Praiseworthy’s vision for the dashboard since they know their customer needs pretty well. Based on early conversations we had with the co-founders, we decided that the dashboard should be simple but interactive (e.g., adding filters), enable customers to quickly distill important insights and trends by store/district/region, and align with their values of praise and positivity.

Exploring the current platform

To get a better sense of the data we’d have to visualize in the dashboard, we explored the Praiseworthy platform in a test environment and saw that the data in each review was broken down into several metrics and shown in percentages. This helped us start thinking about how to best represent these metrics in our dashboard design. Seeing how alerts (i.e., negative reviews) were presented opened up a lot of questions that we later asked customers during interviews to understand what's important to them.

 

Empathize

Talking to Praiseworthy customers

The goal of this project was to create a dashboard that was useful for managers and up, so the Praiseworthy co-founders connected us with a few of their customers. I wrote the interview guide, and another team member and I conducted interviews with 4 customers at the regional manager level and above to understand:

  • Why and how users use Praiseworthy
  • What data provided by Praiseworthy was most important to them
  • How users respond to feedback and alerts
  • How a dashboard could be useful
 

Define

Defining The needs of managers and above

Learning how regional managers and directors currently use Praiseworthy and what information they valued the most helped us define the features and functionality we needed to include in the dashboard. Some of the top insights we synthesized from the interviews were:

  • Most important metrics: NPS, Praise Power, and customer satisfaction
  • Alerts are priority: Managers and up typically log into the platform whenever there is an alert
  • Ranking is important: They need to see bottom-performing employees/stores in order to know who needs coaching and development
  • Dashboard needs: They want to quickly see information on alerts, important metrics, trends, ranking, and survey response rate; ability to drill down into data is important

How might we make it easy for them to see all this information, especially if they're on the go?

 

Ideate

Rapidly sketching ideas

Having the whole team in a room for several hours straight was an effective way for us to explore the possibilities of how our dashboard should look. We began the idea-generating process by writing down the basic things we wanted to include:

  • Highlight NPS, Praise Power, Customer Satisfaction
  • Alert management
  • Filters
  • Team/employee ranking
  • Trend over time

We then workshopped together using the Lean UX design studio method where everyone rapidly sketched wireframes for desktop and mobile, critiqued concepts, and converged on a final set of wireframes.

 

Prototype & Validate

Making a lo-fi prototype

Our lo-fi team took our wireframes from the design studio and put them into Sketch.  We had one person responsible for mobile and another for desktop; they designed side by side to ensure the desktop version was consistent with mobile. They also created clickable prototypes in Marvel so that we could get feedback from the Praiseworthy team and iterate quickly.

This first iteration of the dashboard included the following pages:

  • Overall health: Shows NPS, Praise Power, employees/store rankings, alerts summary, survey response rate
  • Alerts: Shows # of open alerts, average alert close time, and history of all alerts
  • Reviews: Shows NPS and Praise Power overtime, detailed breakdown of reviews, and review feed
  • Rankings: Ranking of employees and teams
  • Employees: Employee directory; employee page shows individual metrics, sum of positive and negative reviews, and all alerts and reviews for the employee
  • Location: Store directory

Here are a few sample screens from our prototypes:

Incorporating Praiseworthy's feedback

Since the co-founders knew their customers well and were also users of the platform, they gave us feedback that we incorporated into the second iteration of the dashboard:

  • Managers only want to put out fires so make alerts easy for them to see/access
  • Overall Health: Remove NPS because it may conflict with Praise Power
  • Reviews: Move review breakdown to Overall Health, replace everything on the page with the existing News Feed they have
  • Employee page: Replace frown with something more positive, replace store-level metrics with employee-level metrics
  • Locations: Remove this page because managers and up will not need to see this information

While we wanted to get feedback on our lo-fi prototypes from Praiseworthy customers, we knew we had to be respectful of their time. The co-founders said we likely would only be able to get their customer’s time for one round of validation. Since we thought it was risky to the customer relationship to show a lo-fi version of the dashboard, we decided to skip user testing on the lo-fi prototypes and wait until we were ready with hi-fi prototypes.

Iterating based on feedback

Here are some of the changes we made based on feedback from Praiseworthy:

Creating a visual design system

As we moved into the hi-fi prototyping phase, one of our team members created a style guide so that the hi-fi team can use consistent typography, colors, and components. Praiseworthy also wanted us to use material design as the foundation for our visual design.

 

Designing components

Instead of designing screens, the hi-fi team decided to divide the design responsibilities by components. I owned the design of the filters and navigation menu for mobile and desktop and browsed a lot of responsive websites for inspiration.

Filters

For the mobile and desktop date picker, I modified the date picker in the material design Sketch template.

To gain a better understanding of the location filters that Praiseworthy customers need, I met with their customer support specialist and learned how locations within the Praiseworthy platform are structured. Here's the location hierarchy:

I learned that most of Praiseworthy customers have 1-2 regions and districts and anywhere between 5-25 locations. One of their customers has more than 600 locations, so adding the ability to search locations was important. Other important factors I kept in mind was having the ability to easily clear/reset filter options and having a disabled state for the location filter options (e.g., if District 2 is not in Region 1, Region 1 is disabled)

Here are the filters I designed for mobile:

Here are the filters I designed for desktop:

Desktop Filters.png

Navigation Menus

We wanted to keep the mobile menu simple, so I decided to stick to the hamburger menu we created in our lo-fi prototype. For the desktop menu, Praiseworthy wanted a top navigation bar with icons, so I modified icons from a UI kit and added them to the menu.

Putting it all together

Since we were going to conduct remote user tests with Praiseworthy customers, we decided that putting together the hi-fi desktop prototype first was the best way to simulate the real experience of using the dashboard.

Getting customer feedback

Having the opportunity to show our designs to users was satisfying for our team because we able to validate our designs and build excitement for this upcoming feature. With Praiseworthy's help, we conducted usability tests with customers with the following objectives in mind:

  • Understand customers’ overall impressions of the dashboard
  • Test whether or not the information presented on each page is confusing
  • Identify usability issues with the filters, search bar, and alert management capabilities

Customers understood the data and easily navigated through the dashboard, but we needed to make some changes:

  • 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 did not know what Rank meant on the Rankings page, and they wanted to see rankings by other metrics besides Praise Power
  • Employees: Customers wanted the ability to edit the information in the data table

Refining the dashboard

With the feedback we received, we iterated on the desktop and mobile dashboards. I was responsible for the Overall Health page and made sure changes were reflected across both platforms. Two other team members were responsible for the other pages of the dashboard, so the 3 of us worked side by side to make sure all UI elements and styling were consistent on every screen.

Final Deliverables

We delivered a mobile prototype and a desktop prototype of the dashboard to the Praiseworthy team. Our goal for the prototypes was to keep the mobile version simple with only the necessary and most important details displayed while allowing customers to expand into more detail on the desktop version.

Check out the clickable prototypes!

 
 

Next Steps

We showed the final prototypes to the co-founders and the lead developer, and they plan to implement this dashboard in 2017! Once they release the dashboard, we'll want to see if product engagement by users at the manager/director/owner level increase—that will be our true measure of success!

 

Key Learnings

This was my first experience designing a B2B product, and the process of getting user feedback was more difficult than in my other projects focused on consumer products. Maintaining Praiseworthy's customer relationships was one of our priorities, so we didn't want to ask for too much of their customer's time. We found that asking the co-founders for feedback throughout the project and talking to their customer support specialist gave us the feedback we needed to move forward. This shows that with any product company, talking to your colleagues who interact closely with customers (Sales, Customer Success, Support, etc.) is a great alternative to getting direct user feedback.

I also found that sitting side by side with other designers who were working on different pages of the dashboard helped us make quick decisions that allowed us to meet our final deadline. We pulled a couple of late nights, but everyone's dedication led to a successful project that the Praiseworthy co-founders were super happy with!