Hiver Analytics - Dashboards

Designing an effective dashboard for Hiver's analytics module

Company

Role

Hiver

Product Designer

Duration

One month

Team

2 designers, 2 PMs, 4 developers

🎓 Context

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.

Screenshot 2021-04-18 at 9.57.06 AM.png
Layer 1.png

🙋🏻‍♀️ 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.

🏃🏽 Process

vd1 copy 4.png

🔎 Research

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.

2. Users 

From this data gathered, we came up with two primary user personas:

Group 72.png
Screenshot 2021-04-28 at 11.26.44 AM.png

Mapping an Admin's typical workflow (Insights from user interviews)

3. Use cases 

These are the broad use cases that I solved for:​​

1 copy 3.png

4. Competitor analysis

How are Hiver's competitors solving this? How are other good analytics tools going about this?

images.png
google-analytics-logo.png
datastudio.png
kayako-vector-logo.png
freshdesk-vector-logo.png

🏗️ Structure — Information Architecture

IA.png

💡 Ideation

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

Sketch up!

This is where we go crazy with the ideas. You can explore absolutely anything, and that’s where brilliant ideas come from anyway 🤓

wireframing_edited.jpg
IMG_20210421_082328__01.jpg
2.jpeg

🧠 Solution & Design challenges

Dashboard components

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:

Reports Copy 4.png
types of widgets copy.png
types of widgets copy 2.png

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. 

Solution
To solve this challenge, I experimented with various grid layouts. The 8-column-grid-layout was the most appropriate. 

grids.png
Frame 4.png
db_1.gif

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?

Desktop - 1.png

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.  
Solution

Contrary to my belief, most people seemed to find the 2nd flow more intuitive and so we ultimately decided to build that. 

Frame 5.png
customgif.gif
ezgif.com-gif-maker.gif
IMG_20200918_134956.jpg

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.

dragndropgif.gif

👩🏻‍🎨 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.

Frame 7.png
Frame 6.png
dd3.png

🎤 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

Desktop - 3.png

📝 Takeaways

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!