When we first launched happytables, one of the things we did well was create a series of tasks for the user to complete, commonly known as the checklist. This is what it looked like:
It was linear and long, thus easy to read yet hard to add anything else on that page. With happytables 2.0, we needed to replicate the concept of this feature, but maybe try to optimize it a bit in the process. So I spent a part of yesterday coming up with a simple checklist that now looks like this:
I’m really happy with the result as it does a few things now:
- Only shows 3 items at a time (if you’ve only completed 1 or 2 items, it will still show you the completed “Sign up” task and checkmark)
- It’s ordered in terms of what we consider the priorities (will likely change, will share results in my newsletter)
- It very clearly demonstrates your progress visually (and also a bit differently then the stereotypical progress bar, using chartjs)
- Most importantly, it saves on real estate.
This did however mean that we had a chart and checklist above another set of charts and statistics (“Website Statistics”). In order to not overwhelm the user, I also added a task there, reducing the visual clutter quite a bit:
This also makes sense as the user won’t have any real data till the site is getting traffic. We’ve also had users do a simple redirect to the subdomain which is not the correct way of connecting a domain to happytables (a CNAME is). So in addition to creating better focus visually, it has the added bonus of acting as a check when a domain is set incorrectly.
Final result:
What do you think? Time (and metrics to an extent) will tell. I’ll share some of the MixPanel stats over my newsletter soon so that you can see the impact of these changes.