balladic, redesigned
A calmer app, one command bar for everything, and motion that shows where your work goes.
balladic, redesigned
Balladic has a new design. It changes every screen in the app, on the web, on the desktop and on the phone. It also changes this website.
Every screen is quieter now, and everything in the app moves the same way. Balladic shows you less at first, and more when you ask for it. This post shows the most important changes.
why we changed it
Balladic exists so that work can move between people without loss. Over time, the app collected panels, buttons and pages. Each one had a good reason. Together, they put the tool between you and your work.
Our first draft of the redesign made this worse. It added a sidebar, tables and toolbars, and it looked like every other project tool. We discarded it. Then we did the opposite: we removed parts until each screen showed only what you need now. The rest is one click or one keystroke away.
the command bar
The command bar is a single field at the bottom of every screen. It finds, opens and starts things. Press ⌘K, or Ctrl K on Windows and Linux, to use it from anywhere.
Before you type, it shows your recent tasks and the things you can start: a task, a ballad or a chat. When you type, it searches all your ballads. In a ballad, the first result adds what you typed as a new task. Press Enter, and the bar opens into a full task sheet. There you can set the column, deadline, priority and tags, write a description and add files. Press Enter again, and the task is on the board.
If you click away from a task that you started, the draft stays in the bar until you return. On a task page, the bar becomes the reply field for the conversation.
the now page
Now is the first page you see. It replaces the old dashboard.
At the top, Balladic writes a short overview of recent activity in your ballads. Use the arrows to read earlier overviews. Below it, each ballad is a card. The ring shows progress, and one line tells you what needs attention. Then come the tasks that you opened recently, so you can continue where you stopped. At the bottom is the activity in your ballads, in groups. You can dismiss or snooze each item, and undo each action.
the board
The board shows what fits on your screen and folds the rest. Each column shows as many cards as your first screen can hold. Finished work goes into a stack at the end of the column. When you scroll past a folded column, it unfolds.
When a card changes column, it travels to its new position. It does not disappear in one place and appear in another. Try the fold in the figure above, or watch the first card start.
Filters are now a lens. Choose people, states, priorities or tags, and the board narrows to match. You can save a lens as a view and return to it later. Column rules, which move tasks and set their state for you, open in a pane next to the board. To change the order of the columns, drag a column by its header. Each column can also have its own icon.
flow
Flow is for work where one step leads to the next. Now a line connects the steps. As each step is completed, the line fills with the color of the ballad.
The current step opens as a focus card, with its details in view. Select another step to move the focus there. You can add new steps in place, at the point where you are, and containers of steps open inline.
-
Type, colour and the hero image, built on the chosen wireframe.
the task page
Task fields are now small pills. Click a pill to change its value in place. There is a new augment, checklist, for tasks that have many small parts. You can also add files to a task after you create it.
motion
Balladic is about work in motion: tasks move between people, columns and states. The interface should show that motion, not hide it. When something changes, you should see where it came from and where it went.
Before this update, each part of the app had its own timing. Some transitions were slow, some were harsh, and some elements appeared with no transition at all. Now every animation in the app and on this website uses one curve and three durations. The curve starts slowly, moves quickly in the middle and stops softly. Because of this, the whole app moves as one material.
We also changed many small details:
- Cards travel between columns in one continuous motion.
- Loading placeholders wait 300 ms before they show. A fast load shows no placeholder at all.
- Icons change color at the same time as their buttons.
- Focus rings fade in. They do not appear at once.
- A new comment arrives complete, with its avatar.
how we test motion
This part is more technical.
Motion breaks quietly. A change in one component can make a different component jump, and normal tests do not see it. Thus we built a test that records the screen and examines every frame.
The test runs an action, for example “drag a card to another column”, and records each frame. It divides each frame into small tiles. If more than 70% of the change in a tile occurs in one frame, the test reports a snap. A correct fade on our curve changes at most 35% in one frame, so it passes.
The test also records the position, opacity and color of each element in each frame. This finds elements that jump, elements that appear or disappear with no transition, and colors that change at different times. The actions also run with a slow processor and with network delay. Many run at phone size too, and in WebKit, the engine of Safari.
A test like this is only useful if it can find problems. We check that in two ways. First, we keep a set of small test pages with known motion. The test must pass the 11 pages with good motion and must find the defect in each of the 13 pages with bad motion. Second, we run the full app with every animation at 1000 times normal speed. At that speed, all motion is instant, so every scenario must fail. If a scenario still passes, it does not examine anything that moves, and we correct it.
The redesign took 242 commits and changed 732 files. We added 46,505 lines of code and removed 40,127.
what comes next
The motion test does not yet cover augment fields, toasts, the feed, onboarding or touch drag on the phone. We will add them next.
Open Balladic and try the command bar. If something does not move the way you expect, tell us.