« Beeminder home

Beeminder Blog

Hexagonal buttons from the new dashboard

Remember back in the day (yesterday) when Beeminder’s interface was all cluttered and intimidating and looked like it was made in 2011, by kernel hackers and accountants? Or computer scientists and behavioral econ nerds who gradually agglomerated a multiheaded beast of a system to implement their crazy lifehacking schemes. Beeminder gave the impression that you needed to read our almost 6 years of blog posts in order to get started. Which, aside from being bad for getting newbees to dive in, lead to emails like this one from a superfan:

“I want to share Beeminder with all my friends but every time I introduce it to someone they never get past the first few pages. I even tried showing it to my mum, who has the most to benefit from it, but I will never forget the look of panic on her face.”

That was Josh Pitzalis, who proceeded to offer his services as a web designer. We think being a hardcore Beeminder user is such a good predictor of general awesomeness that we pretty much jumped on the chance to hire him then and there. He also was starting with the huge advantage of already understanding much of the functionality. Josh was wonderfully thoughtful about the tradeoffs (newbees vs power users) and did many user tests to single out problem areas in the old design, and to test out the mockups of the new design.

Some Stats

We started work on this 6 months ago, with Josh starting in on designs in late March. Our own Andy Brett has been doing little else since July [1], bringing Josh’s vision to fruition. The redesign comprised 846 commits and 385 completed Trello cards (with 39 more tagged “to do asap after launching” and 35 in “still discussing”). It took over 550 hours of time, 100 from Josh, and at least 450 from Andy. Danny and Bethany failed to separate out time spent specifically on the redesign but it was some hundreds of more hours. That also doesn’t include all the time spent by intrepid users testing things out for us and submitting bug reports (thanks so much!). Possibly our favorite stat, though, is that Andy’s net contribution was -210 lines of code. [2]

New Features

We actually tried to minimize the new features that were rolled into this redesign. The idea was to drastically improve the aesthetics and the interface without messing up any functionality. The changes were so extensive that a lot of things broke (and were fixed again — thank you beeta testers!) along the way. Every new feature bundled in with all that would mean combinatorially more complexity and ways for things to break.

But here’s what ended up functionally different:

  1. We expect most people to live in their dashboard, which is now what you see if you’re logged in and go to beeminder.com/username. The gallery is still available too and is what’s shown to people not logged in. There a bunch of changes in the dashboard — mostly fitting more information and controls in so you don’t normally need to leave to enter new data or see what you still need to do. Maybe the slickest new feature is the expanding and collapsing goals. Pro tip: Use it like a to-do list by expanding the goals you want to work and then collapsing them throughout the day as you get enough done.

  2. The Data tab is so much nicer! It lets you load all the datapoints on one page, sort by any column, and you can edit datapoints in place. And all of that is now right below the graph. Also below the data are import/export and data rescaling.

  3. Account deletion. This feature is incomplete (we have a full spec if you’re really curious) but at least we’re covering 99% of cases now: users who were just experimenting and never made it down the Beeminder rabbit hole. Specifically, you can delete your account with a button press if it’s less than a week old or you have no active goals. After that you have to talk to us. That’s the current compromise, since Beeminder, after all, is all about getting yourself firmly on the hook.

  4. The new table of reminder settings for all goals is sortable by goal, deadline, reminder start time, etc. That’s a big deal if you’re setting up a Beeminder waterfall.

  5. The buttons above your graph telling you how much you have to do, by when, are togglable. You can view them in terms of the delta needed or the absolute number needed. Similarly for the deadline — either a countdown or the time of day. And they remember which way you wanted them.

  6. This is a minor one that’s more about the UI than new functionality but we think it’s important to always be acutely aware of not only the amount of money you have at risk but how much is going to be at risk in the future. So now when your pledge is scheduled to drop down, that’s displayed very clearly above the graph, and when you’ve hit your pledge cap, that’s indicated with an asterisk. We find this matters a lot for our own goals because hitting your pledge cap without noticing means you can get stuck at a pledge below your motivation point

  7. Tagging! You can add tags to your goals and use them to view certain subsets of your goals. There’s still work to do on the UI for this, but I know for some of you this is already your favorite thing about the redesign. Details on how to use it are in the forum, since it’s not linked to in the UI yet.

To see everything new, here’s the tweetstorm from @beemuvi. We’ve hard-committed to average one User-Visible Improvement per day (under penalty of $1000) and have been doing so for 2060 days now!

Lost Features

We went to pretty heroic lengths to not lose any features or functionality or make things worse for our hardcore superfans. If you have counterexamples, we very much want to hear! But we did decide to axe a few things:

  1. Auto-quit. Years ago, when we switched to automatically recommitting you and putting you back on the yellow brick road when you derail, we added a feature to opt out of that and just have your graph freeze if you derailed. That was called auto-quit and it violated every principle of behaviorial economics that Beeminder is based on. Now that it’s a distant memory that Beeminder ever behaved differently we decided to kill that feature. (With grandfathering of existing goals of course.)

  2. Backburnering. This feature was confusing and even dangerous because it could leave beemergencies hidden from view. Also it was a very crude way to organize your goals. Now that we have (a rudimentary) way to tag goals and filter by tag, we decided it was safe to kill this feature. If you just want backburnering, tag those goals “backburner” and then append #!backburner to the URL when viewing your dashboard (and perhaps bookmark that version). Also you can now instantly delete things from your gallery of archived goals (another new feature we didn’t mention) which means you can use your archive for things you don’t care about but still want to keep around without being cluttered with things you really want totally gone.

  3. Sort threshold. This one is too obtuse and obscure to even describe but it was another way to organize your dashboard and we’re hoping that tagging will subsume it!

Footnotes

[1] Little else on Beeminder we mean. He’s also circumnavigated the globe and circumambulated Mont Blanc since July.

[2] Note for non-programmers: That means he got rid of a bunch of things in addition to adding and changing a bunch of things, which is great news for the codebase. That’s why typically a better metric of progress is to sum up additions & deletions, and get the gross line changes, not the net. That was over 16,000 lines of code in 453 files.

Tags: