BRYENNE KAY
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
Section titre
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
Chaque site Web a une histoire et vos visiteurs veulent entendre la vôtre. Cet espace est une excellente occasion de donner un aperçu complet de qui vous êtes, de ce que fait votre équipe et de ce que votre site a à offrir. Double-cliquez sur la zone de texte pour commencer à modifier votre contenu et assurez-vous d'ajouter tous les détails pertinents que vous souhaitez que les visiteurs du site connaissent.
Si vous êtes une entreprise, parlez de vos débuts et partagez votre parcours professionnel. Expliquez vos valeurs fondamentales, votre engagement envers les clients et comment vous vous démarquez de la concurrence. Ajoutez une photo, une galerie ou une vidéo pour encore plus d'engagement.
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
Chaque site Web a une histoire et vos visiteurs veulent entendre la vôtre. Cet espace est une excellente occasion de donner un aperçu complet de qui vous êtes, de ce que fait votre équipe et de ce que votre site a à offrir. Double-cliquez sur la zone de texte pour commencer à modifier votre contenu et assurez-vous d'ajouter tous les détails pertinents que vous souhaitez que les visiteurs du site connaissent.
Si vous êtes une entreprise, parlez de vos débuts et partagez votre parcours professionnel. Expliquez vos valeurs fondamentales, votre engagement envers les clients et comment vous vous démarquez de la concurrence. Ajoutez une photo, une galerie ou une vidéo pour encore plus d'engagement.
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.
Sur le plan créatif, il a été incroyablement gratifiant de concevoir en collaboration avec les développeurs de nouvelles manières, au-delà de nos bibliothèques de graphiques classiques, afin d'afficher les informations de la meilleure façon possible pour nos utilisateurs.
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.
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.
Other projects
01
02
03