Responsive Dashboard Design

Goal: Increase customer engagement with Praiseworthy
My Role: Design Lead + Manager 
Timeline: 6 weeks

The Praiseworthy Story

Years before starting Praiseworthy Misa, the cofounder, ran Nom Nom Foodtruck and realized there was no way to address negative experiences before they were made public - a frustration many small business owners face. Praiseworthy gives managers and businesses immediate feedback from their own customers and allows them to act on the feedback in real time. Praiseworthy now serves over 2 million customers per year.


Customers receive separate experiences to view data on their business - a downloaded excel document that gives overall business metrics and a dashboard that they can view alerts on their business, newsfeed from employees and rankings of their team.

Customers have to visually decode massive excel sheets to view metrics 
Customers login to a separate dashboard to view business alerts


We combined the necessary data into one responsive dashboard. Customers receive overall data on their company health, have direct access to customer feedback and can view and respond to store alerts and employees immediately within the alerts tab. We also created a styleguide and followed component based design to help the small engineer team develop more efficiently.

The Business Challenge

Praiseworthy had a major disconnect in the feedback loop on their platform. Managers would only sign in if there was an alert to close but would not engage with their employees or provide feedback on the alert. When alerts would close there was no history of the reason for it closing or lesson learned so as to not repeat again. On the flip side, employees of companies (associates) were signing into the platform daily to view positive customer feedback (opposite of managers' needs). We learned through interviews that associates also expected manager feedback in the dashboard which was never available. 

The Product Goal

Praiseworthy needed to increase engagement on its platform so managers and associates actually get use out of the business insights and communication opportunities the product provides.


An interactive dashboard that allows managers to see alerts and insights and take actions right away will increase manager and employee engagement on the platform.

Understanding Praiseworthy's Users

In addition to creating our own accounts we also interviewed 7 of Praiseworthy's current users:
3 associate-level employees and 4 regional managers.

Our goals were to understand:

  1. Why and how they use Praiseworthy.
  2. What data they found most important.
  3. How they respond to feedback and alerts.
  4. How a dashboard could be useful.

Praiseworthy recommended we focus on manager-level employees as our target however we found that it was equally important to focus on associate-level employees. The associates rely on Praiseworthy for their own career happiness and motivation. They check the platform multiple times a day to see feedback from store customers . We needed to make sure our design did not risk losing features and feelings of positivity that the associates looked to.

"Nothing is more important than making customers happy. Seeing that in Praiseworthy makes my day and motivates me to do better." - Wil S. Associate

Synthesizing Insights: Defining Manager + Associate Needs

We defined features and functionality of our dashboard by understanding what information was most valuable to managers and associates.

The main takeaways from the managers were:

  1. Key metrics at a glance: NPS, Praise Power, and Customer Satisfaction.
  2. Alerts are critical: Managers log in whenever there is an alert. They expect to close alerts within 24 - 48 hours.
  3. Rankings for company and employees matter: Managers focus on bottom-performing employees/stores.

The main takeaways from the associates were:

  1. They login primarily to view feedback: They log in when at work, and seeing Praiseworthy feedback makes their day.
  2. Personal rankings matter: Ranking is of high importance to them, they strive to move up in rank.
  3. Uncertainty around alerts: They are not sure what triggers alerts and they often do not know what the solution is to fix the alert.

Defining Dashboard Needs

After reviewing interviews we compiled a list of dashboard necessities:

  1. Display performance over time for employees and stores: Charts are often best for this.
  2. Accessible across multiple devices: Managers are often checking metrics on the go so the dashboard should be useful and usable both on desktop and mobile.
  3. Interactive: When a dashboard presents data that should be looked at in more detail, it should be possible to access those details immediately from the dashboard (this was a non-negotiable from the Praiseworthy leadership team).
  4. Highlight alerts: Managers want to be able to see at a glance the metrics for alerts. Associates need to understand why an alert was triggered and the solution to close it.
  5. Follow Praiseworthy brand values: Praiseworthy requested that our designs align with their brand and product values of positivity, simplicity and a focus on happiness.

Time to Explore!

With our set of dashboard needs in place, I led the team through a design studio to rapidly sketch, critique and refine ideas. Working from these elements we converged on a set of mobile and desktop views.

After the design studio I had the team diverge. One team worked to put together a lo-fi prototype while the other team worked to establish a brand styleguide. 

Testing the Functionality

Usually I would run a low-fidelity design by the Praiseworthy customers however, the customers were difficult to access during this time and I learned they were not totally comfortable talking through a low-fidelity design so I held off testing them until the designs were in a more high-fidelity visual state.

We worked directly with the Praiseworthy co-founders Misa and Nico for feedback on the low-fidelity prototype. 

Styleguide: Creating Positive Feels

We did a visual overhaul of the Praiseworthy platform and created a styleguide that reflected the Praiseworthy brand values. 

Praiseworthy styleguide
Just for fun we expanded on a design Praiseworthy had on their website to create the Praiseworthy team and our team in icon form!

High-fidelity: Component Design

Praiseworthy has a small engineer team with limited resources. To benefite Praiseworthy and reduce the cost and increase the efficiency of engineering implementation I had our team focus on delivering mocks with components.

A few edge cases for users and brand guidelines we had to design for:

  1. Location filters: Filters varied drastically depending on the customer. We 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 have a input search for locations was important.
  2. Highlighting high risk areas with friendly copy: We worked to use copy and imagery to maintain a positive feeling while being able to highlight negatives like alerts and poor performing employees.

Here is a snapshot of some of the visual components we designed:




Hi-Fi design: Plugging Components Together

Using our styleguide we popped together our components to create full screens. Below are a few of the screens we created with the components.

Feedback from Customers

To validate our designs with real users, we tested with 5 of Praiseworthy's customers. We wanted to:

  1. Understand overall impressions of the dashboard.
  2. Test comprehension of the data presented on each page.
  3. Identify usability issues with the filters, search bar, and alert management capabilities.

We gave managers a set of scenarios & tasks:

  1. Filters: "Suppose you want to see which employees performed the worst at a certain location last month. How would you do that? How would you see which employees are highest performing?"
  2. Alerts: "Imagine you got a notification about a bad review. Can you show me how you would view that alert and close it?"
  3. Rankings: "How would you go about seeing the worst performing teams for Date Range Y?"

Results and Refining the Dashboard

The customers easily navigated through the dashboard and understood the data. Woohoo!

Areas we received feedback on for updates:

Final Deliverable

We delivered a mobile prototype and a desktop prototype along with sketch files of the designs and styleguide to the Praiseworthy team.

Next Steps

Our designs will be implemented in early 2018. Once built we will want to test engagement around sign-ins and manager feedback to employees within the dashboard.

Lessons Learned

  1. Make time for user research and cross-team communication.
    The success of our project would not have been possible were it not for the commitment upfront to researching the space and communicating with customers. My team was tasked with streamlining a complex system, bringing 3 different experiences (an excel document, a weekly email and a dashboard) into one cohesive view. Recognizing when and how the Praiseworthy customer would access this information, the type of computer and browser they use and their comfort with technology heavily guided the interactions and screen design. There are many common digital interactions that we can take for granted as common knowledge. This project was a reminder that users have various ways of accessing the digital technology and various comfort levels with that technology. On top of this, we had limited access to our direct customers so collaborating with teams that work closely with the customer - Sales, Customer Success and Support - acted as a great alternative to getting direct user feedback while testing our designs.
  2. Integrate component design early in the design process.
    Focusing on component design and our styleguide at the first stages of the design process helped our team maintain consistency across various iterations all the way through to the final deliverables. The transition from low-fidelity into high-fidelity deliverables was smooth because we had the component mindset established and the styleguide to pull from. This helped me maintain consistency while working with and managing a larger team. Our component deliverables will also accelerate the development process when Praiseworthy implements our designs later this year. A win-win!
Back to selected work