How we’re designing Hellotime for simplicity and speed
Matteo Montolli · Jul 02, 2024
![How we’re designing Hellotime for simplicity and speed](/_next/image?url=%2Fblog%2Fhow-we-are-designing-hellotime%2Fcover.png&w=1200&q=100)
New products can still thrive in crowded markets, as demonstrated by companies such as Linear, Loom, and Superhuman. How do they achieve this? Often, it’s due to exceptional design tailored to a specific niche. Here’s the story behind our approach at Hellotime, where simplicity and speed are our guiding principles.
If you ask a class of students what the best way to add value to a tool is, most of them will suggest one strategy: provide more information and options to the user. Ask the same question to an experienced manager, and you’ll get quite the opposite answer.
It seems intuitive to add value through an interface by piling on features, options, and details. Many platforms do exactly this, cluttering their interfaces with overloaded modal windows full of information. Over time, your sleek dashboard starts to resemble an airplane cockpit: full of options, designed for professionals, but extremely intimidating.
This is precisely what disappointed us in our quest for a user-friendly solution to schedule projects at our studio . Every platform we tested required complicated, time-consuming workflows to function effectively, making us very opinionated about how a resource planning platform should work.
Simplicity is about subtracting the obvious and adding the meaningful.
John Maeda
What the seasoned designer knows is that while providing more information is supposed to be helpful, it often isn’t—at least not for everyone. It contradicts the “don’t make me think” principle we hold dear. We believe that when you’re planning, the tool you choose should work for you, displaying only relevant contextual information so you can focus on your tasks, not on navigating the tool itself.
At Hellotime, we really enjoy the challenge of designing for simplicity and beauty. However, achieving this level of simplicity is harder than it seems.
Let me guide you through our quest to make Hellotime fast and simple.
A Single Page Application, literally
In Hellotime, everything happens on the timeline. Yeah, we’ve really embraced the whole Single Page Application (SPA) concept! There are no pages; subordinate views and actions always occur in overlaid modal windows. We intentionally designed it this way because no one wants to learn another tool. Damn the onboarding tutorial, I’m not going to RTFD—I have my business and my job to take care of.
When you set up a workspace on Hellotime, you get a timeline calendar that feels as simple as a spreadsheet but hides the powerful features of custom-made software. You can start adding people and projects right away with simple actions.
Why is this important?
- No upfront learning required: People can start using Hellotime right away without spending time learning a new tool.
- Less cognitive work: You can perform tasks without dealing with complex actions and pages, reducing mental effort.
- More time for real work: Being fast at using an app means you don’t waste time on it and can get back to doing your stuff.
Re-inventing the toolbar
Our toolbar embodies our design philosophy: it’s simple, hierarchical, and contextual. It appears above the project block you’re creating, displaying only the essential information you need at that moment—no more than that.
![Re-inventing the toolbar](/_next/image?url=%2Fblog%2Fhow-we-are-designing-hellotime%2Fcover-lines.png&w=3840&q=100)
Unlike other tools that require navigation through complex panels, Hellotime simplifies the process by presenting only relevant options, enhancing execution speed.
We worked hard to hone the subtle art of microinteractions in Hellotime. Your next action is one click away. For example, hovering over the bottom of a block reveals dashed lines, allowing you to split it with a single click. There’s no need for complex tools or processes; actions appear contextually when relevant.
Creating a block
When creating an allocation, a dashed line appears. Click it, and you see the date, which follows and adapts to your movement as you extend or shrink the block. Release it, and the toolbar appears. Enter a number, press Return, and it’s done. One click, a keyboard input, and Return. The required operations are minimal, thanks to a combination of microinteractions that add an extra layer of delight to the overall user experience.
Playing with blocks
When you’re dragging an assignment, the date appears clearly and contextually, showing where you’re moving it. There are no detailed modal windows for entering details; just drag a block and extend or shrink it with the side handle.
Making the best out of a tight spot
Need to split a block? Hover bottom, and dashed lines appear, allowing you to divide the block with one click. There’s no “Cut” tool to select, no complex processes. This is why our contextual toolbar is so simple: relevant information appears while you’re performing an action where that information makes sense.
By simplifying interactions, cognitive overhead is significantly reduced, and the learning curve for Hellotime is almost negligible; you don’t need to learn any specific processes. This accessibility is crucial, allowing everyone on the team to manage schedules effortlessly. That’s why our users say they can set up their Hellotime workspaces in under 30 minutes.
Adding a touch of magic with shortcuts
In today’s cutting-edge digital products, power users expect to interact with an application using keyboard shortcuts for improved speed. That’s why we included keyboard shortcuts in Hellotime from day one.
Why is this important?
- Faster interaction: Keyboard shortcuts allow you to perform actions more quickly than using a mouse, significantly speeding up your workflow. This efficiency is crucial when managing multiple projects and activities, as it lets you focus more on your work and less on navigating the tool.
- Habit: For power users, keyboard shortcuts are a natural part of their workflow. By integrating these shortcuts from day one, Hellotime ensures that these users can adopt the tool seamlessly, without having to adjust their habits or learn new, cumbersome processes. This familiarity helps in maintaining productivity and reducing the learning curve.
Making complex things look simple
Simplifying Key Indicators: Capacity, Utilization, and more
Visual choices are crucial for the economy of information we share. A tool that helps manage resources has the power to show precious information about how your business is doing in terms of workload distribution.
That’s why we designed the Insights pane with simplicity in mind. We chose visualizations that instantly convey the team’s workload trends, emphasizing useful metrics without unnecessary complexity. We believe in straightforward language, avoiding complex charts and lines. We’re against the idea that professional tools should be distinguished by the abundance of metrics they show to planners. Instead, they should display useful ones without unnecessary effort, because professionals don’t have time to waste.
Bringing Gestalt back in style
In Hellotime, we introduce the concept of project status. A project can be unconfirmed, to-do, in progress, or completed. In the Projects View, this information is crystal clear thanks to the horizontal division of the timeline into status lanes.
![Designing Hellotime projects](/_next/image?url=%2Fblog%2Fhow-we-are-designing-hellotime%2Fprojects.png&w=3840&q=100)
In People View, where project status is less visible, we wanted to make it immediately clear which projects were unconfirmed. So, we styled the blocks of work for unconfirmed projects with a dashed outline, as opposed to the solid line of all other statuses.
We also decided to hide completed projects in the Projects View. You are not supposed to see completed projects unless you really need to, as we will explain later when discussing Automations. This way, the timeline is always clean and stripped to the essentials to reduce cognitive load.
Getting Hellotime to work for you, not the other way around
Our less-is-more philosophy extends to repetitive tasks. That’s why we introduced Automations, which can now auto-update project status and auto-hide projects in People View. The first feature automatically moves completed projects with no active allocation to a “completed” status. The second hides projects a few weeks after they've been completed, keeping your timeline clean.
These automations reduce friction and keep your workspace focused on active projects. By simplifying processes, Hellotime enhances productivity without users even realizing it. We usually don’t tell – we’re all-in for if-you-know-you-know details in design. But when you know, you feel you're using the right platform for your needs.
The way forward
Some might say that being simple is easy once you start, but it gets harder over time. We understand this challenge, and that’s why we’re committed to maintaining simplicity throughout our development process. We continually refine our approach, ensuring that each feature we add does not compromise the overall user experience. By focusing on clarity and usability, we aim to keep our solutions straightforward and effective, no matter how much we grow.
About the author
I’m Matteo Montolli, design director at Hellotime and Moze. I like good craft, moving pixels around, and gin tonic. Follow me on LinkedIn and on this blog for more thoughts about good design.