Dashboard, UX, and UI Refresh
○ Lo-Fi Design Team Lead
○ Lead Facilitator for the Design Studio
○ Product Definition
The interface that Praiseworthy came to us with had all of the important information their users needed but the founders now wanted an easy-to-scan, hi-level dashboard to replace the spreadsheet-style one they had. They also wanted a revised, consistent look and feel across their entire product. The founders were very happy with our results. I worked with a great team under the project leadership of Michelle Wegenstein.
Praiseworthy won AngelHack 2013 and since then has grown from only a 7 store client to over 1,000 stores, surveying over 2 million customers per year.
Praiseworthy provides the means to capture customer feedback, create company wide performance rankings, and provide positive motivation for customer-facing employees.
- Create a fresh UX and UI with a focus on mobile
- Emphasize brand qualities like playfulness, simplicity, and positive reinforcement.
- Integrate their new beta newsfeed feature.
- Create an at-a-glance dashboard that managers and higher ups will want to make part of their regular routine (and make it a positive experience, increase engagement). Dashboard should be simple, clear, and interactive.
- Creating an easier-to-read set of metrics will increase customer engagement (especially with those above the manager level who don’t have the time to dig deep)
- An easy-to-read dashboard will create happiness… assumes that the user will be engaged with the positive metrics as well as the alerts
There are three main categories of users. The Associate, the Manager, and the District Manger. If we design for the Manager or District Manager, the Associate level, a subset, will be covered by default.
Customer-facing individual on the front lines of sales.
Metrics Associates want to know:
- Their ranking among employees
- Internal comments/praises/cheers
- Customer feedback
Managing 5-10 employees and sometimes more than one store.
Metrics Managers want to know:
- Rankings for their regions/districts/stores and everyone within that jurisdiction.
- NPS (Net Promoter Score)
- Overall metrics
- Percentage of positive reviews/happy customers
- Custom metrics
- # closed/open alerts and which managers/employees do they belong to
- Average alert closing time
- Employee engagement
Oversees multiple stores. Located at a centralized office.
Metrics District Managers want to know:
The same as for a manager but with more focus on top level overview.
Praiseworthy User Interviews:
We were given limited access to some of Praiseworthy's customers. The team interviewed 3 associates and 4 managers about how they use Praiseworthy now.
- Feedback is motivating and provides positive reinforcement which would lead us to add elements to promote this.
- Log in every day
- Most important metrics are ranking and promptness so we would make sure these metrics were apparent on the associate's page
- Log in for alerts or once a week. This confirms the founder's notion that they need a dashboard that gives their customers the information they need in a scannable format. We would focus on this need as we designed the dashboard layout.
- The most important metrics are NPS, Praise Power, and CSAT so we would try to make these as prominent and scannable as possible with the ability to go deeper if desired.
The purpose of this persona is to keep us focused on the users we're design for. I created this one for the Manager role, our main focus as we design. Why? All three roles need to be kept in mind. But the Associate only uses a subset of what the Manager sees, and the District Manger can see everything the Manager sees but will want to spend less time doing it (that's important to know too, though, it reminds us how important the ability to quickly scan data is).
I led the team through a Design Studio...
...to help the team generate a lot of ideas in a time-boxed sprint session of about 5 hours. We go in with knowledge of users, problems, and basic feature needs and come out mentally exhausted but happy that we have a basic framework for our product.
We split into two teams, each creating its own set of UI sketches through a series of rapid iterative sketch and critique sessions. We have a complete team review at the end to discuss and critique the results. I mention in my YouCaring project that I have a few criticisms of Design Studios. They're not completely without benefits, though, and we did manage to get a pretty good set of UI sketches to use in the next phase.
Rough UI sketches from both team's efforts.
Lo-Fi Design & Prototyping
I led the Lo-Fi Team effort to flesh out the ideas from the Design Studio and turn those ideas into a testable prototype.
Here's Jon Ganey, Xing Li, and myself from the Lo-Fi team starting the process of interpreting UI sketches from the Design Studio. You know you have a dedicated team when they're willing to come in on a Saturday morning.
After reviewing the results of the Design Studio, the Lo-Fi team agreed that there wasn't enough difference between the the two sets of whiteboard UI sketch directions to justify creating two parallel concepts. We would merge the two sets of concepts into one.
The Praiseworthy founders were looking for a "mobile first" solution though it ended up not working out that way in the design process. Both Mobile and Web layouts presented their own challenges so they ended up being designed in sync. We proved each idea on both platforms, simultaneously, to get to our final solution.
Below is the set of screens that came out of all of our late nights. Extra props to Jon for working until the AMs with me to get this out and keep the schedule on track.
The success of the Lo-Fi work is proven out in the Hi-Fi... which didn't need major changes (other than a request from the clients for a different type of menu).
The desktop prototype didn't work so well in a portfolio (no mockup frame) so I moved it to an iPad mockup. I had frustrations with the prototyping itself too. The tool I used didn't have the ability to fix the web menu on the left. I'll need to look into another tool that will do that. Let me know if you would like to recommend the next tool I learn.
We didn't have access to actual users of Praiseworthy for testing for this phase. We tested instead with users that weren't familiar with the product. We were all happy to learn the users experiences were mostly trouble-free. I'll savor this moment since it's rare this goes so smoothly.
This is the style guide created by Abby Readey that would be implemented in the next phase. The founders loved that it fit their brand attributes of simplicity and playfulness.
Lo-Fi to Hi-Fi Comparisons for Mobile
Here's the validation that my Lo-Fi Team's efforts were done well. The layout problems resolved in Lo-Fi laid a good foundation for the final designs.
Lo-Fi to Hi-Fi Comparisons for Web
The most noticeable change from the Lo-Fi version is that the web version's side tabs were replaced by a menu bar at the top which was requested by the founders.
It could be argued that bar graphs are more appropriate for certain kinds of information. I've put options in the prototypes if you care to try them out and click on the Praise Power Breakdown section.
I helped out with the Hi-Fi Mobile Prototype as well... this time with a different prototyping tool than on Lo-Fi.
Again, the desktop prototype didn't work so well for a portfolio (no mockup frame for a monitor or laptop) so I rebuilt it and moved it to the iPad frame you see below.
My favorite memory from this project was the response from the founders to the final designs. They were really happy with the design and we were thrilled with their reaction. Changes to the product will be rolled out in small increments over the next year and we'll be hoping to see the metrics to prove that we were worthy of their praise.