bgs-logo Created with Sketch.

New Gauge Type: Leaderboard

Client:
Brightgauge Software
Role:
Senior Designer
Skills:
Wireframing, UX, Design

Problem

Users are always looking for ways to motivate their teams. Whether it's friendly competition between team members for most customers helped, sales teams competing for different KPIs, we had received numerous requests for a gauge type that could support this style of competition. Hence: the Leaderboard gauge.

Research

Between interviewing users and brainstorming sessions internally, we created lots of sticky notes filled with different functionality. We then mapped out the ultimate Leaderboard features to how desireable they were for users vs how difficult they would be to implement... then we got our sticky notes and adhesive dots out to vote.

Biggest Challenge

The hardest part of the project was making the final decisions about what needed to be in the MVP and what could be rolled out later, in phases.

After much back-and-forth - and especially after the prototyping phase - we landed on an MVP that retained 50% of the functionality from the first "pie-in-the-sky" brainstorming exercise, with next phases of the project being several 2 week sprints and then month-long "big feature builds". 1.5 months after initial launch, we were close to 75% of features being completed, and another 3 months before everything was built out.

Scalable for Placement

Part of what we wanted to do is create a gauge that's as painless as possible to set up. This means that folks can see as little or as much of a leaderboard as they want.

We let the gauge collapse based on the height of its container, so if you only want to see a top 5 instead of a top 10 - its as easy as making the gauge shorter.

Just like on the Y-axis, if you want to see more data (and you've already imported the data source), showing these additional rows is as easy as making the gauge wider.

Custom Automated Threshold Badges

Automated thresholds for number values existed in other gauges, but just changing the text color didn't make quite the impact we were desiring during our initial prototyping. For example, if a value is above X or if you're ranked in a certain place, we wanted to be able to show something immediately recognizable. This is where custom thresholds were born.

Along with changing the color of the text, users can now also select one of 40 icons (to start with) to display when user-defined conditions are met. I curated categories like Emoji, Military ranking, Winners and Losers, Animals, and Things so that we had a few options for each of the different scenerios we had .

Customizing Each Row

The most creative challenge we faced was how to customize each row with an image. We ended up making the first column of data that's imported to the gauge the "master" cell, which would have the selected picture associated with the data in that row across all dashboards. This way we got around needing everyone registered for Gravitar or needing to be registered in Brightgauge.

Leveraging some of the awesome libraries out there, we were able to provide features like cropping an uploaded image from the initial launch.

Customer Feedback

We launched this new gauge type with a friendly message in Intercom letting users know it's there and with a quick screencast to show the basic features. Within 48 hours of launch, over 10% of our users had already created a Leaderboard gauge with no additional assistance needed from our helpdesk.

We've gotten nothing but positive feedback (and some additional enhancement requests) about the gauge and how it is controlled.