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.
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.
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.
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.
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.