I have been leading design at Humble Dot, a team collaboration tool that builds strong and happier teams.
As the first and only designer at our growing startup, I get the work on everything! Some highlights of my experience so far:
Designing our website to convey our value propositions and show our product.
Outlining our brand guidelines to resonate with our product values: simple, pop, and friendly.
Working directly with our CEO and CTO to design product features that meet our users’ needs.
The rest of this post explains the thought process behind our latest update: the Home Tab.
Understanding the problem
Humble Dot is a team alignment tool for managers to setup check-ins with their team members. There are public questions for team collaboration and status updates, private questions for one-on-one matters, and social questions for team bonding.
The grid view, shown below, provides a detailed snapshot of all team updates. Here managers view all the responses at a glance and drill down to priorities and blockers if necessary.
However, user interviews that we did revealed that the grid can be overwhelming and time-consuming. Our users divided into two groups with distinct use cases: managers and members.
Managers were very busy, and wanted the tool to tell them what they need to know. As a manager:
“I want to see the most recent check-in responses.”
“I want to know how many people, and who filled out a check-in.”
Members were busy too, but they enjoyed reading each others’ updates. Some had resistance to add another tool on their plate so wanted to get to the responses quickly. Others did not mind poking around the tool to see their previous updates and to interact with each other. As a team member:
“I want to know if there is an open check-in they need to fill out.”
“I want to see the most recent check-in responses.”
“I want to quickly see who mentioned me, gave me Kudos (likes), and left comments.”
To validate the interview responses we checked our analytics. We plotted top user activity for managers and members respectively.
Top Manager Activity
1- View responses.
2- Give Kudos.
3- Reply to comments.
4- Preview upcoming checkin questions.
Top Member Activity
1- Fill out a checkin.
2- View responses.
3- Give Kudos.
4- Leave comments.
Solution: Home Tab, the mission control center
We decided to balance the complexity of the Grid with a simpler Home tab, that summarized the valuable information for the user. Home would be the new landing page. It would have a list of all the activity (notifications) the managers and members need to know.
The Architecture of a Notification
I worked with our CTO to list all our notification types, and proposed a visual architecture that all notifications would share. Looking at similar platforms, I wanted to lead with the notification type. In The second distinctive quality was the team or the team member the item belonged to, therefore that came second in the visual hierarchy.
Working through this stage together enabled us to synchronously build the front end and the back end of the feature.
My first exploration of the notification types followed our user stories, disparate for managers and members. Working with grayscale allowed me to differentiate between check-in related notifications and all others. Since all the SHARED notifications (shown on the third column below) had an inline quote, we initially felt comfortable with this distinction.
V1: Reverse-Chronological Timeline
Putting the notifications together, our brute force solution was a reverse-chronological timeline. This was the most cost-efficient solution to build.
However, check-in related notifications got lost in the timeline. Since providing input and viewing responses to the check-ins are at the crux of our application, we needed to change this.
V2: Prioritize Check-ins Above All Else
I tackled differentiating check-ins from other notifications from 2 angles.
First, by introducing distinctive action buttons. I used our primary button, with a solid blue background, for primary check-in notifications, and secondary button, with a blue outline and white background, for all secondary notifications. Consequently, I removed the notification icon type indicator. This solution simplified the modules and drew attention to the primary CTAs.
Second, I introduced a new section on top named “Check-ins”. This module would hold all time-sensitive check-in related notifications including “Preview” for the manager, “Complete” for team members, and “View Responses” for everyone.
V3: Granular Structure and Empty States
At this point, we began using the home timeline internally. Additionally, we conducted some user interviews to get feedback from some of our customers. Most of the feedback emphasized the need for more organization.
Specifically when it came to Check-ins, people wanted to know if they had something to do. The check-in notification for viewing responses, was not an urgent one. But seeing this above everything else caused some confusion among some people. Therefore, we ended up creating a dedicated To Do section with primary notifications that require an action. On the side, we had Recent and Upcoming Check-ins modules that displayed the check-ins within a week from now.
Additionally, we added some rewarding and fun empty states. Our users always asked for the number of check-ins they filled out. Knowing the importance of continuity in using the tool, we decided to display the current streak in the empty state of the To Do module.
Final Version 🎊
After getting some more feedback, we released the home tab as seen below.
Some major improvements of the final update:
Showing the profile picture of who completed the most recent check-ins. This was one of the user stories for the managers.
Removing the buttons from all secondary notifications under the What’s New module. The inline quotes have hover states and serve as buttons.
Keeping the primary buttons only under the To Do module. This made the urgency of those items very clear.