But this is never the case when a user signs up. In the beginning, there is no data, so an empty contacts column and an empty chat window.

Shiny UI design makes it easy to consume information and does not focus on how to create that information.

I learnt this the hard way, when I soaked as much of Dribbble I could to design a dashboard for a b2b application. It looked great on sketch, but our customers weren’t able to find their way through.

Bad UX increases on-boarding and support cost, directly affecting revenue. It also feels bad to watch a user struggling to consume you pixel perfect design. Reminds you that you failed.

Existing Solutions

One solution was to have an upfront on-boarding using slides like interface. This seems to be the standard for mobile apps.

The problem with slides approach is the lack of context. You can convey only so much on the slides (how much the user retains is a different question).

It’s great for giving an overview of the product, but not very helpful with explaining how the product works. I it irrelevant for my use case, as the complexity of the product could not be boiled down to a few slides.

There was also a tooltip based solution that walks the user through specific steps. This option is more popular with web apps. There are many good javascript libraries to help you build these flows.

As far as a tooltip based solution goes, I found them annoying and almost always clicked “skip tutorial”. Though big companies like Canva use tooltip based on-boarding. A product called AppCues lets you design these tooltips without code, neat.

There also exists a beacon style approach, where commonly misunderstood features are labelled with glowing beacons, which provide relevant information when (if) needed.

This is the most unobtrusive way. Unlike tooltip that shoves a 17 step tutorial down your throat and vanishes when you actually need it, this hotspot based approach provides info when you are ready.

It’s worth mentioning that Slack uses all of the 3 forms. No wonder their users stick. Which also somehow hints to the fact that retention is directly proportional to ease of on-boarding.

OCD aka Onboarding centric design

I like naming things. Names help materialise ideas in the mind. So let’s call this Onboarding centric design.

I wanted a solution which :

• Was relevant to the context
• Was not annoying (nobody likes to take 17 steps to learn how a feature works)
• Is unobtrusive (like the beacons)
• Is easy to consume (tooltips are not easy to consume)

Outcome

I simply started designing states. The chat design you saw while you started reading this article can be designed with three states.

State 1: No contacts are present

State 2: Contacts present, but no chats

State 3: Both chats and contacts are present

The goal of each state is to progress the user to the next state. When the user has progressed to state 3, she is successfully on-boarded. Considering the chat mockup, the goal for each state are as follows :

Goal of State 1: Prime user to add a contact

The mockup below has just one call to action, the blue plus button that let’s the user add a new contact. The graphic and the text both prime the user to take that action.