Responsive Dashboard Design
Goal: Increase customer engagement with Praiseworthy
My Role: Design Lead + Manager
Timeline: 6 weeks
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.
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.
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.
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. We will know this is true when:
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:
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
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:
The main takeaways from the associates were:
After reviewing interviews we compiled a list of dashboard necessities:
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.
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.
We did a visual overhaul of the Praiseworthy platform and created a styleguide that reflected the Praiseworthy brand values.
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:
Here is a snapshot of some of the visual components we designed:
Using our styleguide we popped together our components to create full screens. Below are a few of the screens we created with the components.
To validate our designs with real users, we tested with 5 of Praiseworthy's customers. We wanted to:
We gave managers a set of scenarios & tasks:
The customers easily navigated through the dashboard and understood the data. Woohoo!
Areas we received feedback on for updates:
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.