In March 2017, our design and dev teams completed a complete redesign of our app. In this post, we’ll discuss why and how we did it.
At Hive, we want to provide our users with the most seamless user experience possible. We are always thinking critically about how to improve through the lens of our 7 design principles.
When it came to this major redesign, our first step was to think about why we needed to update our look and what were our goals.
Based on feedback from our customers and reflection by the team, we identified three key aims for our redesign:
Bring more focus on action cards
Before, the Hive dashboard was divided into three panels: messaging on the left, actions in the center, and files on the right. While each had their uses, it became clear our users spent most of their time in the action panel.
This makes sense.
What mattered most was what the team was actually doing. Everything else was not as big of a focus. For example, most teams only needed their files panel occasionally when attaching them to an action, and not sitting in their view all the time.
So we knew any change to the app would have to put more emphasis on the team’s actions and projects.
Make Hive easier to navigate
We always aim to make Hive as easy to use as possible. Ideally, Hive would be so simple that anyone (regardless of technical background) could instantly get started in Hive. When we talked to our customers, it was clear that our previous version of the app was missing the mark. Many felt the all-white background washed out the app and made it harder to navigate. Also, our three-panel dashboard was not working for users with smaller laptop screens.
So we took in this feedback and set out to make the necessary improvements in usability.
Create a strong brand identity
As our user base has been growing, we have started to attract larger, more serious teams. We wanted to make a stronger, more professional brand that would reflect the changing profile of our customers.
How did we do it?
After identifying our main goals for the redesign, we then got to action. Here’s where we focused:
Improving visual workflow
Our design team reviewed our app’s structure to put greater emphasis on actions and improve usability. In the end, we realized we needed to simplify. There were two key features that cluttered the Hive dashboard:
- the files panel (where teams can connect their dropbox, box, and google drive accounts to access right in Hive) and
- the notes section (simple documents held at the bottom of the app where team members can write brief notes).
Both features were not used as often as others and were taking up valuable space. So we decided to hide the files panel under an icon in the top navigation panel and notes in user settings. That way, users can access those features when they need them.
As shown in the photo below, it opened up a lot of space for the action panel.
Changing color and typography
To improve usability, we increased the color contrast throughout the app and adjusted the typography to make it more readable. There were many tweaks involved in this update, but some of the most noticeable ones include:
- Darkening the messaging panel to differentiate it from the actions panel
- Increasing the contrast between the background and cards in the actions panel
- Bolding project titles and increasing the space between them
Updating our logo
As a part of professionalizing our brand, we revamped our logo. We wanted a bolder and more businesslike image. Our design team mocked up several different contenders and after a review of the team we decided on one.
Bringing all these changes together has created what we believe is a much-improved experience.