Sales Information Transparency

Time: June 2016 - Oct 2016

Team: 1 Designer (me), 1 Product Manager, Engineers

Skill: User Research, UX/UI Design, Prototyping

Deliverables: Interactive prototype, High Fidelity Mocks, Specifications, Presentation


Sales Portal Dashboard Redesign

The goal of this project is to provide sales people compensation and performance information so that they can make sure that their compensation is accurate and adjust sales strategy to get paid more.

SPH (sales performance home) product is the end user side part of our Commissions Suite product, which contributes 80% of our company total revenue.  The dashboard is the first interface users see after login. 



User Goals

We conducted product owner interview, did competitor analysis and talked with target users to understand the domain knowledge and user pain points.

- Make sure their compensation is accurate and send disputes to solve the problem if something is wrong.

- Get better compensation plan by becoming top performers in team

- Get bonus and accelerator by achieving attainment goals


Pain Points

Users were not satisfied with our original dashboard. They did not use it at all. Instead, they just used it as a report folder.

- The data visualization can NOT provide the right compensation and performance information they need, e.g. ranking in a team. 

- The data visualization is confusing and visually bad.

- The data visualization is static. Users can NOT interact with data visualization for further research.

- So users still have to read different long reports to get the information they need instead of looking at widgets. Once they were confused, they called the sales ops, which brings unnecessary communication.





What information users need and what action they may take to drill down?

We conducted contextual inquiries. We arranged design thinking sessions to listen to user sessions and analyze the research data. 



"As a sales representative, I want to review earnings composition and transaction information to make sure my compensation is accurate."

"As a sales representative, I would like to know where I am in my team to get better compensation plan and review progress towards attainment goals so that I can adjust my sales strategy to get paid more."



We brainstormed and voted for the most promising ideas to develop. I sketched out proposals and we decided on the design direction.

Screen Shot 2017-11-09 at 10.44.05 PM.png
Screen Shot 2017-11-09 at 10.41.05 PM.png


I turned the paper sketch to low fi prototype and do usability tests to get user feedback.


There are four columns and KPI information are displayed in widget cards. While the browser size changes, the numbers of cards to display in a row will decrease.  


- It is easy to scan information.

- The responsive design help users can check information on their phone.

- Users need to change periods to see previous data.

- If the user is a manager, he/she would like to see team member's data.



Compensation Accuracy: Earnings & Transaction composition

Performance Progress: Attainment goals & Ranking in a team


- Users do not understand backend calculation terminology. They care about compensation plan related information.

- Users spend time to understand the calculation data.



- Card Size

There are 2 options. For the square card, the main information in shown in the front face and users can flip the card to see more details. For the rectangle card, the main information is shown at left and the detailed information is shown at right.

- Drill Down

Users can hover on or click links to drill down to see more information.


- Users can customize their dashboard based on their own preference and priority.

- Users want to view recent orders card and payment by period.



Final Design

Users can select their dashboard and period to see different information. They can customize the dashboard based on their own preference and priority. 

The earning and transaction cards can help users make sure their compensation is accurate. The calculation layout can help users understand earning composition and transaction composition. Users can click a number to see related transactions and send inquiries if there is anything wrong with it.

The ranking card and attainment card can help users know their performance so that they can adjust their sales strategy to get paid more. If they improve their ranking and be the top sales people in their team, they can get a better compensation plan. If they achieve goals, they may get bonus and accelerator.


Users can click a number and see related transactions and send inquiries if there is something wrong with it.


Users can customize their dashboard. They may have different goals and can have a performance overview. They can adjust their sales strategy to get paid more.


Users can view their recent orders to confirm there is nothing wrong. The payment by period can help them get a better understanding of their compensation information.


Users can add, remove or delete a widget based on their preference and priority.


Style Guide

I used Zeplin to collaborate with engineers to make sure that they can implement this design.


Released in July, 2017

- The EOU (Ease of Use) rating was 5.88 out of 7 while 5.25 is the passing score.

- Sales Ops Call: Reduced by 15 - 25%。

- Users use the dashboard instead of reviewing reports.


Challenge and Takeaway


- User research can help turn vague product requirements into clear user goals and user tasks. 

- Design thinking sessions can help keep stakeholders on the same page, prioritize product features si that the design can be feasible in a desirable amount of time. 

- To have a pattern library and a style guide can help make products consistent and easier for engineers to implement the design.