a Lesson in UX 01.03.2015

How does a software convince us users to use it? It’s a subjective and complex process, but in my case I’d say it’s almost always by:

  1. Focus on enabling me to do my “job to be done” quickly and easily.
  2. Removing the unnecessary clutter.

I have to admit, even if 1) & 2) are not perfectly executed, I’d spend some extra time trying the service if I can feel the team has invested sufficient time in the User Experience.

Finding a chat software

Being the CEO of startup you have to wear many hats. In the product manager role I try to take away all unnecessary distractions from our team and let them focus on their job to be done. This is the case with choosing our internal software. I don’t try out new software very often, because it is very time consuming. There has to be a very clear need, in which case I will first do a fair amount of research beforehand to narrow down the alternatives. This was the case with our internal chat system at Perpetto. During our first several months we fallbacked to Google Hangouts, but we needed a real communications hub. My research showed we had to try HipChat at some point, however the excitement for the tool was somehow hampered by traces of the Atlassian acquisition, for example on HipChat’s logo. Atlassian is a huge corporation, I wondered how crucial will a chat software be for the future of the big corporation. My guess – not so crucial.

Then came Slack. I remembered reading about them in the news a couple of times before I decided to give it a try. HipChat was going to be next right after that. Here is how Slack performed on my test.

#1 – Job to be done quickly and easily

Easy to setup

Invite team members
The beautiful onboarding screen with zero distraction

At first I felt that inviting my team members will be a pain, but when I came to the designated step it just made me feel good. It rightly assumed that we all share the same domain name and I just had to enter everyone’s first name (we are quite informal when it comes to email).

Understanding key components

Undestanding key components
In-app tutorial to understand the key UI components

I knew onboarding is often hard when it comes team software. You don’t want to explain each person what to do and you want all of them to be happy using the new tool. This was one of the simplest and best looking onboarding sequences and in-app tutorial I’ve ever finished. I don’t even remember how much time it took me, because it was really easy and interesting to follow through.

First steps

The humorful and humble Slackbot

Having the Slackbot inviting the user to do the first few keystrokes in the chat itself was a genius idea to finish the onboarding. “Slackbot is pretty dumb, but tries to be helpful” – how cool is that?

In a few steps I had already set up my account, invited my team members, understood the most important features and chatted with a friendly bot.

And then the magic moment

Our need as a team is to have a central hub which can deal with most of our communication needs part of which is sharing links and files.

Pasting from clipboard
Pasting the clipboard into the message line of Slack

My magic moment came after pasting a screenshot straight from the clipboard into the message line the exact same way I do in Photoshop. A few seconds later it was posted in the chatroom. That same instant I became a Slack fan. It was a tiny, but truly surprising feature. If Slack had this up its sleeve, then I believe it will be able to do pretty much everything our team will ever need.

Job to be done quickly and easily  –  ? Checked.

#2 – Removing the unnecessary clutter

Removing the clutter
Removing the clutter. Slack UI vs. HipChat UI

From the onboarding to the overall UI of the application, Slack has a very sharp focus on design and it is visible in every aspect of the User Experience. The question “What is the user’s focus here?” is central at every step of the user flow. They don’t want to distract the user from his or her job to be done and what else is the job to be done in chat software other than communication itself. As opposed to to Slack, HipChat’s UI is much more cluttered. You have the right drawer with some details such as team members (which appear repeatedly on the left side) and files. Even more unusual is the way the central chat area is divided into two columns (author and content) and into rows (for each message).

The only space dedicated to something else than communication in Slack is the left drawer where you navigate the channels, settings, profile and everything else. My hunch is that Slack’s team left it there because it is a learned pattern from Skype. If I was part of Slack’s UX team, I would create a shortcut to hide that left drawer and one more to let the user type channel names and hit enter to open them – similar to the new Mac OS X Spotlight search or the Alfred search bar (which I use 99% of the time to switch between or open applications).

Removing the unnecessary clutter  –  ? Checked.

The key lesson

First, the Slack team had thought about my “User Story” and had executed perfectly all the “Red Routes” leading me to do my job to be done quickly and easily. Second, they have a culture of design and simplicity that enabled them to remove all the clutter and purify the experience. Plus, I met a robot – the Slackbot, “who” by the way changed it’s icon recently to a heart.

Slackbot Icon

The deal was sealed – we became Slack users and HipChat was quickly forgotten. I didn’t even care if it had more features or more integrations. I don’t need more, I need less, but I need it to be flawless.

I wish all new products could be executed that well!

UPDATE: I recently read an internal note from Stewart Butterfield to the Slack team which explained the attention to detail I found everywhere in the product. Every startup, every company, every shop, heck, every team out there must read it and remind themselves Terence’s words from Whiplash.