My Role
Platform
Web app - live
Research, concept ideation, brand identity, visual design, interaction design
Team
Upendra
Sukanya Basu
Duration
Feb - Mar 2019
(1.5 month)
Hiver is an email management tool that works inside Gmail and allows team inboxes to streamline their workflow. In businesses, shared mailboxes help teams by enabling them to share their responsibilities (they can perform multiple actions like reading, reply, draft messages, etc.) on emails.
Hiver — experience redesign
How it all started?
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. Gmail’s 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.
In the fewest words: Minimal — Usable — Scalable
The redesign 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 colour palette, typography, icon library, and all other components. We began by creating a new and more comprehensive style guide.
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.
i. 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.
ii. 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.
Assigning emails, changing status & adding tags
-
We’ve added an avatar in the “Assigned to” field to make it easily recognisable to the user.
-
The panel also gets a dash of colour and new icons to give it a personality as well as help users easily distinguish between alerts and activities of different kinds.
iii. 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 colours 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 colour, etc. All other activities on the Hiver timeline are informational.
Explorations and Iterations
Visual Design
Interaction Design