Introducing the new and improved Hiver experience

Sukanya Basu
Inside the Hive
Published in
4 min readAug 28, 2019

Every business uses email extensively. Email, however, was never designed to do the things they try to do with it often leading to email clutter and overload. We built Hiver to help solve these fundamental problems with email, without taking anything away from its simplicity and speed.

We are committed to ensuring that every Hiver user has a great experience. Hiver’s shared inbox works within Gmail, essentially making it a product within a product. Hiver was built from day one to blend in with the native Gmail UI, ensuring that there is minimal friction during adoption and teams can hit the ground running with zero to minimal onboarding/training.

While Gmail was never an outdated product, in April 2018, Google announced a comprehensive redesign of Gmail. Google’s rationale behind the redesign was that it would help in making users feel safer and more productive. And this was obviously a step in the right direction for business users of Gmail.

Gmail’s 2018 redesign gave us a chance to go back to the drawing board and redesign Hiver from the ground up as well and take a step in the direction of making Hiver work better for businesses.

Why redesign? 💁🏻

Hiver’s redesign was driven by two factors:

  • Help teams become more productive and collaborative using email.
  • Help Hiver carve out a unique identity for itself within the Gmail ecosystem while delivering moments of delight to all our users.

Why do a UI revamp? In the fewest words: Minimal — Usable — Scalable

The process🙇🏻

1. A unified interface

Since Hiver sits within Gmail, the product design team’s first challenge was that we had to reflect Hiver’s identity while keeping in mind Gmail’s constraints.

To do a full UI revamp and provide a seamless experience, we had to begin defining a new visual style. We had to revisit and rethink the color palette, typography, icon library, and all other components. We began by creating a new and more comprehensive style guide.

Breaking down the style guide:

  • Icons: Simple, energetic and professional line icons in our signature brand colors.
  • Color palette: Black and Golden Yellow to help bring in the much-needed energy, and Caribbean Green to bring in a sense of serenity.
  • Typeface: DM Sans and Roboto to help Hiver be in sync with the revamped Gmail UI.

2. Component-wise redesign

Hiver is a feature-rich product. Despite that, we’ve always kept our interface extremely simple and minimal. Rolling out a full UI/UX revamp to all of the Hiver features might confuse our users and throw them off. We decided to begin by first shipping only the new UI with micro-interactions, and then gradually shipping other interaction changes over the next few updates. So, rest assured, we have a lot of exciting updates planned.

The left-hand side panel

We’ve given the left-hand side panel subtle tweaks to help differentiate it from the Gmail UI, making it easier for users to access their Hiver shared inboxes.

The right-hand side panel

The right panel is where Hiver comes into its own. The right panel is where almost all Hiver users spend most of their time delegating emails, sorting and filtering them via tags and users, viewing the activity timeline, etc. And since the primary purpose of the identity revamp was to help improve usability and make Hiver users more productive, a comprehensive redesign of the right-hand side panel was necessary,

Assign, change status, add tags

  • We’ve added an avatar in the “Assigned to” field to make it easily relatable to the user.
  • The panel also gets a dash of color and new icons to give it a personality as well as help users easily distinguish between alerts and activities of different kinds.

The activity timeline

The most significant change of them all — We’ve redesigned the entire activity timeline to make it more organized, minimal as well as consumable.

  • Activity icons are now more distinct and relevant. Why? We’ve redesigned our icons and infused them with colors for easy distinction and quick recall.
  • A card-style UI for Notes. Why? The old Hiver UI did not provide a clear distinction between notes and other activities. We’ve attempted to differentiate notes from other activities by giving them a card-style UI. This was necessary because notes are different from other activities in the sense that they are consumed in a different way — you can reply to a note, delete it, change its color, etc. All other activities on the Hiver timeline are informational.

What’s next in store? 🎉

If there’s one characteristic that all great products show, it is that they never stop improving. There’s always room for improvement. We’re already on our way to making further enhancements and UX improvements to Hiver, to help you bee 🐝 more productive at work.

We’d love to hear from you. If you have any feedback, let us know in the comments section. We’re all ears. 😬

❤️ The Hiver team.

--

--