Leaderboard Design Challenge

Screen Shot 2017-12-28 at 12.45.50 AM.png

The Leaderboard is one part of a company internal training app that encourages competition through ranking user's performance.

My Role

UI/UX Designer

Date

Apr 2017

Project Type

3-day design challenge

 

Design Problem

A company has an iOS app to train smartphone salespeople at their store locations worldwide. They now want to increase the usage of the app, which contains training programs, curriculum, time-based challenges, quizzes, question-based challenges, and assessments. 

The Leaderboard should:

  • Capitalize on salespeople’s sense of competitiveness—by driving engagement of salespeople at their stores and within their reseller audience

  • Drive support from sales leaders for their sales territories

  • Instill sense of community within salespeople’s peer groups

  • Recognize salespeople for their achievements and propagate their competitive spirit

  • Support regional sales incentive campaigns by allowing sales leaders and training leaders to compare progress against other peer groups

  • Give meaning to individual challenges and regional programs for salespeople

 

 

Research

1. User Study

My big question is: what interactive elements encourage users to discover leaderboards and increase the usage of the training app?
In order to understand how salespeople think about the functionality and interaction of leaderboards within a training app, with the limited time, I tried to reach out to the best resources around me, including salespeople or store agents at corporations that offer training programs, such as Sprint and Walgreens. I decided to talk to them because their corporations have the same mechanics– company-wide, region-wide and store-wide communities. I asked qualitative questions and some follow-up questions during the interviews with them.

 

 

Tell me your thoughts about leaderboards...

My questionnaires were focused on factors motivate users to use the app and discover leaderboards. To be more specific, who do they want to compete with most? What motivates them to take challenges? If they had high scores, how do they want to be promoted? What would make them proud of themselves? The interview questions were some follow-up questions about their expectations of their choices.

Analysis and Findings

Screen Shot 2017-05-22 at 10.32.17 AM.png
 

2. Competitor Study

 
 

Visioning

I listed all the features and contents with grouping them together, based on the different experience they provide to users, in order to make sure that I offered solutions for each specific need.

After mapping them, I used color tags to arrange the hierarchy of sequence for each item (feature/content). They will be assigned to different screens, and the number represents which screen they will be shown on.

 

Wireframe

Screen Shot 2017-12-28 at 12.31.42 AM.png
 

Design

Sketches

 

Focusing on one use cases

Improved Version

 

I improved the interaction with applying features from previous proposals, including comparing users’ performance with others, tracking others’ performance and retaking the course or quiz. This improved version has an expanded-card to avoid too many items showing on the bar. At the same time, the expanded-card might be able to encourage users to explore more detailed information, comparing to go to another interface.

 
 
 

HI-FI Design