Beeminder Design and UI

Hey everyone - very cool contributions in the forum. Beeminder is a wonderful idea. Is there a reason why the UI is so bad? Does anyone else feel this way? Surprised I haven’t seen this opinion more - is it just me? I wonder what we as a community can do to help? I feel like contributing to a simple designer could improve the front-end so much. Would be happy to pay more for this. I also think the popularity of Beeminder would skyrocket. I have recommended it to a few friends who told me they don’t like the look or feel of it.

Interested in everyone’s thoughts?

Genus

3 Likes

Are you talking about the web UI?
If yes, I partly feel the same. To be clear, I don’t think the UI is bad, I just think some parts look a bit neglected, and that there are some easy gains to make. Now I don’t know how much a regular user / potential customer will notice that, I can only say I definitely notice it. I already sent some screenshots to the very friendly support team, and they told me they added them to their issue tracker!
If you feel like it’s a good idea and if the mods think it’s okay, we could also turn this into a thread to collect visual bugs / improvement suggestions.

3 Likes

Yes. Fantastic idea. This would really be a constructive way to move the project forward. Keen to hear what others think as well.

2 Likes

Okay, I will just start with what I wrote already to the support approx. 2 weeks ago. Basically, these are all minor things, no suggestions to completely change the design, but stuff from the current designs that stings into my eyes (pun intended :slight_smile:). I also have design suggestions, but these are more subjective, so I just stick to the more objective issues for now.

Warning, lots of screenshots incoming.


The footer doesnt sit at the bottom if the page’s content doesn’t fill the viewport.

OMa7QEtWsVjeBMs1

The Avatar is not centered and sits very close to the user name menu item.
Here is how it could look instead (right margin of “Fronol” increased, icon centered):

JKNIUQGkXy23eLgx

PKahPiIt6KHvR0DD

If the unit is not filled out, the number should not float at the top.
Also, it would be nice to be able to select Per Week, and then have the system calculate the daily amount. I should not have to input some decimal or fractional number if I want to express “2 runs a week”.
Also, the plus icon is not centered inside the button.

This sits directly under the menu bar. I think there should be some distance.
The green icon is not vertically centered.
More padding and a bigger checkmark icon would look nicer:

The footer menu’s items space out very far on a big screen.

They should have a maximum distance:

I think the featured beeminders could use some helping text. When I visited that page, I was asking myself how they are chosen and how often they change.
On a larger screen, the graphs are missing the space in-between, which doesn’t look as nice anymore, also, there is no distance from the graph to the border of the grey area:

The reminders card looks a bit messy. The columns could be aligned so that corresponding inputs/checkboxes are underneath each other:

Not perfectly aligned yet but you get the idea.


To add some more stuff:
I think the footer should be much smaller. I think the “Help Docs” should be in the same row.

On the landing page, this grey background has a weird inlay border at the top of the page, but not on the bottom. If you scroll down the page until the next grey area, the border is missing (which looks much better):

The video should have the same distance on the right and on the bottom:

Maybe some card design could be an idea: I just played around in the browser a bit, made the content a bit slimmer, changed some backgrounds, borders and margins/paddings:
Before:

After:

Not sure though about that…

I can post more stuff, but now it’s dinner time here :).

Best,
Tom

4 Likes

I can’t believe I never noticed that footer issue! Usually it’s the other way round, that I’ve stopped noticing those minor design issues. I’m sure they add up for new(er) users though and might result in a bad first impression. For many of us, though, this design is still the New Design ;-).

You might be right that the units should only appear once here. I don’t think the issue is that the number “floats” when the unit gets deleted; otherwise the number would have to “jump”?
image

It always surprised me that nobody chimed in on Inconsistent tab-navigation on dashboard. It was only recently added to the issue tracker, so it’s definitely still on the radar.

2 Likes

Oh, I didn’t know there was an issue tracker. Could you share a link? :slight_smile:

I think the number should sit in the middle when there is no unit, and when there is a unit, it can sit at the top as it is now. I wouldn’t see “jumping” as a problem, it could look nice with a fitting CSS transition.

If I look at the changelog (https://changelog.beeminder.com/), I see they are pretty active on stuff like documentation, bugfixing and integrations. That’s great, but I cannot help but feel that improving the visuals of the site would have a pretty high ROI right now. After all, this is what every potential customer sees. And even though I can imagine that the audience of this product is a bit on the geekier side, which might value a rich functionality over a flashy UI, I still think that some basic level of UI polished-ness would certainly make people love this product even more :-). And FWIW, I just looked it up in the Wayback machine, the footer has been broken for more than two years! Sorry to any devs/mods that might read this and think that sounds harsh, I think the software is a great idea and just want to help make it better!

Best,
Tom

2 Likes

It was my main thing when I started with beeminder. Consider alternative UIs:

and other tricks:

I have more or less automated data entry or I use iOS Shortcuts to enter data. I read beeminder stats with a widget. I don’t use native UI much.

1 Like

When reporting UI weirdnessess, don’t forget to specify what browser and operating system you’re using.

For instance, on my beeminding browser (MacOS Ventura, Edge) the footer seems to always be flush with the bottom edge of the browser window. Conversely, the canonical sort order doesn’t automatically happen when I load the dashboard, but does in most other browsers.

2 Likes