Unveiling the Big Beeminder Redesign of 2016

Friday, October 14, 2016
By dreeves

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: , , , , ,

  • JayDugger

    I struggle to phrase my disappointment in a polite manner. I hope this proves a positive change. While the previous arrangement did require a little work to understand, I do not yet think the new design counts as an improvement.

    I’ll continue to use Beeminder, but for the foreseeable future I will use the mobile client instead of the website.

  • http://beeminder.com Daniel Reeves

    This is valuable to hear! I think every redesign in the history of the universe yields *some* amount of discomfort/disappointment from power users who really honed their use cases on the old design.

    So we won’t panic yet based on this but want to hear from more people! Also, can you point to something specific you don’t like as much on the new site? We do still have those 39 Trello cards so it may be something we’re already working on but hearing specifics will help a lot to prioritize.

  • Luis

    Haven’t looked too into the changes yet but I would say that the galleries now expose people’s names that weren’t visible before, which without opt-in was probably not a prudent idea…

  • http://andybrett.com Andy Brett

    Hi Luis – is there a particular gallery you’re referring to? We actually didn’t change anything with which goals are public (and definitely wouldn’t do anything like that without a ton of thought and messaging to people about it). Curious what you noticed that made you say that.

  • https://entirelyuseless.wordpress.com/ entirelyuseless

    It doesn’t look better to me. But besides that, it showed up as “you will derail in two days” when in fact it was just that I would go over the centerline on my weight goal. It would be at least several weeks of no change before derailing.

  • Luis

    I went to my beeminder.com/username/gallery page this morning (while not logged in) and my full name was listed below my username. It was not before (and I wouldn’t have let it be). I went in and changed it to first name and initial.

    If I do a google search on beeminder galleries I can find other people’s names listed as well.
    https://www.google.com/search?q=site%3Abeeminder.com%20gallery

    This isn’t me but here’s an example that I could find in Internet Archive for comparison:
    https://www.beeminder.com/nepomuk
    https://web.archive.org/web/20150402092734/https://www.beeminder.com/nepomuk
    The user’s name is now printed below the username.

  • http://andybrett.com Andy Brett

    Thanks for the clarification, I thought you were referring to goals. That’s a great point that it’s not explicitly clear in the “name” field that it might appear anywhere publicly, so definitely best to assume that people assumed it would be private.

    This is fixed now – let us know if you still see it or have other feedback!

  • http://beeminder.com Daniel Reeves

    Thanks! That’s on our list. It’s been a problem for a long time but I see what you mean that it’s more misleading in the new interface.

  • Luis

    Thank you!

  • Christopher Allen

    Two things:

    – I *liked it* that Beeminder looked like it was made “by kernel hackers and accountants”. I sincerely hope someone puts together a userscript to make it look and act like it used to, the way folks have rolled back similar “improvements” to Reddit and Facebook.

    – Removing the auto-quit option means I will *definitely* not be creating any new goals, and indeed I will likely archive any existing goals that derail. For me, explicitly recommitting to a goal is important in principle (as well as because it forces me to think about whether the goal continues to be appropriate and a good use of my time and money). Pre-commitment is great but I’m not into meta-pre-commitment.

  • Christopher Allen

    I suggest that individual goal pages should default to the Stats tab, when accessed by URL or from the dashboard / gallery.

    The stuff on this tab used to be displayed by default anyway, and all the other tabs are “dangerous” in one way or another (i.e., it is relatively easy to do things that could reconfigure the goal or cause it to derail, possibly by accident).

  • http://andybrett.com Andy Brett

    Thanks for the feedback! Did you notice that once you click on a tab below the graph (Stats, for example) that tab is open by default when you reload the page?

  • Christopher Allen

    I did, but it still makes me nervous. I feel like I need to regularly check each of my goals to make sure I didn’t accidentally leave any of them on another tab.

  • Gretchen

    I’d appreciate a link to my archived goals on the Gallery page – it took me a while to find a link at all.

    Like many mobile-compatible pages these days, the actual goal page requires huge amounts of scrolling on my 17″ laptop to see a tiny amount of text (about 3.5 full screens to see all of the settings, for instance).

    In general, I feel like the interface has lots of “small, lightweight text enclosed in a large rectangle” elements, which I find hard to read. It looks too sparse if there’s not much text, and too cluttered if there is a lot of text. I think is because the white space to text balance is unusual, making it hard to “scan” the page.

    The “featured” page ends up looking terrible if any of the graph names are longer than the width of the graph image.

  • http://www.donovankeith.com dskeith

    I’d like to second this. The individual goal pages may be more aesthetically pleasing – but they’re far less function. I can’t see what’s on the page without a ton of scrolling which makes it more challenging to use as I don’t know which tab I should be on to find the setting I’m looking for.

  • http://www.donovankeith.com dskeith

    Okay, let me first say: I really appreciate how much thought and effort has gone into the redesign. It shows a lot of promise – but it’s not particularly user-friendly… yet.

    The Goal Settings page is a particularly bad example of this:

    ## Settings Tab

    – 1/3 of the horizontal space is lost to large text labels.
    – The spacing between each of the data entry fields means that barely anything fits on screen at the same time.
    – The labels for the fields have similar styling to the text in the pull-downs / entry fields. This means that it’s difficult to scan by heading/title.
    – The names for a lot of entry fields are in the same column as opposed to being on the left making it hard to find the field I’m looking for.
    – “Apply Goal Defaults” is pushing all of the data entry column far to the right, resulting in unsightly/unpleasant amounts of white space after shorter headings like “Data”
    – Section headings and title headings are in very different places which means instead of scanning the entire page Top to Bottom, I now have to go: Left for Heading, Right for field title, Down through the entry fields, End of group down to next group – now I’m looking at something without knowing the heading. Repeat all previous steps. So my eyes have to make 5 movements for every section, instead of staying in one place while I scroll.
    – It would be nice to get some icons near the various large headings so that I can at least use those to scan for the important bits without needing to read all of the similar-looking text.
    – Goal: https://thenounproject.com/search/?q=goal&i=630266
    – Deadline: https://thenounproject.com/search/?q=deadline&i=578441
    – Privacy: https://thenounproject.com/search/?q=share+private&i=8734
    – Data: https://thenounproject.com/search/?q=data+source&i=650338
    – Supporters: https://thenounproject.com/search/?q=supporter&i=584462
    – Defaults: https://thenounproject.com/search/?q=reset&i=415758
    – Convert to Custom / Upgrade: https://thenounproject.com/search/?q=upgrade&i=665971

    ## Data Page

    On this page there isn’t a clear hierarchy of importance – the styling of the different elements is all very similar making it difficult to know what to do.

    – Delete should be an “X” icon. https://thenounproject.com/search/?q=delete&i=581150
    – Update shouldn’t be visible until you’ve actually entered some text, and should probably be an icon as well. https://thenounproject.com/search/?q=save+chagnes&i=15360
    – The changing of the row color as I hover implies that the rows can be drag/dropped – this isn’t true. Better to use that on the proposed icons above.
    – Export Data icon: https://thenounproject.com/search/?q=export&i=546710
    – CSV Icon: https://thenounproject.com/term/csv-file/631630/
    – API Icon: https://thenounproject.com/search/?q=api&i=563319

    In summary, it seems like you guys have traded an efficient designed-by-a-programmer design for a new design that doesn’t actually make the software more approachable to beginners.

    If you want things to be better for beginners: Add icons/graphics. Add tool-tips. Make what’s important easy to access and highlight it. Make the less important things appear less important – but make them easy to find when you need them.

    I’m excited to see future revisions and improvements to this system.

  • Ron

    I’m not a fan, but I think it would be better with a few changes to the defaults. (Or maybe we can set our own defaults?) Until I saw this article, I didn’t know that I could still enter data on the Dashboard, because it wasn’t at all obvious that I had to click on the “greater than” signs to show the controls. Then on the goal page, I’d prefer Statistics as the default tab, or anything that doesn’t take up two-thirds of the page.

  • BenS

    Here are my reactions. I definitely had a painful experience transitioning and much of this was written during that. I’m a light / on and off user of beeminder for a few years, it’s really helped me out in the past and I’ve come back to it recently.

    Thoughts mostly in order as I explored the site
    1) Where is the dashboard?
    2) A dropdown menu? Are they going to be doing pointless minimalism where they hide all of the important stuff? Iis it two clicks to go where I want instead of 1 click? (Later — oh, I can go to the dashboard from clicking on my name. Allright. I’d rather have it be named dashboard.
    3) It’s very sharp! The giant hexagons of color stand out very brightly against the rest of the screen and are somewhat painful to look at. This could work if they were smaller?
    4) I saw your “cry uncle” in your email and forgot that this was the part where I could unsubscribe from the email list, I went to the account settings and though “ooh, this is pretty”
    Read blog post:
    Oh. I like academic things that are dense and full of numbers and have all of the options on same page. That’s why I liked Beeminder.
    5) At this point I was pretty upset and ready to ragequit. I felt like Beeminder was on my side in the “numbers and data and lots of options are good!” I looked at archiving my goals and saw that I have to go to a new page to do so. Maybe that is a good place to have an extra click. All of the boxes and text are needlessly huge. I have to scroll a lot. Ideally everything would fit on one page with little wasted space. This would look dense and intimidating, but I think this should be overcome with good tutorials, labels, and tooltips. It seems like something happened where user friendly meant “big”. As if for old people with sight problems.

    I liked being able to input data on the dashboard.
    6) Looking at the tabs. I think this might be an improvement. It seems much faster.

  • http://www.kongregate.com/accounts/player_03 player_03

    Try zooming out in your browser if you think everything is too big. Many browsers will remember your zoom settings on a per-site basis.

  • JayDugger

    I’ll use the new site until 2016-10-21, but only to test the UI. I’ll then send you my entire list of likes and dislikes. I want to ensure I’ve given the new UI a fair chance, and I want to avoid overreacting.

    Normally Beeminder could serve as a commitment method for even this very short-term goal, but not in this case where Beeminder itself goes up for judgement.

    Until then, let me point out two things.

    First, the redesign makes very poor use of white space at the left and right margins of the page (https://www.beeminder.com/USERNAME.) In a full-screen browser window nearly half of the rendered page gets wasted as empty white space. In fairness, these same empty spaces vanish if the browser window tiles across the screen. I use a tiling window manager and so those two layouts meet almost all cases for me.

    Second, I understand that a UI redesign might make a good business move. I’ll assume that the new design proves appealing to new users, and that it proves easier to maintain. If so, fine. Does a premium plan let me have the old UI back? If so, how much?

  • Alex

    Oh no… It is like a local market reshuffle for no good.

  • Gretchen

    If I zoom out on my browser so that the UI elements feel appropriately sized, I can’t read any of the tiny, tiny text.

  • Gretchen

    More feedback:
    1) On my (admittedly ancient) computer, all the old fonts still seem to load in first, then get replaced by the new ones. Possibly what I’m seeing is in fact my browser’s default font? Whatever it is, it’s easier to read and more pleasant to look at, so it’s extra-jarring when it poofs to the new angular-minimalist style.

    2) The “jobs” page doesn’t seem to have the new style. I seem to vaguely remember this happening with the last UI update too, so maybe it’s worth investigating what’s going on there? Also, it’s significantly out of date as it still mentions the Beekeeper program.

    3) The first screen of the FAQ page is basically unreadable between the new style (underlined links? really?) and the number of questions listed. Time for some groupings, maybe?

    4) The Terms page is also pretty much unreadable.

    5) The “reminders” page no longer explains why I can’t edit my Android settings.

    6) If I play with my road dial, I can make changes that *appear* to be saved (ie, stick around when I switch to a different tab on the goal page) but aren’t actually saved (because I haven’t clicked “update”). There’s no warning about unsaved changes when I leave the page.

    7) The premium plan page has different styling than everything else. (Blue text that’s not links? Ugh, please no.) Also, didn’t it previously include links to explanations of what the features actually are in the table itself? Scrolling to the very bottom of the page just to see what the features are doesn’t seem like a good way to make those features appealing.

    I can’t really overstate how viscerally I dislike the new UI. It’s nearly physically uncomfortable to look at, and I don’t find anything about it intuitive. It also pairs weirdly with the tone of the explanatory text. The text is very friendly and welcoming – it feels like a friend has poured you a cup of tea in their kitchen and is showing you this program they love. The new UI, by contrast, is hard-edged, minimalist, and a bit spiky. It feels more like a modern art museum.

    I got to see an intermediate stage where the dashboard existed but most of the UI was still the same, and I liked that much better.

  • DavidMHart

    I think I preferred the gallery format aesthetically, but I can see that the dashboard format is more useful. However, I have one of those ‘Do the one thing you gotta do today’ goals as described

    here, and it’s a bit annoying having to enter the data tab to be reminded what today’s one thing was. Is there any way to get the default page to show you the last few data+comment entries like the old format did?

    Also, while I’m on here, is there any way to set up the iphone version of the app to give you notifications on the same zeno polling basis as the email bot? I know that I have derailed far more often from forgetting to enter my data after I’ve done the thing than I have from failing to do the thing at all, – a realistic risk if I’m doing the thing away from my computer – and the phone app by default isn’t very good at ramping up the urgency.

  • http://beeminder.com Daniel Reeves

    Good questions and feedback! Quick responses:

    1. There’s a link to the gallery in the Account menu.
    2. Mustdo goals are super great!
    3. Did you notice you can expand the goals in the dashboard? Actually I guess expanded or not the dashboard shows the last datapoint.
    4. From the goal page you can use Advanced data entry and see previous datapoints. That’s a little ugly at the moment though.
    5. The iPhone app should follow the same zeno schedule. Did this suddenly stop for you when we launched the new design? That would be a super serious bug!
    6. Did you know if you derail from forgetting to enter data we consider that a technicality and undo the derailment?

  • DavidMHart

    3. Dang, you’re right, my brain must have failed to register the fact because the amount of comment that gets shown is small relative the amount that used to appear in the gallery (typically enough for me to describe the One Thing for tomorrow). There’d be room in the current dashboard for two lines of commentary without the whole goal taking up extra space, which would be neat, but not disastrous if it’s hard to change.
    5. I think maybe the iPhone app used to give me zeno polling when I first started using Beeminder? But it hasn’t in quite a while. Not sure when it stopped, or I’d have raised the question at the the time I noticed.
    6. Well, that’s good to know, but I’ll not make an issue of it until I get iPhone zeno polling up and running, otherwise I’ll be making a lot of extra work for you guys :-)

  • Ernest Miller

    Major improvement visually. It actually feels like a consumer product rather than something for engineers. Seeing the complaints, I can’t help but wonder if part of the appeal of old-beeminder was it’s inaccessibility. For those people, this must be like seeing their favorite indie-band drop a catchy pop album or something.

  • Dylan Thurston

    One concrete thing I strongly dislike about the new dashboard view: Can we turn off the “seconds” part of the time until you derail? Any view with seconds ticking off automatically induces some stress and distraction when I look at it. (I looked a little for a setting to disable it, and didn’t find it quickly. But I also really think seconds should be off by default, unless maybe you get down to less than an hour or two.)

  • http://beeminder.com Daniel Reeves

    Oh, yes, just click on them to toggle to absolute deadline time instead of countdown! (Funny, someone in the forum was frustrated at first by the lack of the very prominent countdowns. Redesigns sure are hard! :))

  • http://beeminder.com Daniel Reeves

    Ha! We’re as nerdy as ever, we promise, and very keen to end up at the best of both worlds. :)

  • Dylan Thurston

    That helps (although it’s not at all obvious that that’s a place you can click), but what I’d really rather have is a display of the countdown, but just not constantly updating like that.