Leading Design and Research at Humble Dot
I joined Humble Dot as an early employee at the pre-seed stage. As a core member of the team with a strong focus on user-centered design, I helped to evolve the product and find product-market-fit.
Today, Humble Dot today is a team collaboration platform for large and distributed companies. Adopted by corporations like Google, Twitter, as well as non-profits like NYC Department of Planning and Stanford University, it is a lightweight means for managers to build stronger and more efficient teams. Through the process, it was invaluable to talk to the leaders and their team members, who were loyal users. One of my favorite statements came from Grace, VP of Engineering at Africa’s Talking: “I went from having a 10 person team to 30. I had no idea how I was going to be able to continue to stay connected and manage all my direct reports without sacrificing quality. Humble Dot saved me.”
As the first and only designer and researcher at the startup, I was fortunate to touch on every aspect of our product and marketing. Some highlights of my experience:
Defined the roadmap through strategy, user feedback, and analytical insights with the CEO and CTO.
Conceptualized and designed product features based on PMF surveys and user research insights; increasing engagement metrics by 200%-300% and customer satisfaction by 70%.
Created and owned the process for user research from usability studies to formative interviews.
Developed marketing and email campaigns with the Head of Growth.
The rest of this post explains the thought process behind a big product release: 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.
User Stories and Feedback Driving the Process
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.
Our power users, managers who care deeply about their teams yet are extremely busy, wanted HD to tell them what they needed to know. At a glance, they wanted to get a high-level update.
User stories as a manager:
“I want to see the most recent check-in responses.”
“I like to help my team feel heard by giving them Kudos, to acknowledge that I see them!”
“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.
User stories as team member:
“I want to see the most recent check-in responses from my team-mates. What are they working on?”
“I want to know if there is an open check-in I need to fill out.”
“I want to quickly see who mentioned me, gave me Kudos (likes), and left comments.”
Analytics to Support Qualitative Findings
We supported the qualitative findings from the user interviews with a deep dive into the analytics. We plotted top user activity for managers and members respectively.
Top Manager Activity
Top Member Activity
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.