Case Studies

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.”

Humble Dot is an automated tool that builds visibility, alignment, and camaraderie for remote teams.

Humble Dot is an automated tool that builds visibility, alignment, and camaraderie for remote teams.


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%.

  • Rebranded the company: created brand guidelines, art-directed a product video, redesigned the website; reducing bounce rates and increasing conversions by 22%.

  • 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.


DEEP DIVE

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.

Grid view optimized to see high level updates from each member of the team, with Social, Public and Private questions.

Grid view optimized to see high level updates from each member of the team, with Social, Public and Private questions.


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

75% of the most frequently taken manager actions, View Responses and Give Kudos, mapped to the first two user stories that came out of the interviews. In addition, we discovered a group of power users, ~20% who replied frequently to responses. This was counter-intuitive to our engineering manager persona; managers who has very little time to interact with direct reports. Finally, we discovered another power user profile, ~5%, who took the "Preview Questions" action before each check-in goes out. This helped us realize how hands-on some managers like to be about the touch points with their direct reports.
 

Top Member Activity

60% of all member activity was completing an open check-in, mapping to our primary user story. Despite the number of members who mentioned the importance about visibility into other team-mates' work, analytics revealed ~22% of users were actually taking this action. This finding helped us de-prioritize this action. Finally giving Kudos and replying to commenting on responses had a total of 18% weight. Overall, user stories successfully captured all activity, and analytics helped clarify the importance of each.

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.

Notification types and architecture summarized.

Notification types and architecture summarized.

Notification Types

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.

First iteration of the notification types for Managers, Members and Shared respectively.

First iteration of the notification types for Managers, Members and Shared respectively.

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.

This wireframe of the reverse chronological timeline shows how check-in related notifications get lost in between the secondary notification types.

This wireframe of the reverse chronological timeline shows how check-in related notifications get lost in between the secondary notification types.


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.

notifsall.png

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.

checkin prior.png

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.

home - empty states.png

Final Version 🎊

After getting some more feedback, we released the home tab as seen below.

final.png

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.

Asli Kimya