Two days to thirty minutes

One change, twenty copies, two days

Building a program was manageable. Changing one after teams had started was not.

Strategyzer runs strategy programs for large companies. A small team of program designers builds each one from playbooks, which mix learning content, exercises and shared workspaces where teams do the work. A single program can have 10 to 20 client teams working through it at once.

Every program has four layers, and the moment a cohort delivery was created, they stopped talking to each other.

Programs change while they’re live. An exercise doesn’t land, a presentation gets reworked overnight, or a client asks for something new on day two. So a coach’s two-minute decision turned into four jobs:

1. Update the template, so it stays clean for the next client.
2. Edit the cohort delivery’s settings by hand, in code, because the admin couldn’t see anything added after the delivery was created.
3. Repeat that edit for every team, all 10, 15 or 20 of them.
4. Open every team’s workspaces to hunt for broken links.

“If there’s a 12-team cohort and there’s changes, it ends up being 2 to 3 days sometimes.”

Kurt Bostelaar, Program Designer

What watching the work revealed

The workarounds nobody mentioned

I didn’t ask people what they wanted. I asked the program designers who ran deliveries most often, especially Kurt and Latif, to share their screens and walk me through a real program from start to finish. At every step I asked what it was for, and why it happened there. I also spoke with Dora in customer success, who heard clients’ complaints first, and with Alex, our CEO, who runs live deliveries with clients.

“I literally sometimes spend 2 to 3 days just copying stuff around.”

Kurt Bostelaar, Program Designer

Watching the work showed habits so routine that nobody thought to mention them:

Many symptoms, four causes

Together, this made a process only experts could run, while the business wanted coaches, partners and eventually clients to run programs themselves.

One idea to hold it together

The platform didn’t need more controls. It needed one simple rule that people could understand at a glance:

The program template is the single source of truth, and every cohort delivery chooses what to take from it.

Four principles followed from that:

Choosing what not to build

With one engineer and three months, I ranked every opportunity by three questions: How often does it happen? Would a failure be visible to clients? Can we build it well in the time we have? Changing live programs came out on top on all three. The opportunity solution tree below shows how it all fits together.

The opportunity solution treeFrom the outcome we wanted, to the opportunities, to possible solutions. It’s in two parts: switch between them with the tabs.

Changing live programs Finding your way

Four features, one model

Each feature puts one of the principles into the product. Together they work as one job: send the workspaces, bring the updated timeline into the cohort delivery, then choose when teams see it. Kurt called the result “a MASSIVE game changer”.

1. Template updates, reviewed and applied

PrincipleStay in control

The heart of the redesign. It reconnects the template and the cohort delivery, ends the double work and takes code out of the job.

1Before

Pause

1. 1It started in the template. To carry an update into a cohort delivery, the program designer opened the program template and switched on Show JSON Editor, a view made for engineers.0:01
2. 2Code, not a page. The whole program, every week and every event, opened as one long block of JSON.0:02
3. 3Found by scrolling. There was no search or outline. Finding the right event meant scrolling through hundreds of lines.0:04
4. 4Copied by hand. Program designers aren’t coders, yet they had to drag to select the code and paste it into the cohort delivery’s own JSON. One stray comma or missing bracket and the whole timeline broke.0:14
5. 5Linked by exact name. Each event found its workspace by exact name (the matchBy line), so one stray space sent a team to a dead end.0:22

2After

Pause

1. 1The update comes to you. A notice on the page says the template has changed, without blocking the work.0:02
2. 2Each change listed on its own. Review changes shows every update separately, so nothing arrives as one big lump.0:07
3. 3See it before you take it. Expanding an update shows exactly what’s new, down to the workspace and its activities.0:12
4. 4You choose what to apply. Only the updates you select are applied. Nothing is forced onto a live delivery.0:19
5. 5Clear confirmation. A message confirms the delivery has been updated.0:22

3The designsClick a tab to see each screen and the decisions behind it

Update noticeReviewUpdate detailsApplied

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1A notice, not an interruption. The update appears as a quiet banner above the work, not a pop-up that blocks it.
2. 2One clear next step. Review Changes is the only action, so it’s obvious what to do.
3. 3The delivery keeps running. The timeline stays fully editable while the update waits. Nothing changes until someone reviews it.

1234

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Each change on its own. Updates are listed separately, so program designers can take some and leave others.
2. 2Named in plain words. Each update says what changed and where, like “New workspace added to Week One”.
3. 3Take everything at once. Select all is there when every update is wanted.
4. 4Nothing applies by default. Apply Selected starts at zero and counts up, so nothing lands on a live delivery by accident.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1The open update stands out. The expanded row is highlighted, so it’s clear which change you’re looking at.
2. 2What’s new, in a sentence. A short summary explains the change before anyone decides.
3. 3The details that matter. The new workspace shows its name and what’s inside it: 4 activities and 2 exercises.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Clear confirmation. A message confirms the delivery was updated, and can be dismissed.
2. 2The notice clears. Once applied, the update banner disappears, so there’s nothing left to review.
3. 3Straight back to work. The timeline is ready to use, with no reload and no code to check.

2. Copy workspaces to many team projects at once

PrincipleChange it once

1Before

12345

⤢ Full size

Hover a problem to see it in the designTap a problem to see it in the design

1. 1The browser’s menu, not ours. The picker used the operating system’s default dropdown, with none of our design system, so it looked and behaved unlike the rest of the product.
2. 2No search. There was no way to type a name. The only way to find a project was to scroll for it.
3. 3Scroll, scroll, scroll. Every project in the account sat in one long list. With hundreds of projects, finding the right one could take ages.
4. 4Grouped by owner, not by need. Projects were sorted by who manages them, so you had to know where a team’s project lived before you could find it.
5. 5One project at a time. Only one destination could be picked, so the same workspace had to be copied again for every team.

2After

Pause

1. 1Pick as many as you need. Each workspace card has a checkbox, so you can select several at once.0:01
2. 2Actions follow the selection. A bar shows how many workspaces are selected and what you can do with them: copy, move or delete.0:02
3. 3Your selection carries over. Copy opens with the chosen workspaces already filled in.0:07
4. 4Search, then pick many. Find team projects by name and tick every one that needs the workspaces.0:10
5. 5Done in one go. One click copies every workspace to every team project, and a message confirms it.0:15

3The designsClick a tab to see each screen and the decisions behind it

Select workspacesCopy dialogPick projectsReady to copyCopied

1234

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Select from the cards. Every workspace card has a checkbox, so selecting happens right where people already work.
2. 2Selected is obvious. Ticked cards turn blue, title and all, so it’s clear what’s about to be copied.
3. 3Actions in one bar. A bar shows how many workspaces are selected and everything you can do with them.
4. 4Delete stands apart. Delete is red, so the risky action can’t be mistaken for the others.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Your selection carries over. The chosen workspaces arrive already filled in, as chips you can remove.
2. 2Plural from the start. The field reads Target project(s) and asks for one or more, so it’s clear you can pick many.
3. 3You don’t lose your place. The dialog sits over the workspaces, and the selection bar stays in view below it.

1234

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Search by name. With hundreds of projects, typing a name beats scrolling for it.
2. 2Tick as many as you need. Checkboxes instead of a single choice, so one copy reaches every team.
3. 3Choices show as chips. Each ticked project appears in the field, with an x to remove it.
4. 4Our own dropdown. Built with our design system, unlike the browser’s menu in the old version.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1A last look before copying. Every workspace and every project sits in one place, so it’s easy to check before anything happens.
2. 2Easy to change. Any workspace or project can be removed with its x, without starting again.
3. 3One button for all of it. Copy sends every workspace to every project at once.

1

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Ready for the next task. The checkboxes clear and the bar disappears, with no reload and no new page.

3. Hide and show timeline events

PrincipleNothing is destructive

1Before

1234

⤢ Full size

Hover a problem to see it in the designTap a problem to see it in the design

1. 1Deleting was the only way to hide. To keep an event from teams until it was needed, the program designer had to delete it.
2. 2No undo. The dialog warns there’s no undo, so the event and its links were simply gone.
3. 3Delete looks safe. Delete is styled like any other main button, not marked as a risky action.
4. 4Bringing it back meant code. To show the event later, it was copied from the template’s JSON and pasted into the cohort delivery, the workflow from feature 1.

2After

Pause

1. 1Select several at once. Tick the events and a bar offers Hide, Duplicate or Delete for all of them.0:01
2. 2Hidden, not deleted. Hidden events fade and get a Hidden label, but stay in place. A message confirms the change.0:05
3. 3Still editable. Hidden events keep their edit tools, so content can be finished before teams see it.0:06
4. 4Show them just as easily. Select hidden events and the same bar offers Show.0:09
5. 5One at a time. The eye icon on each event hides or shows just that one.0:14
6. 6A whole week in one go. Ticking an event group hides every event in it, and the group is labelled Hidden too.0:24

3The designsClick a tab to see each screen and the decisions behind it

TimelineSelectHiddenEdit while hiddenHide oneOne hiddenSelect a groupGroup hidden

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1An eye on every event. Each event has its own hide and show control, next to edit, duplicate and delete.
2. 2And on every group. The group header has one too, so a whole week can be hidden at once.
3. 3Checkboxes for working in bulk. Every event and group can be ticked, so several can be changed together.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Selection is clear. Ticked events are tinted blue, so it’s obvious which ones will change.
2. 2Actions appear in context. A bar appears above the timeline with the count and what you can do.
3. 3Hide comes first. Hide leads the bar as the most common action, and Delete sits last, in red.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Hidden, but still in place. Hidden events fade to grey instead of disappearing, so the program keeps its shape.
2. 2A clear label. A Hidden label says what the fading means, so no one wonders if something broke.
3. 3The eye closes. The eye icon changes to a closed eye, showing the state and how to undo it.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Still fully editable. Edit, duplicate and delete stay active on hidden events, so content can be finished before teams see it.
2. 2The bar adapts. With hidden events selected, Hide becomes Show.
3. 3Both states at once. Selected hidden events are faded and tinted blue, so you can see both states together.

12

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Right on the card. Hide sits with edit, duplicate and delete on every event, so hiding one takes one click, with no selecting.
2. 2Named on hover. A tooltip says Hide Event, so the icon is never a guess.

1

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Only that event changes. The hidden event fades while the others stay exactly as they were.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Tick the group, get every event. Ticking Week One ticks all three of its events, so nothing in the week is missed.
2. 2The count says group. The bar reads 1 event group selected, not 3 events, so it’s clear the whole week is the target.
3. 3The same actions. Hide, Duplicate and Delete work the same for a group as for single events.

12

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1One label for the week. The group gets a Hidden label next to its name, so you can see it’s hidden without opening the week.
2. 2Everything inside fades. All three events go grey, so it’s clear the whole week is hidden from teams.

4. Breadcrumbs inside workspaces

PrincipleAlways know where you are

1Before

123

⤢ Full size

Hover a problem to see it in the designTap a problem to see it in the design

1. 1The logo was the way out. Clicking the Strategyzer logo was the only way back to the project, and nothing said so.
2. 2A name, but no path. The workspace showed its own name, but not which run or project it belonged to.
3. 3Three steps to switch. To open another workspace, you went back to the project, picked a run, then picked a workspace. Every switch meant leaving the work.

2After

Pause

1. 1Every level is a menu. Clicking the playbook run in the breadcrumb lists every run in this project.0:01
2. 2Look before you leap. Hovering a run shows its workspaces beside it, so you can see inside without leaving the page.0:02
3. 3You always know where you are. A tick marks the current run and the current workspace.0:05
4. 4Jump straight across. The last step lists every workspace in this run. Going from one to the next takes one click.0:12
5. 5Names in full. Long workspace names wrap instead of being cut off, because many of them start the same way.0:14

3The designsClick a tab to see each screen and the decisions behind it

BreadcrumbsPlaybook runsWorkspaces

1234

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1The full path, always there. Project, run and workspace sit in one line at the top of every workspace.
2. 2A clear way back. The project name, with a folder icon, replaces the logo as the way out, and says where it goes.
3. 3Each step opens a menu. The circled arrow marks a step that opens a menu.
4. 4You are here. The current workspace is in dark text and the steps above it are grey. Long names are shortened so the path fits on one line.

1234

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Every run in the project. Opening the run step lists all the playbook runs in this project.
2. 2Names in full. Names are shortened in the breadcrumb, but shown whole in the menu.
3. 3A tick for where you are. The run you’re in is ticked, so you can see your place before you move.
4. 4An arrow means more inside. Each run has an arrow, showing it opens its own list of workspaces.

123

⤢ Full size

Hover a decision to see it in the designTap a decision to see it in the design

1. 1Hover to open. Hovering a run highlights it and opens its workspaces beside it, with no extra click.
2. 2Every workspace in the run. Pick one and you’re there, without going back to the project first.
3. 3Two ticks, two levels. Ticks mark both the current run and the current workspace, so you always know where you started.

Tested with the people who do the work

I tested with six of the people who deliver programs most often, a mix of program designers and coaches, using scenarios from real deliveries. The response was strongly positive. It confirmed the core decisions, including reviewing updates before they apply, and helped us decide which parts of the opportunity tree to take on next. I stayed with the work through the build and kept gathering feedback for months after launch.

Days back on every delivery

Program designers got days back on every delivery, and the business could promise more.

People also reported fewer mistakes and more confidence in what they sent to clients.

What the team said

Straight from Slack, in their own words. Click any message to see it full size.

Heard at a live client event

“The UX has improved”

What participants said during an enterprise client’s workshops, reported by the program designer and coach who ran them. The platform, including the new admin, held up through a full day of live changes. Kurt, who had been nervous about the platform during live events for years, used the new admin all day to change the program on the fly.

Kurt Bostelaar: Massive credit to @developers and @product-team as the platform performed fantastically at the [enterprise client] workshops. I think I carry anxiety with the platform during live events because years back it always had issues. but thoroughly impressed that it never once got in the way of allowing the teams to work and was great how it helped virtual attendees participate with those in the room. I feel like having the admin feature, the program editor, and the improved UX all came together to allow us to customize on the fly changes that served the teams with where they were at. I found myself constantly throughout the day using the admin feature, the program editor and workspaces and it was truly a light bulb moment for me to see how powerful our platform has become. hats off team for all the work that has gone into getting the platform to this point! Augustin Solioz replied: @developers @product-team This was even mentioned by participants who engaged with the platform during several [enterprise client] events “The UX has improved”. The platform is now a reliable tool that enable us to deliver with confidence during in-person and hybrid events without having to onboard them into how to use it!!

What changed for them

Cheers to @product-team and @developers - I used the copy workspaces feature just now and it literally allowed me to do in 20 minutes with Augustin what would have taken me at least 4 hours in the past. HUGE game changer

Cheers to @developers @product-team. I was on a call with @Latif earlier and we both could NOT believe the features (hide timeline events, transfer sets of workspaces to multiple projects at once, and add workspaces from admin) that we now have at our disposal. This is a MASSIVE game changer!!!

Cheers to @developers, @Olaide Arike Kaffo, and @Ashley Underwood. Even while there are still more parts to be shipped, its already AMAZING to work with the new workspace transfer feature. a simple thing that makes such a huuuuuge difference

CHEERS to @Olaide Arike Kaffo & @George Montgomery for the breadcrumb navigation. It’s solved my biggest orientation challenge navigating the custom playbooks we’ve design… I ALWAYS got lost in the nav and now it’s seamless… it’s f-ing BRILLIANT!!! 🙌

Cheers to @developers @Olaide Arike Kaffo @Ashley Underwood, this new workspace feature is really making my life easier! Really grateful for all the work you’ve put in 🙌

Cheers to the product team especially @Olaide Arike Kaffo and @Vlad Gerasimov cc @Ashley Underwood - loving the new navigation by organisation. SOOO much easier to find things this way. WOW!! 🎉

On working with me

Wow @Olaide Arike Kaffo! I’m super impressed with the diligence and structure you have applied to synthesising and analysing the product discovery work you have been doing on our editor and admin features this week. Really fantastic work 👏 🚀

Cheers to @Olaide Arike Kaffo for jumping straight in and iterating on designs in your FIRST week!! Keep rocking 🔥

@Olaide Arike Kaffo +1 super cool to see you truly sinking your teeth into this project. I’ve been really impressed by how you keep asking the simple questions in order to make sure you deeply understand the problem. Love it!

Beyond the numbers

Program designers are Strategyzer’s scarcest resource, so giving them back days changed what the business could take on. These were shared results. My part was removing what slowed the team down in the product, so they could build and deliver more.

What this project shows about how I work

Where the work goes next

The rest of the opportunity tree points to the next phases:

• Search across the product.
• Linking workspaces by a fixed ID instead of by name, so renaming a workspace never breaks a link.
• Reliable links between workspaces.
• A simpler structure for playbooks and projects.

The aim for these next steps: someone who first heard the word “playbook” last week should be able to run one with confidence.