Hiver Analytics - Dashboards
Designing an effective dashboard for Hiver's analytics module
2 designers, 2 PMs, 4 developers
Hiver is an email management tool that works inside Gmail and allows team inboxes to streamline their workflow.
We’re a company working on building tools that give organizations ways to have direct, human conversations with their customers.
We believe that email is core to how customer communication happens. For that reason, we must focus on making email efficient, productive and more human.
🙋🏻♀️ The user problem
Analytics was one of the most requested features. There was no way for Team leaders and Admins to gauge the health of their team and stay on top of the key operational metrics (resolution time of emails, workload) for the shared mailbox they are responsible for.
💼 The business problem
Adoption & retention - For a helpdesk, having an Analytics module is integral to a team's workflow and performace, and having an Analytics module inside of Gmail would a huge value add for Hiver's customers.
🧐 Problem Statement
Build a way for admins and supervisors to stay on top of their key performance metrics. The platform must be actionable and easy to consume.
1. Conducting user interviews and gathering data
We conducted user interviews along with the product managers and Customer Success team, and I analyzed the data gathered. Gathering accurate data was crucial in this project. I collected user requirements and pain points from past data and multiple data points from the interviews and PMs.
From this data gathered, we came up with two primary user personas:
Mapping an Admin's typical workflow (Insights from user interviews)
3. Use cases
These are the broad use cases that I solved for:
4. Competitor analysis
How are Hiver's competitors solving this? How are other good analytics tools going about this?
🏗️ Structure — Information Architecture
What makes a good dashboard?
Almost every single enterprise product has an analytics module, and consequently, a dashboard. But what makes a useful dashboard? After doing a bit of research, I took away 4 principles of good dashboard design:
Provide relevant information in about 10 seconds of scanning through the page.
Display information in a logical layout: Current insights → trends → drill down.
Have only about 5–9 visualizations at a time: Reduce cognitive load for the user.
Use the right data visualization.
User should get information about anomalies of the system from the Dashboard
This is where we go crazy with the ideas. You can explore absolutely anything, and that’s where brilliant ideas come from anyway 🤓
🧠 Solution & Design challenges
Now that I had answers to questions like — where will data come from? how will the dashboard be actionable? and I also had useful ideas from the sketching phase. This led to the next step — what are the core components that’ll make up the dashboard?
I chose the Atomic Design way - Card-style components that ensure scalability and easy customization. These are all the various types of widgets I designed:
Laying the foundation
The dashboard layout had to be absolutely free and scalable — when a user creates custom dashboards, he starts with a blank canvas, which means we had to design a grid-based layout to accommodate all the different kinds of widgets in a systematic way.
To solve this challenge, I experimented with various grid layouts. The 8-column-grid-layout was the most appropriate.
How can I dig deeper into the data I see?
This was the core working of widgets on the dashboard. There were various cases where we had to think about how the data is fetched from Reports or Views, and how do we take the user back to the dashboard where he started from?
Creating a custom Dashboard
Hiver's ecosystem is slightly different from a traditional data-analytics system. I had two different approaches for how to go about creating a custom dashboard and tested out these flows with internal users and the product team.
Contrary to my belief, most people seemed to find the 2nd flow more intuitive and so we ultimately decided to build that.
Rearranging widgets in Custom Dashboards
This was a tricky one. Can the user re-order widgets in a custom dashboard? If yes, when can he perform this action? What kind of engineering effort will this bring in? Does this action hinder other actions to be taken? Towards the end, I came up with an interaction keeping all these cases in mind.
👩🏻🎨 Visual Design
The layer where all the magic and delight happens 😬. The Visuals for this module had to be in sync with our newly revamped UI and that of the Reports module.
🎤 User Testing
We conducted multiple user tests with internal stakeholders and iterated on the designs. For Ex: The fullscreen feature was an idea that came from one of the users for ease of presentation. The Customer Success team took our prototypes to users and shared feedback that we worked on.
🎉 Business and user impact
Analytics was one big story that we worked on. It had many components and details tied together. To nail the UX of all these pieces was not an easy task. A few takeaways from our process:
What did I learn?
Data-driven Design is crucial and leads to building very relevant experiences for people.
Thinking about functional & technical aspects and breaking down complexity is core to a Designer's skillset.
A good Designer has bias for action - Fails fast, iterates faster!