Making of: Prioritab, a Chrome Extension

24 January 2015

Over the holiday season, one of my projects was to build a small Chrome extension. The idea was a new "new tab" page that would remind you of your short-, medium- and long-term priorities. On the last couple of days of the year, I managed to release this idea in the form of Prioritab.

Prioritab is the first (mini-)project that I've made available to a wider audience, but it was also just the right size to allow for rapid development and a relatively tight turnaround during a break. This post is meant to be a bit of a retrospective on the development of Prioritab.

The Idea

I've always loved using Currently, a Chrome new tab extension from the guys at Rainfall Design that presents the current time and 5-day weather forecast with a beautiful design.

Two realizations inspired me to do something like Prioritab. The first was that I look at my Currently new tab page so many times every day - and each time I do actually glance at the forecast on it. The second realization was that I do not always have a very clear idea of what my current priorities are. This has become especially noticeable in business school, where every day seems to be a lesson in life prioritization and time management.

So I thought, why not put my priorities on my new tab page, to remind myself of them constantly? I probably wouldn't be able to create something as beautiful and original as Currently, but at least I could strike a balance between usability and simplicity.

Making Of

After Christmas, I dove right in. The original idea was to just add priorities lists to Currently: current time in the upper left, weather forecast in the upper right, and short- and long-term priority lists in the bottom half.

Luckily, I had made my first Chrome extension a couple months earlier (it's a relatively narrow use case specifically for HBS students, so not going to link it here). That extension involved background scripts and event signals bouncing back and forth; it took a while to wrangle things together, so I started Prioritab with a grim determination to face any Javascript or Chrome extension oddities to make this idea work.

But, turns out making a new tab extension is a lot easier than my previous idea! Building off of what I learned last time, I was able to pull something simple together much faster than I thought. As expected, the design was heavily influenced by Currently's design, but in order to force myself to think about and understand what was going on with the design, I didn't peek at any of the underlying code for Currently (except, I think, to use the same font).

I made one major change to the original idea early on: I nixed the weather forecast section. One reason is that I was no longer convinced that the forecast really belonged on a page listing your priorities. It's a "nice to have", but doesn't really fit the theme. A second, more practical reason is that getting the forecast from a source like Weather Underground required API calls, which would cost money.

Instead, I came up with the somewhat tongue-in-cheek idea of showing users how much of the day, month and year have already gone by. This definitely fit in with the theme of encouraging people to do something productive with their time!

So eventually, I ended up with a new tab page that wasn't too far from the first release:

Prioritab screenshot

First version of Prioritab

Overall, coding the first iteration of Prioritab renewed my appreciation for how hard UX and design can be. I had some vision of what I wanted the UX interactions to be like, and the most daunting features were a) the ability to drag-and-drop reorder your list items, and b) a smooth UI for adding and removing priorities.

This felt like it should've been a solved problem more or less - I didn't want to spend too much time reinventing these features when I was pretty sure that a lot of other, more experienced programmers had done it already. Surprisingly however, I had a difficult time finding the right library(/ies) that did what I wanted; everything was either too simple or way too fancy. In the end, I found this code which drew on a bunch of jQuery libraries. The original author was totally cool with me building off of his code, so my primary work was to extend his code to work with the three-list design that I wanted.

That code gave me the drag-and-drop functionality I wanted, and a good foundation for the 'Edit' menu in each list to add an item or clear the whole list. There was also originally some "edit in-line" functionality, where clicking on an existing list item would make it editable. After testing it out, however, I decided that it was a bit messy and confusing, given the drag-and-drop and hover interactions that were already there.

Otherwise, creating the first iteration of Prioritab just took some more elbow grease and concentration. Chrome has an incredibly friendly developer environment; changes are easy to test, and you can easily walk through code with Chrome's inspector in debugger mode.

The Release

I sent off the first version to my friends. Unexpectedly, one friend immediately posted it on Product Hunt and Facebook (and he's a popular friend), which shifted me from a "look at this cool-ish toy I built!" mode into an "omg this is shipping and strangers are looking at it" mode. It helped uncover one majorly embarrassing bug (the kind that suggests you can't do math) and a couple smaller ones, which I quickly fixed and pushed a new version for. And, it also hastened my timeline for a major refactoring I had planned (to use Chrome's storage instead of localstorage, which allowed Prioritab to sync your priorities across Chrome browsers on different devices).

Luckily, I was soon about to travel abroad for a couple of weeks, which forced me to leave Prioritab alone for a while. Even more luckily, I think I left Prioritab in a stable, working and bug-free version. I'm mulling over a couple of ideas and pieces of feedback I've gotten, so when I return to the US I'll have a better idea of what to prioritize next!

Major Lessons

Overall, making Prioritab was a great learning experience, and I'm excited about the positive feedback I've gotten regarding the idea. There will be some new features coming out over time, but please let me know if you have any feedback!

comments powered by Disqus