Danny Keane - Product Designer
IMG_8607.jpg

Making team communication simple

Discover how I helped transform the experience of a popular team communication tool used by over 100,000 users. Setting up the company to raise over $6M in funding, before being acquired by HipChat.

Introduction

Introduction

Founded in 2011, Hall provides a platform for businesses to communicate from any online device. It aims to deliver real-time communication across different companies, so users can contact co-workers, employers, clients and friends all from one secure place.

Hall's mission was simple, it wanted to be the first company to bring short-form messaging to businesses. After serving more than 20,000 companies, over 100,000 users and raising $6M in funding from top Silicon Valley investors, they were later acquired by HipChat.

I worked closely with Hall, throughout 2012-2014 on the production of the mobile and desktop applications. These products received a great amount of praise and were a big component to the tremendous amount of success Hall has had. 

Understanding the audience

Understanding the audience

In order to solve problems it requires conducting research by asking people that actually use the product, in order to assess where our boundaries lie. Combined with competitive analysis and an understanding of technical constraints we can start to piece together exactly the issues we need to address. 

Being a designer is more than just creating nice looking products.

My goal was to help create a better tool that would enable businesses to communicate better. Through conducting user research I discovered that the majority of our audience were mostly non-technical employees and on top of this the product had a high number of daily active business users that relied on the product to communicate across teams.

With this being the case it meant designing a product that not only had a rich feature set, but did not stray too far away from what current users were familiar with. Changing things too much could cause big issues with business workflows, and would leave users feeling as if they were forced into learning how to use a completely new product, which is definitely not ideal in a fast pace environment.

This created an interesting design challenge. The needs of a small local business managing one local team are very different from a business managing 15 global teams across multiple countries and timezones. Although the importance of communication is the same among both, things become a lot more difficult the larger the company is. The more components there are the harder simple tasks become.

Crafting a suitable user flow for both new and returning users

Crafting a suitable user flow for both new and returning users

As our target audience were business customers it was important to save as much time as possible and remove any unnecessary steps in their journey that could potentially slow them down. This meant crafting a sign up flow that was painless for new customers to journey though.

For returning users, it was important to ensure that the product enabled them to keep constant communication, alerting them of any new information that may have occurred while they were away.

Piecing together the interface

Piecing together the interface

Finding the best layout to house contextual tools whilst giving priority to conversation threads and messages was interesting. As we already had a product out in the wild already, we needed to be strategic with how changes were implemented, it almost became like a game of chess.

My methodology was to separate the application out into is most prominent areas and AB test them with a subset of users before starting to hone in on details. This created great reassurance in the way that I would begin to move forward. It solidified design decisions, and gave a clear indication for what would work and what wouldn't. This was extremely important considering these changes would be impacting a large amount of users.  

It also acted as a way for me to ensure that we were building a product that people wanted. Listening to feedback and acting on it is key to creating great product.

Shipping the product and hearing the reaction

Shipping the product and hearing the reaction

After all of the hard work put into the product up until this point, it was great to see the tremendous amount of praise and support the users were giving. The most important take away from all of this was the useful feedback users were giving, this ultimately helped to improve the product further.

Shipping the product sparked a great amount of press and within a few months enabled the company to raise a $5.5M Series-A

Iteration, iteration, iteration

Iteration, iteration, iteration

A few months past and the team had been busy working on the development of new features. By this time the product had been in the hands of users for a while, some of the immediate features that had been requested had been bolted on to the current design without too much thought on how it would impact the user experience. Being a startup, its key that they move quickly or face being left in the dust by a competitor.

After looking over the features I noticed that we would need to slightly restructure the product in order to accommodate the new tools.

As older features were removed and newer ones added, this is when I started to construct a new plan for how things could work. My aim was to give ample room for the user interface to scale, whilst still keeping the fundamental structure and user behaviors which also proved to be very challenging.

Designing a system

Designing a system

In order to help both engineering and future product teams iterate on current and future versions of the product effectively creating an effective design system was a must. This not only allowed for a consistent brand experience across platforms but also paved the way in allowing us to think of the bigger picture. thus protecting the overall user experience. 

I wanted to create a faster workflow for future designers and engineers to follow to ensure that the end-product was as close to pixel perfect as possible. When dealing with engineering teams, it's not uncommon for things to fall by the wayside when shipping a release. Building a solid relationship and setting off on the right foot is something I find really important.

This is when I began to craft the UI on a rigid foundation. I setup a grid system that enabled a harmonious design that was well balanced, looked great, and helped maintain prominence of our most important features. The grid system took into account important factors such as minimum screen resolutions, application chrome restrictions and overall legibility.  

Baseline grids are one of my favorite tools in my toolbox to help with this. I almost see it as setting the tone for what is to come. 

Beautifully consistent UI components

Beautifully consistent UI components

Using the baseline grid as the foundation, all elements were spaced using multiples of the baseline grid (4px) . This ensured that all design elements were all spaced perfectly. A design spec sheet was handed over to engineering teams to ensure that the correct spacing requirements we're followed.

Enhancing the user experience through sublte interaction

As my work continued, I began to focus on enhancing the user experience of certain components. I believe that interactions play a huge roll in making a feature that little bit more useful. 

As our audience are primarily using this product to communicate I didn't want to over complicate matters by implement anything that would cause a distraction or be deemed as useless. I believe an interaction should contribute to an experience not subtract from it.

To enhance the experience of our search bar, I introduced a subtle animation that initiates the process of a search request. Once the search icon or result has been clicked, or the return key has been pressed, the bar will simulate an exit animation allowing the user to know that their search has been started. This may seem simple in hindsight, but it takes an extra step in offering an indication that things are happening.

Many small interactions like this can have a big impact in the overall user experience of the product. Subtlty is key.

Keeping consistency across platforms from design and UX

Keeping consistency across platforms from design and UX

It was important to maintain consistency across platform, not just from a design stand point but more importantly from user experience point of view.

The transition from desktop to mobile meant that conversations needed an even higher priority due to the limited screen real-estate available.

Messaging was the core component of the products identity. We needed to ensure that conversations were easy to follow throughout the application and that they felt at home, regardless of the platform.

The integration of rich links and inline multimedia playback for websites, sound and video, provided a powerful immersive experience for users. Helping to give more context to the content being shared.

Final words

Final words

Having full creative control over the design and user experience of a product used by thousands of people every day, is pretty much a dream job as a designer. 

I thoroughly enjoyed the challenge of designing with such a large and intricate feature set. It forced me even more, to think from the perspective of the average user, and in the process creating something great.

Working along side a talented team that were great at providing honest feedback, definitely had a positive impact on the design decisions I made throughout this project. This is something I value most with the clients I work with.