How I designed my app
During the lockdown I was feeling guilty about how I was spending my newfound free time, so being a masochist I decided to build a time tracking app called Jupito that would let me see exactly how much time I was wasting. It’s basically a stripped-down version of Toggl and Clockify. You can try it out at app.jupito.io.
Since I was building this for myself, I had a clear idea of the “customer persona” I was building for: me. I wanted to build a time tracking app that was Simple and Fun. Here’s how I tried to do that.
I decided to give Jupito a space theme.
I injected the theme throughout Jupito to give it more personality. “Personality” isn’t always a good thing. You wouldn’t want to pitch a product to an accountant or a lawyer by saying that it has a lot of “personality”. They would probably find that offensive.
This is almost understandable, because the last well-known example of software guys injecting personality into a product was Clippy.
The great thing about Jupito is that I didn’t have to worry about any of that. I could happily build the Clippy of time tracking apps and no one would be able to stop me.
For example, here’s Jupito’s 404 page (I found the illustration here):
Here’s the recover-password page:
I think small quirks like this go a long way in making super unsexy concepts like time tracking slightly less boring. They aren’t “jokes” - they aren’t funny in the conventional laugh-out-loud sense. But they inject tiny bits of life into your boring time tracking app.
Some of my favourite examples of products that do a great job of this include Glitch, Discord and early Slack.
I went with a bright color palette. I chose a blue/yellow pairing for the primary and accent colors. The green and red are primarily for the start/stop buttons.
I’m fond of the blue/yellow color pairing. It reminds me of the phase Hollywood went through in the late 00’s and early ’10s when every movie was put through a blue/yellow filter.
Jupito uses Gilroy as its font. It’s a modern, playful font that fits Jupito well. I’d describe its soft, rounded appearance as non-intimidating, which is exactly what I wanted for an app that I’d use to time my every action.
I experimented with several sans serif fonts, but Gilroy has a bit of extra personality that makes it interesting to look at without being Comic Sans level of obnoxious.
I don’t know much about logo design. To minimise the chances of me producing something offensively bad due to having poor taste, I went with a simple shape — specifically, a circle, because circles are the simplest, least-line-having of all shapes. It works on at least one level because planets are also circle shaped.
I booted up Figma, created a circle, and added some text next to it. Easy.
I opted for minimal lines for a cleaner and simpler look.
This presented some problems. For example, every single time tracking app in existence (as far as I can tell) uses tables to display time entries, with items separated by lines. Here’s Clockify, for example:
There’s a good reason for this. Lines are really good at establishing separation visually. In 99.9% of use cases, the Clockify approach makes sense.
On the other hand, I was designing for the very specific use case of myself. My preference was for a UI that didn’t make me feel like I was looking at a spreadsheet.
I decided that it was possible to get rid of lines by turning each row into its own freestanding component. I bulked up the white space and added a margin between each time entry.
The drawback of my approach is that there is much less information density. On balance, this was a tradeoff that I was okay with making. The increased white space makes scanning time entries easier, which helps offset the decreased information density.
Eliminating lines entirely wasn’t always possible. The library I used for the bar charts (Chart.js) defaulted to dark horizontal and vertical lines against both axes. This was inconsistent with the styling in the rest of the app — but removing the lines entirely made it hard to see what was going on and made for poor UX.
I compromised by keeping the horizontal axis line and changing it to a lighter grey. The vertical lines weren’t particularly helpful in terms of improving readability, so I got rid of them altogether, which seemed to get the job done.
Sticky input header
Time tracking apps generally have the time-input at the top of the page. Sometimes they’re sticky (i.e. they remain stuck to the top of the page even when scrolling down the page), and sometimes they’re not. Toggl is in the former camp, and Clockify is in the latter.
I decided that I wanted Jupito to have a sticky time-input component. This was partially influenced by my decision to increase white space and margins in the time-entries, which meant that users would have to do more scrolling to get back to the top of the page. The implementation was technically straightforward: I gave the time-entries container an
overflow-y: scroll CSS property.
This looked weird. The lack of lines meant that the white body of the time-input bled into the white body of the time-entries with no clear sense of hierarchy. It needed to be clearer that the input was “on top” of the time entries, so I gave the time-input component a box-shadow:
0 4px 6px 0 hsla(0, 0%, 0%, 0.2). I followed the advice of this great Refactoring UI blog post and gave the box-shadow a slight offset to simulate a light source shining down from above. This, combined with the subtle grey color and blur, gave the time-input component a naturalistic appearance.
I still wasn’t fully on board with this. The natural shadow did a better job of communicating visual hierarchy, but it didn’t fit with the out-of-this-world, slightly artificial feel of the rest of the UI. I changed the box-shadow property to
4px 8px 20px 0 rgba(87, 126, 244, 0.32). It’s similar to the previous shadow in principle, but with a more exaggerated offset, blur, and in the primary blue color rather than a naturalistic grey.
I’ve had a lot of fun building Jupito - hopefully you’ve found my process so far at least a little bit interesting, too.
If you’re interested in following Jupito’s development, you can see its roadmap here.
Thanks for reading 🎉