Analytics dashboard

In-production at a Japanese B2B IT company, this is a performance and data visualization platform for highly-skilled internal users that saves time and improves strategies.

About

Client

LeadPlus

Year

2022

Location

Tokyo, Japan

My role

I love all parts of design (perhaps not equally) which is great as I got to do all aspects of design in this project, including the icons. For this project I was the:

UX researcher
Interviewer

UX designer
UI designer

The Challenge: Be able to manage all accounts in one place in the order of performance needs

Addressing the growing pains of a start-up whose system didn't scale

A brief background:

The service team managed up to 100 clients' accounts in this company. These accounts managed online advertisements and services through Google, Yahoo and Facebook. Clients would allocate multiple, different budgets to their advertisements based on geographical location, promotional material, time of day, season, media platform, etc. Every day, a service team member would check their assigned accounts and adjust settings on Google, Yahoo, and Facebook to optimize the performance of the advertisement. When the company began, this was not a large problem as there were few accounts. As the company grew, this task took up an overwhelming part of the service team's day. Another problem: there was no centralized or consistent way to perform this task. Every service team member had a different method or workaround for ensuring they could manage the performance of all accounts. As could be imagined, some workarounds were more successful than others.

What is the challenge? To create a single space where service team members can see the performance of their accounts in order of need to address issues quickly. This has an immediate effect on the time service team members can give to their other tasks. More crucially, this has a large impact on advertisement performances across the company. If issues are able to be caught more quickly, clients can spend their budgets more effectively and have trust in the company to manage accounts and client retention will improve.

KPIs for this project include:

Reduce time maintaining accounts
Improved performance metrics
Sunset individual workflows and workarounds

Design process

An overview of the project within the team from start to finish

This feature started long before the project kick-off, as it was highly requested by the service team. In the event of an account budget over or underspending, the consequences to the client (and therefore their trust in the company) can be quite substantial. We need to effectively communicate with each other to fix these issues. The product manager and I talked to service team members frequently, examined their workflow and took note of previous incidents of account over or underspend. The stakeholders, PM, and I confirm the business requirements and continue communication with the service team about their workflow and needs. This project required a lot of back and forth with the developer for several technical reasons. One being, this was the first feature created on React on this platform, the rest of the platform was done in Django. It was also the dev's first project on this platform after a significant system redesign had been to the backend structure. I quickly took any design change proposal to the developer to check if we had the available resources. As with all projects, there were validations, testing, feedback and iterations and a few requirements thrown in after development began.

Research, Tools, & Methods

Communication and collaboration are the essential keys to successfully designing such an impactful tool

In this project, I began with a lot of team communication and desk research. There was luckily a lot of documentation of their pain points, issues, and problems that had been caused by inefficiency. After interviews and requirement confirmations, I created paper sketches I quickly checked with the dev for any technical limitations. Based on those suggestions, I heightened the wireframe fidelity to Figma and tested the resulting mockups in Maze. Finally, I had a stakeholder-approved Figma prototype to hand over for development.

User Interviews: How can the service team feel more impactful and less overwhelmed?

Growing companies need solutions that can scale across teams

The sales team will also use this performance dashboard to aid in client communication. Additionally, the product and engineering team will also use it to troubleshoot and correct any technical issues. However the primary users for this feature are the service team, so the product manager and I start by interviewing them. With their permission, we record their screens to see how the check 5 accounts to get an idea of their workflow. After this, we talk to them about their process, pain points, and hopes for a possible solution. We see a huge variation in how people manage accounts, but some consistencies come through: It takes the majority of their work day. Currently, there is no way to quickly know which account ads are performing well or not. There are so many external and internal factors that affect online ads that it is often a guessing game, which wastes a significant amount of time.

Common findings among the service team member interviews:

see all their accounts at a glance in order of the poorest performing
see if the accounts are overspending or underspending the budgets
filter by important KPIs and alerts
filter by sales and service team members (due to account management collaboration)
hyperlink accounts so they are a click away from being fixed

Fun fact: no one loves spreadsheets more than the service team

Efficiency, clarity, and customization control will answer the users' needs and save time

User flows: A clear path for users to easily reach their goals

Identifying different users' journeys for different user types

After reviewing the business requirements, the interviews and the insights, I write the user stories for the service team, sales teams, and product and engineering team.

As a service team member, I want to sign into the platform and immediately see which of my campaigns need the most attention so that I can prioritize and make the most of the time I have to optimize the account performances.
As a sales team member, I want to be able to find my clients' accounts, their performances and who on the service team is making modifications so that I can be up-to-date and knowledgeable for my clients.
As a product and engineering team member, I want to be able to sort through sales & service team members' accounts so that I can notify them if something has come up in the data that needs attention or explanation.

Desk research

Researching types of dashboards and best practices that fit the company's teams and resources

I did a lot of research into operational, analytical, and strategic dashboards and along with stakeholders and the PM, agreed on the business requirements and user needs. I decided our situation called for an operational dashboard, as it provides insights into the day-to-day operations of an organization and tracks KPIs to help identify areas of improvement.

Additionally, I create a quick competitive audit of similar dashboards. Google Analytics is a strong source of inspiration in this case as they deal with huge amounts of data, is highly customizable and is a platform the service team is highly familiar with using. I remember the features and functions in spreadsheets that helped service team members and then create my dashboard mood board.

Wireframing & mockups

Finding inspiration and iterating

Customization was key for this dashboard. On page load, the immediate data loaded would be the accounts of which they are in charge. However, through feedback sessions, we learned that there were several use cases when they would want to go beyond that. I added more of a customizable view for users: they could choose the KPIs that were useful to them and filter accounts based on those KPIs or other columns.

I adjusted wireframes that I shared with the PM & developer to ensure they met stakeholder requirements. We tested wireframes with our users and came around to a solid understanding of how to move forward.

Testing & validations

Validating concepts and KPIs

I conducted some usability testing and A/B testing in Figma with 3 team members. There was over a 95% success rate in the tests so I presented the prototype another time to the developer. After his technical confirmation, I brought it to my PM and it was approved to go into development by the stakeholders.

Understanding your audience is critical to meeting and exceeding user expectations

User interface: Visual design elements

Borrowing from a previous platform's UI library to create something cohesive

A little background: This internal platform had existed long before I joined the company. It was designed during development by the developers who were writing the platform logic and was visually uncohesive and inconsistent. This feature is unique as it was at the time, the first and only feature to be written in React. Therefore it had a lot more of the flexibility needed compared to the rest of the platform which was in Django and Python.

It was a large question for me: how do I balance consistency across the platform while taking advantage of the creativity and freshness of React? Are these the colour combinations or components I would have chosen when creating a design system? No, but I used them as the users were familiar with them and it created cohesion. To change too much would be jarring for the users. Is this table too crowded and colourful? Not for the users.

Japanese media is disarmingly more crowded than typical western design. Comparing the front pages of Google, Yahoo News, and Rakuten, shows the amount of information wanted by Japanese audiences. This was another interesting challenge: how to give all the info they deemed critical without overwhelming them and drowning out data. The result of this was the customizable table with minimal default columns added.

Creatively, it was incredibly rewarding to design in collaboration with the developers in new ways, beyond our typical chart libraries, to display information in the best way possible for our users.

Final prototype

The design that was approved by stakeholders and submitted for development

Here is a gallery of frames of the final prototype. At the bottom of this case study, there is a video of the user flow from the perspective of a service team member.

The dashboard, now in production, saves the operations team upwards of 100 hours a month. One user said it has already saved them at least 2 hours each day.

Validations

Meeting KPIs, saving time and resources

The initial rounds of feedback have been overwhelmingly positive, particularly the ability to save specific accounts and remove data not relevant to their accounts. It is the first thing they check in the morning and they no longer need several tools to manage all the data. Due to some technical challenges with the Facebook API that calls all the entities individually which leads to a rather slow loading time, we are having to pause immediate iterations to allow users a better opportunity to use it before getting feedback.

Final product flow

Here is a video of the complete user journey from a service team member's perspective.

BRYENNE KAY