Brand Refresh • Responsive Web Design
I worked as the Design Lead and Project Manager for the client. Our goal was to design for growth. We needed to understand why customers were using the platform and encourage stickier engagement with the Praiseworthy application. Our goal was measured in general user engagement and the number of daily sign ins from current customers. We were not focused on attracting new customers.  The work was completed over a period of 6 weeks.
The Praiseworthy story
Praiseworthy serves over 2 million customers per year. Years before starting Praiseworthy Misa, the cofounder, ran Nom Nom Foodtruck. While watching her business grow she realized there was no way to address negative customer 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.
In order to effectively use the platform, Praisworthy customers had to work through disparate experiences - a downloaded excel sheet with their business metrics and a real-time dashboard that provides alerts on the customer’s business and 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 web app. We also created a styleguide and followed component based design to help the small engineer team develop efficiently.
The Business Challenge
Through our research and user interviews we discovered that Praiseworthy had a major disconnect in the feedback loop on their platform. Employees (associates) were signing into the platform daily to view positive customer feedback and manager feedback when alerts were triggered. On the flip side managers would only sign in if there was an alert to sign-off on but would not engage with their employees or provide feedback on the alert. There was no way to learn from previous patterns or understand what had resolved the alert. This leaves Praiseworthy with a lack of repeat customers and the businesses they are helping to serve with an inability to educate employees when an alert happens.
The Product Goal
Praiseworthy needed to increase engagement on its platform allowing managers and associates to effectively use the business insights and communication opportunities the product provides. 
An interactive dashboard that allowsand encourages managers to see alerts and insights and take action right away will increase manager and employee engagement on the platform.

Understanding the Users

In addition to creating our own accounts in the application we also interviewed 3 associate-level employees and 4 regional managers.

The goals of the interviews 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. They were the grounding elements of al the businesses on the Praiseworthy platform. Because of this 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 Needs

Main takeaways from the managers:

  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.

Main takeaways from the associates:

  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.

Design Explorations

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.  
We did a visual overhaul of the Praiseworthy platform and created a styleguide that reflected the Praiseworthy brand values.  

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

The Result

Praiseworthy has a small engineer team with limited resources. To benefit Praiseworthy and reduce the cost 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.

Piecing Components Together

Feedback from Customers
To validate our designs with real users, we tested with 5 of Praiseworthy's customers.

Our goals were:
  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?"
Lessons Learned
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 needing to bring 3 different experiences (an excel document, a weekly email and a dashboard) into a cohesive view. Recognizing when and how the Praiseworthy customer would access this information, the type of medium they use and their comfort with technology heavily guided the interactions and screen design. On top of this, we had limited access to our direct customers. Collaborating with teams that work closely with the customer - Sales, Customer Success and Support - was a trustworthy alternative to direct user feedback while testing our designs.

Integrate component design early in the design process.
Focusing on component design and our styleguide early in the process helped our team maintain consistency through the design stages. The transition from low-fidelity into high-fidelity deliverables was smooth because we had the component mindset established and the styleguide to pull from. Our component deliverables will also accelerate the development process when Praiseworthy implements our designs. A win-win!