Hiver Analytics - Reports Module
Hiver is a chrome extension that works like a helpdesk inside Gmail. It brings collaboration features inside Gmail using the shared mailbox concept. In businesses, shared mailboxes help teams by enabling them to share their responsibilities (they can perform multiple actions like reading, replying, drafting messages, etc.) on emails.
![Reports_banner.png](https://static.wixstatic.com/media/eb22ff_bb658de0e0144f9f9e5e5e2de018880d~mv2.png/v1/crop/x_0,y_80,w_2880,h_1200/fill/w_1335,h_555,al_c,q_95,enc_auto/Reports_banner.png)
Platform
Web - SAAS
Team
Product designer,
Product Manager,
7 Engineers & QA,
Product growth marketing manager.
Duration
2020 (12 weeks)
Hiver reports analyze shared mailboxes to provide task-oriented and actionable insights that can help a team or enterprise make better decisions and drive positive change.
The design process
![process.png](https://static.wixstatic.com/media/eb22ff_1fcb1dba3171458c84aa6d3bd3d6c926~mv2.png/v1/fill/w_45,h_7,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/process.png)
Background
![Reports_process.jpg](https://static.wixstatic.com/media/eb22ff_2add591f505a4abfb97bf82ff407ffd1~mv2.jpg/v1/fill/w_132,h_49,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Reports_process.jpg)
Two use cases that most commonly exist in Hiver:
Team
A group of people who would be working on their customer queries and complaints which are accessible in a shared mailbox.
Company
An organization can have one or multiple shared mailboxes, based on their teams and the business needs.
Problem statement
Hiver is an enterprise tool used by different tiers of support teams, sales managers, finance teams, and many more. Each of these groups expects help in both assessing the health of their business, and backup their business decisions.
Design a reporting system that helps Hiver users (Managers & Businesses) is to understand the important information and trends to make decisions in the team to streamline the workflow.
Users
Team managers
This segment of users is directly working with the teams. They constantly strive to stabilize the team efficiency, and quality services and possess relatively high overall usage.
![Team Manager Persona.jpg](https://static.wixstatic.com/media/eb22ff_513d92cf034d4ff0b22aa451d84d2ba3~mv2.jpg/v1/fill/w_132,h_77,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Team%20Manager%20Persona.jpg)
CX level
This segment of users is generally executive-level people who are responsible for an entire business function or organization. They are constantly looking for ways to streamline their business and reduce costs by improvising the processes and team efficiency.
![Executive Persona.jpg](https://static.wixstatic.com/media/eb22ff_db895364de48401685d9089847cfb7eb~mv2.jpg/v1/fill/w_132,h_62,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Executive%20Persona.jpg)
Use cases
Hiver is used by businesses across different verticals - ranging from logistics and B2B companies to educational institutions and travel brands. Hiver is found useful in multiple types of teams - support, sales, finance, and operations, to name a few.
![Asset 2_3x.png](https://static.wixstatic.com/media/eb22ff_0a24bf9603b04dfa9f3b5c6a709113ef~mv2.png/v1/fill/w_36,h_36,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Asset%202_3x.png)
Support team
As a user, I want to know
-
What is the workload on my team?
-
How quickly they're responding to the inquiries?
-
How long they're taking to close a query?
-
How satisfied are the customers with the service?
![Asset 5_3x.png](https://static.wixstatic.com/media/eb22ff_c02588df624b45f9baa338f14e865f96~mv2.png/v1/fill/w_36,h_37,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Asset%205_3x.png)
Travelling agency
As a user, I want to know
-
How many customers/leads are reaching out?
-
How long does it take to close the deals by team?
-
What type of enquiries are coming up?
![Asset 4_3x.png](https://static.wixstatic.com/media/eb22ff_1b497f4de1a74cb482732f2a0ab46dd9~mv2.png/v1/fill/w_35,h_36,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Asset%204_3x.png)
University
As a user, I want to know
-
What amount of journals are in progress?
-
How long does each one take to publish?
& many more
Icon source: Freepik
Competitive analysis
Studied different reporting systems in the existing tools to observe the system behavior, navigation flows, and product design.
![c_analysis.png](https://static.wixstatic.com/media/eb22ff_55877933277444f3b3530f791f5079a6~mv2.png/v1/fill/w_73,h_44,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/c_analysis.png)
Metrics
After studying the user requirements and business needs, the product team came up with a few metrics for the initial release. To serve the user needs with a simplistic experience, and also with the competitive analysis, we categorized the metrics into four different groups.
![Metricss.png](https://static.wixstatic.com/media/eb22ff_68b80b1ce92e40a3ac23e417255298f8~mv2.png/v1/fill/w_73,h_16,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Metricss.png)
![wireframing.jpg](https://static.wixstatic.com/media/eb22ff_1dd65861feeb4d3fa1ac14c70e201aba~mv2.jpg/v1/crop/x_0,y_3,w_2355,h_1378/fill/w_96,h_56,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframing.jpg)
![wireframing.jpg](https://static.wixstatic.com/media/eb22ff_1dd65861feeb4d3fa1ac14c70e201aba~mv2.jpg/v1/crop/x_0,y_1407,w_2355,h_1665/fill/w_110,h_78,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/wireframing.jpg)
Some shots of various brainstorming sessions and sketches from the project
Design evolution
Rapid prototyping
With rapid prototyping, I worked to solve high-level challenges like navigation, data visualization, and information positioning. Validated these with the stakeholders and in-house supporting team [users].
v0
Feedback:
-
Long scroll, not so easy to navigate.
-
Metrics need to be more organized.
-
Some customers run their companies during business hours.
![Reports_V0-min.jpg](https://static.wixstatic.com/media/eb22ff_63c492b4c1604aee9b8e708d0aae4088~mv2.jpg/v1/fill/w_117,h_242,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Reports_V0-min.jpg)
v0.1
Feedback:
-
Tabs UI is not clear.
-
Using different colors for graphs may not be scalable and visually a bit intrusive.
![Reports_v1-min.jpg](https://static.wixstatic.com/media/eb22ff_053607939ede438984f2a5b9aa756afa~mv2.jpg/v1/crop/x_0,y_0,w_2978,h_3750/fill/w_117,h_148,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Reports_v1-min.jpg)
v0.2
Feedback:
Almost there, but horizontal tabs may not be scalable when we introduce a new set of metrics, customer reports, and dashboards.
![Reports_v2-min.jpg](https://static.wixstatic.com/media/eb22ff_f9fd24b522ba489080410a359ac7e2d0~mv2.jpg/v1/crop/x_0,y_0,w_2986,h_1717/fill/w_118,h_68,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Reports_v2-min.jpg)
Final experience
Conversations, Users, Tags, and CSAT are the overview reports through which users can get high-level information on workload and performance.
![Hifi_1.png](https://static.wixstatic.com/media/eb22ff_dcf18f88573a4c118cc2ac2dad6b8a39~mv2.png/v1/crop/x_0,y_3,w_1704,h_776/fill/w_60,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Hifi_1.png)
Visual Design
![Visual_design.jpg](https://static.wixstatic.com/media/eb22ff_82180682b8254963bfc9da4f1e24cfd9~mv2.jpg/v1/fill/w_147,h_53,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/eb22ff_82180682b8254963bfc9da4f1e24cfd9~mv2.jpg)
![Conversations - Volume based metrics](https://static.wixstatic.com/media/eb22ff_128b235c9a784ce2a1fc23e04e1017db~mv2.png/v1/fill/w_49,h_31,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/eb22ff_128b235c9a784ce2a1fc23e04e1017db~mv2.png)
![User level metrics](https://static.wixstatic.com/media/eb22ff_2d792b39f5c3416e97c5ddf200702301~mv2.png/v1/fill/w_49,h_31,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/eb22ff_2d792b39f5c3416e97c5ddf200702301~mv2.png)
![Export](https://static.wixstatic.com/media/eb22ff_5537a6315419446daae55d9eb89cfad7~mv2.png/v1/fill/w_49,h_31,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/eb22ff_5537a6315419446daae55d9eb89cfad7~mv2.png)
![Conversations - Volume based metrics](https://static.wixstatic.com/media/eb22ff_128b235c9a784ce2a1fc23e04e1017db~mv2.png/v1/fill/w_49,h_31,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/eb22ff_128b235c9a784ce2a1fc23e04e1017db~mv2.png)
Design challenges
1. Analytics module positioning
As Hiver is positioned inside the Gmail interface (USP of Hiver) I had to come up with a navigation system that shouldn't hamper the business' USP.
-
Users shouldn't be redirected to the new windows.
-
Users should be able to navigate to the other reports or metrics in the experience.
-
Users can easily navigate to Gmail/Hiver product experience from Reports.
![Task-flow-reports-2.png](https://static.wixstatic.com/media/eb22ff_dcbb6751d8cb4e3195ea14f4181e3f47~mv2.png/v1/crop/x_48,y_100,w_2924,h_853/fill/w_73,h_21,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Task-flow-reports-2.png)
2. Hiver branding and Extensions compliances
As per chrome extension policy, Hiver cannot override Gmail's branding. At the same time, Hiver being a business needs to emphasize its identity too. Keeping this in mind, I kept Gmail's topbar intact and added the analytics module underneath it.
![Branding.jpg](https://static.wixstatic.com/media/eb22ff_d3e4d67f21ce45b0a0d1e23414b5d5fe~mv2.jpg/v1/crop/x_12,y_8,w_1456,h_796/fill/w_131,h_72,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Branding.jpg)
3. Navigation bar
We have ten metrics categorized into four groups for the initial release. Further, we'll have more metrics added to the reports. We wanted to provide the users with an intuitive and simple navigation system that is scalable when we introduce new metrics as well.
![navbar_different_use cases.jpg](https://static.wixstatic.com/media/eb22ff_fbc5c4757ffa49be8b545876cda69d97~mv2.jpg/v1/fill/w_132,h_145,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/navbar_different_use%20cases.jpg)
5. Date picker experience
![date_picker.png](https://static.wixstatic.com/media/eb22ff_12f4cd30b1284356acac6878226a8a4d~mv2.png/v1/fill/w_73,h_40,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/date_picker.png)
Usability testing
I wanted to quickly validate the designs I made. Used Userberry tool to create task-oriented prototypes. Validated both high-level flows and some nits too. I took help from my product partner to set up the calls with customers. Reached out to five of our Analytics focused customers and in-house supporting team.
![Screenshot 2020-03-10 at 12.09.05 PM.png](https://static.wixstatic.com/media/eb22ff_7a81564153e04730a2e491a9341a15b1~mv2.png/v1/crop/x_0,y_0,w_1408,h_1388/fill/w_89,h_87,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%202020-03-10%20at%2012_09_05%20PM.png)
💙💙💙
"Loved the usability. Found it extremely easy to use."
"Loved the user experience and found it extremely easy to navigate."
User pain point
"Would love to have an easier way to navigate between individual user reports."
![User selection.jpg](https://static.wixstatic.com/media/eb22ff_c8d3c71db7654e2bbc908f5dcbdd2ef4~mv2.jpg/v1/fill/w_132,h_94,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/User%20selection.jpg)
User pain point
"It's not clear how the information is sorted on the table. Based on any indication I would sort the table and verify the data."
![Table_sorting_indicator.jpg](https://static.wixstatic.com/media/eb22ff_fde90703b294430b893a4db0c07938ac~mv2.jpg/v1/crop/x_0,y_2,w_1101,h_745/fill/w_132,h_89,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Table_sorting_indicator.jpg)
User pain point
" I can hardly see the background change when I hover on the table"
![Table hover state.png](https://static.wixstatic.com/media/eb22ff_615b3df314a94ff1bce21671f0841c65~mv2.png/v1/fill/w_73,h_56,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Table%20hover%20state.png)
User pain point
“I don’t like that it defaults to the last 7 days. I would rather it return to previously selected time frame when I close and open the analytics tool”
![Reporting_period.jpg](https://static.wixstatic.com/media/eb22ff_c4c3784fe1a845609dfa40a6957e0737~mv2.jpg/v1/fill/w_132,h_66,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Reporting_period.jpg)
The majority of the developers in the team are freshers. They're not familiar with zeplin. So, I conducted a couple of workshops on zeplin usage and added the dev notes while handing off the screens.
![Screenshot_inspected_&_edited2.png](https://static.wixstatic.com/media/eb22ff_ecfd63a99ccc400caf185243bf84945b~mv2.png/v1/crop/x_0,y_0,w_1440,h_521/fill/w_72,h_26,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot_inspected_%26_edited2.png)
Outcome
This was a really exciting project for me to work on as it provided a lot of real value to our customers, involved a ton of research, and detailed interaction work. I learned some good things while interacting with different teams and customers, and some important takeaways from this project related to product and business processes.