Kasper Marx Andersen

Butter – Before, during and after a session

How I designed Butter's tools for planning a session, running it and looking back on it, including two of its first AI features.

Company
Butter
Role
Product Design Lead
Team
Leading two other designers, working closely with the founders Jakob Knutzen (CEO), Christopher Holm-Hansen (CPO) and Adam Wan (CTO), alongside about 10 engineers
Timeline
2021–2024
Outcome
The Agenda planner became Butter's way of preparing and running a good session, and Session Recaps became how facilitators gathered feedback on their sessions.
With the panel closed, the agenda shrinks to a bar at the top with the current block and the time left.

Butter is a tool for running collaborative sessions like workshops and trainings, on mobile, the desktop app and in the browser. A good meeting or workshop takes work before, during and after the call. You plan it, keep people focused while it runs and follow up once it's over. Most video tools only cover the middle part.

As Product Design Lead, I led the design of two of Butter's biggest features, the Agenda planner and Session Recaps, and worked on the overall experience and the brand. The idea that tied them together was that every meeting should make the next one easier to plan. The agenda you plan is the one that runs the call, and the recap is laid out by the same blocks, so a facilitator can see which parts worked and bring that into the next agenda. Both features also include some of the first AI features I designed, an AI agenda generator and AI summaries of a session.

01Before: planning the session

Every good meeting starts with a clear agenda. The first version of the Agenda planner was a written list with times, which helped you plan the meeting but did nothing once it started. So we turned it into blocks. Each block has a duration, a title and a short description, and it can also hold the tools it needs, like a poll, a timer, breakouts or a Miro board. When a block starts during the call, its tools open automatically, so the facilitator doesn't have to go looking for them.

The length of each block sits large on the left, so you can see at a glance where the time goes, and an outline next to the list shows the whole workshop as a timeline.

Writing an agenda from scratch takes time, so I also designed an AI agenda generator. You set how long the meeting is, describe it in a few lines, and the AI turns that into a full agenda you can keep shaping in the planner. Agendas that work well can be saved as templates, so a team's town hall or kickoff can start from something that has worked before.

The Agenda planner. Each block has a length, a title and a description, with an outline of the whole workshop on the right.
The Agenda planner. Each block has a length, a title and a description, with an outline of the whole workshop on the right.
Planning a session starts from the home screen, next to the meetings coming up in your calendar.
Planning a session starts from the home screen, next to the meetings coming up in your calendar.
The AI agenda generator: set the length, describe the meeting and get a full agenda back.
The AI agenda generator: set the length, describe the meeting and get a full agenda back.
Each block holds the tools it needs, from polls and timers to Miro boards and Google Docs.
Each block holds the tools it needs, from polls and timers to Miro boards and Google Docs.

02During: running the session

During the call, the agenda runs the meeting. The current block shows a timer and its progress, the next one waits below, and facilitators control what participants see, which keeps everyone on the same thing instead of clicking around.

Keeping time is a big part of running a good session, and it shouldn't only be the facilitator's job. When the agenda panel is closed, it shrinks into a small bar at the top of the call with the current block and the time left, so everyone in the call can see how the time is being spent. Facilitators can also keep the full agenda open in the sidebar, with private notes on each block, a bit like presentation notes.

During the call, the agenda runs the meeting. The current block shows its timer and progress, and the next blocks wait below.
During the call, the agenda runs the meeting. The current block shows its timer and progress, and the next blocks wait below.
With the panel closed, the agenda shrinks to a bar at the top with the current block and the time left.
With the panel closed, the agenda shrinks to a bar at the top with the current block and the time left.
The tools for a block open right in the call, like a Miro board during a workshop.
The tools for a block open right in the call, like a Miro board during a workshop.

03After: looking back

The first version of Session Recaps was mainly the recording of the session, with a summary. Many users wanted to record their sessions for people who couldn't join, but we learned that few people actually want to watch a whole recording afterwards. So we redesigned the recap around a text summary and a timeline with clips, so you can read what happened and watch only the parts that matter. The AI summary covers what the meeting set out to do, what happened and the action items, and the facilitator can edit it before sharing the recap with a single link.

Engagement was one of Butter's biggest selling points, and we believed a well-structured session leads to good engagement. We also knew that sessions where a few people do most of the talking get less engagement and make for worse workshops and meetings. So I added an engagement tab to the recap that shows facilitators how their session went, with feedback from participants, how many had their video on, and a talk time chart of who spoke when and how much, laid over the agenda blocks. That way you can see whether a discussion block really was a discussion.

A Session Recap: the recording on one side and the AI summary of the meeting on the other.
A Session Recap: the recording on one side and the AI summary of the meeting on the other.
The rating participants gave, how many had their video on and how good their connection was.
The rating participants gave, how many had their video on and how good their connection was.
Talk time, laid over the agenda blocks, shows who spoke when.
Talk time, laid over the agenda blocks, shows who spoke when.

04Better with every meeting

The three parts pay off most when they work together, though some people mostly used parts of it. After a workshop, a facilitator can see which blocks got people talking and where it went quiet, and bring that straight into the next agenda or save it as a template for the next team. The agenda generator gives you a good first plan, and the recap makes sure what you learned doesn't get lost.

Next case

Miro – Board generationBoard generation is the Miro AI feature that turns one sentence into a full board.