*Originally written for the [Ideas by WeTransfer](https://web.archive.org/web/20210126182449/https://ideas.bywetransfer.com/story/reinventing-the-slide-with-paste-bento-layout-system) blog during my time as Director of Design and Head of Paste. Lightly edited for clarity in this context.*

---

### Paste® was designed to help people focus on the narrative flow of slides and adjust quickly as things change. But it took many tries to get it right, with many prototypes tested along the way. In this article, I pull back the curtain on the development of Bento Layout System, which defined the 2.0 release.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2FTpCwYNJs9TM2gJHxizLm%2F3bae15ba-8218-4e68-991d-b8c83f29005d.jpg?alt=media&token=c83591b0-a215-4cc7-9239-faf2903820fb","id":"3bae15ba-8218-4e68-991d-b8c83f29005d","width":3840,"height":2160,"filename":"ArticleHighlight_Image_F3B2D0__26_.jpg","type":"image/jpeg","caption":"","border":false}]}
```

People love Paste. We know this because an overwhelming majority of customers say that once they try Paste, it’s hard to go back to other presentation tools. All the others seem to force users to suffer the same fate of fiddling with layouts and wrestling with static templates.

Previously, I wrote about the [challenge of keeping our bicoastal team aligned](https://read.cv/kjchun/writing-on-the-wall) using existing online tools. After trying everything to help us work better together, we realized a new way of sharing visual ideas was needed. Something that would get our ideas out fast and design slides for you, like magic.

## Layouts that move with you

Paste was designed to help people focus on the flow of the narrative and adjust quickly as things change, as they do in creative and collaborative work. A key feature is Power Layouts, which automatically adapts to your content based on your intent.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2FTpCwYNJs9TM2gJHxizLm%2F53c66f06-dd40-4236-8d1a-0061519707c8.mp4?alt=media&token=e753c7b2-0d45-4316-8054-b6d9d7b8cdd6","id":"53c66f06-dd40-4236-8d1a-0061519707c8","width":1920,"height":1080,"filename":"v1 Power Layouts.mp4","type":"video/mp4","caption":"Power Layout options in Paste V1 asked the creator “Is your intent to Intro, Show, or Tell?” and transformed the relationship between text and media with a single click.","border":false}]}
```

## Balancing power with simplicity

It’s common wisdom that slides with less density (less text, fewer images) make them easier for viewers to digest. But when we set out to better understand how customers used Paste, we learned that some stories needed richer layouts to explain—especially when multiple ideas had to be shown at once.

We heard from people who wanted a bit more (slide layout options, advanced formatting) and those who believed less was more. Sometimes this was even the same customer, which highlighted the tension and design challenge.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2FTpCwYNJs9TM2gJHxizLm%2Fc5af2328-7452-4d06-98e5-68bf202540b2.jpg?alt=media&token=dbe81241-75f9-426f-86b1-849ef20b1106","id":"c5af2328-7452-4d06-98e5-68bf202540b2","width":1068,"height":1226,"filename":"04_ImageGrid_Left__2___1_.jpg","type":"image/jpeg","caption":"The challenge: New layout capabilities that enable comparing, sequencing, and captioning within a single slide.","border":false}]}
```

Our mission as designers and engineers was to strike a balance and deliver on Paste’s promise of beautiful slides every time, without compromising its simplicity and focus. So we got busy prototyping.

## Human vs Machine

As we explored different approaches to enable richer layouts, we needed to answer some big questions around the ideal relationship between user control and automation.

Here are some of the key questions we asked of our prototypes and the insights that shaped our ultimate solution.

> **Q: How might Paste give creators more control while continuing to fully assist in automatic layout and formatting?**

Since the early days of Paste, we were interested in an always-on approach to machine assistance that could adapt to the input of the creator. Like a great autopilot system, we believed Paste should strive to always:

1. Direct you towards a good destination (i.e. layout outcome) by default

2. Allow you the flexibility to set a new direction (i.e. layout or narrative flow)

3. Automatically resume assistance by adapting to the new direction

We revisited old prototypes to see if we could glean new insight.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2FTpCwYNJs9TM2gJHxizLm%2F9b15f4e5-ab19-442a-9934-905e1359063a.mov?alt=media&token=3d5fb9bf-55ad-4fc2-a8e9-40eb3ec9b81a","id":"9b15f4e5-ab19-442a-9934-905e1359063a","width":1924,"height":1142,"filename":"Slider2.mov","type":"video/quicktime","caption":"A pre-alpha prototype I made exploring the dynamic interplay between text and image. A simple drag operation shifts the visual weight of a slide. Made with Framer Library.","border":false}]}
```

A key insight from the early days was that tuning your layout for communication and impact isn’t a one-shot operation. We saw how Paste could adapt in real-time with responsive layouts based on your refinements.

> **Q: What happens when we add freeform positioning abilities to Paste’s existing container-based layout approach? How might Paste keep its promise of ‘never a bad slide’ in these situations?**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2FTpCwYNJs9TM2gJHxizLm%2Fde26755e-fe76-4b69-b8fd-6d874e61a336.jpg?alt=media&token=fefedd9d-7bbf-4c08-8083-eaa5954e9fbc","id":"de26755e-fe76-4b69-b8fd-6d874e61a336","width":1306,"height":742,"filename":"05_ImageGrid_Left_EE6F4E__2_.jpg","type":"image/jpeg","caption":"Some abandoned prototypes that tried adding freeform layout abilities to Paste’s existing slide editor.","border":false}]}
```

One of our prototypes was really different—it opened up new layout outcomes by removing all asset position and scale constraints. We thought maybe if we tried the route of freeform layouts, we could potentially solve it. Let people do whatever they want and help them “fix” it with assistive features and controls.

But the problems quickly compounded. Slides quickly fell into the same trap of other presentation tools—the layout would erode as content evolved, which required extra work to address and a designer’s attention to fix it. By opening Pandora’s box to every outcome, creators wasted time and energy tidying up (and thinking about) the layout. We abandoned this approach to dig deeper into Paste’s roots in web technology.

> **Q: How can advances in web technologies, in particular no-code website tools, make advanced slide layouts faster and more intuitive?**

Taking cues from website-building tools and patterns of responsive web design, we kicked off a series of prototypes that dug deeper into the container-based layout approach than Paste ever did.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2FTpCwYNJs9TM2gJHxizLm%2F52f80470-9631-4e7a-adfd-408e9a8eb078.mp4?alt=media&token=195570b1-58ad-49df-93f1-f344b7eeb5fe","id":"52f80470-9631-4e7a-adfd-408e9a8eb078","width":1156,"height":720,"filename":"Early Prototype for Bento Layout System.mp4","type":"video/mp4","caption":"An early iteration of the container-based prototype offered the flexibility to insert containers at any juncture. While powerful, it was tedious to manage rows and columns—like doing layout in a spreadsheet—and risked compromising the document's structure.","border":true}]}
```

It took fifteen iterations of Bento to arrive at a solution that enabled more flexible and powerful layouts without losing the speed and focus that people love about Paste.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2Freinventing-the-slide%2F6180ac35-c4c2-4016-b759-fdc294c7b3c5.mp4?alt=media&token=b36a6050-cabe-4e11-96c0-6247e4febef2","id":"6180ac35-c4c2-4016-b759-fdc294c7b3c5","width":1620,"height":1152,"filename":"Multi-slide Media Position.mp4","type":"video/mp4","caption":"Formatting multiple slides at once demonstrates the power and flexibility of the Bento Layout System.","border":true}]}
```

In the end, the text and media pairings that powered the original Power Layouts became the foundation of the Bento Layout System. This approach amplified Paste's speed and flexibility without sacrificing simplicity or compromising the document's structure.

Two new Power Layout options ‘Compare’ and ‘Multi’ were added as common starting points for user. Individual columns could also be added and removed at any time as the slide layout adapts automatically.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2FTpCwYNJs9TM2gJHxizLm%2F721ce4cf-7f04-4a11-bec8-63c863e96cc2.mp4?alt=media&token=ad903a87-2c12-4497-ae8d-ad335a0296f3","id":"721ce4cf-7f04-4a11-bec8-63c863e96cc2","width":1920,"height":1080,"filename":"Paste-2.0-60 sec.mp4","type":"video/mp4","caption":"With Bento, Paste 2.0 guides creators toward beautiful layouts while giving them flexibility to add or remove structure as needed.","border":true}]}
```

The name Bento stuck for the public release of Paste 2.0. Like arranging a beautiful meal, Paste now lets you drag and drop media between compartments, which snap everything into place. No mess made, no cleanup required.

## An ongoing conversation between creator and tool

From its inception, Paste was a fundamentally different way to create and shape presentations. Bento took it further and established the always-on, machine-aided approach. The creator and tool adapt and respond to the other, like a conversation. It’s a different paradigm than what you might be used to, because we designed Paste to help you focus on what matters most—your content and intent—as it takes care of the busywork.

Paste 2.0 with Bento Layout System is just the beginning. We have big plans for extending the system to enable even more intuitive ways to shape and share your stories with your team and the world. We hope you’ll give it a try and share your feedback!

---

*Thanks to Amy Cao for help on this story. Bento Layout System wouldn’t exist without the many hands that helped prototype and build it over the years. The Bento launch team: Will Urmston, Larry Fox, Alban Creton, Joe Yuhas, Matt Cullerton, Manpreet Sethi, Tommy Montgomery, and Maedhbh Greene. Special thanks to Andrew Allen, Tara Feener, Eric Rockey, Mark Dawson, and Allen Lau for helping create Paste’s slide editor that would prove critical to the foundation of Paste 2.0.*

Reinventing the Slide with Paste’s Bento Layout System

*Originally written for the [Ideas by WeTransfer](https://web.archive.org/web/20210126173453/https://ideas.bywetransfer.com/story/how-paste-reimagined-the-slide-deck-for-collaboration) blog during my time as Director of Design and Head of Paste. Lightly edited for clarity in this context.*

---

### Necessity is the mother of invention, as the saying goes. In the same way, Paste® was borne out of doubt around existing solutions for our bicoastal team.

For years, the FiftyThree Paper® and Paste teams worked across time zones, with offices in Seattle and New York. To work as if we were together, we needed a tool that would facilitate productive discussions, design reviews, and project planning. We needed a way to express our ideas visually and get on the same page quickly. We wanted it to look good, too.

So we tried every online tool.

* **Shared docs** didn’t handle visuals well, shifting and displacing content when more than one person contributed.

* **Presentation tools** suffered from endless formatting options and fussy templates.

* **Design tools** were intimidating for non-designers to use.

* **Whiteboarding apps** were tedious to format and the results were rarely ready to present.

* **Messaging tools** like Slack, which we love, were great for communication, but we hated that ideas got lost in the stream.

As teammates who couldn't be in the same office, we missed having a dedicated space where we could gather our ideas and move big projects forward together, from kickoff to final presentation. There had to be a better way.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2Fe6fQDfHdDUlWjZNBqqlV%2Faab2aab4-99fe-4097-8a55-176c245c6e32.jpg?alt=media&token=ddde950c-575f-4d28-9e46-73e93fbeaa93","id":"aab2aab4-99fe-4097-8a55-176c245c6e32","width":2368,"height":1332,"filename":"02_Image_Narrow__5_.jpg","type":"image/jpeg","caption":"Close-up of the wall in WeTransfer's Creative Studio in Amsterdam.","border":false}]}
```

## Inspired by the wall

In the old days (way before a pandemic sent many of us home to work), our product team prepared for reviews with slide printouts that we'd spread out on a table or pin to a wall. Alongside were whiteboard sketches, sticky notes, and other documents by designers and non-designers alike.

And we weren't alone. In a creative studio or designer's [war room](https://www.fastcompany.com/3028471/google-ventures-your-design-team-needs-a-war-room-heres-how-to-set-one-up), the walls enable so much in the way of creative collaboration and management, from critique, discussion, decision-making to tracking progress. What requires a whole suite of digital tools today is simply accomplished by gathering around the humble, visual wall.

> ***“When you capture every decision and put it on the wall, you don’t have to wonder if everyone is on the same page. The room is the page. The more you put on the walls, the more shared understanding you build.”***\
> *— Jake Knapp, creator of the Design Sprint*

When we set out to make Paste, we weren’t looking to create a presentation tool, but rather to facilitate this shared way of working, but virtually. We spent months exploring various models for a new type of visual document that would let us collaborate as effortlessly as being in the same room together.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2Fe6fQDfHdDUlWjZNBqqlV%2Fa928b697-993b-4b7c-94b3-a6fbb6482925.jpg?alt=media&token=fb8f626c-bd74-4c17-b61d-d7f910df9d09","id":"a928b697-993b-4b7c-94b3-a6fbb6482925","width":1306,"height":742,"filename":"04_ImageGrid_Left_A8C883.jpg","type":"image/jpeg","caption":"WeTransfer Creative Studio's virtual wall in Paste","border":false}]}
```

Today, just like the wall, Paste helps teams focus on what we like to call 'the real work,' making them more collaborative, more connected, and better aligned so they can ultimately make better decisions together.

The design of Paste was driven by four tenets around creative collaboration:

### Tenet #1: Transparency enables the connection needed for collaboration.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2Fwriting-on-the-wall%2F62708d08-aced-415e-b2e5-7fad2ee97cb4.mp4?alt=media&token=68ca6277-e8f1-4905-8ae7-1d3602cc0e1a","id":"62708d08-aced-415e-b2e5-7fad2ee97cb4","width":1920,"height":1080,"filename":"tenet-01.mp4","type":"video/mp4","caption":"Collaborative by default. The main view of a Paste deck is the virtual wall. We call it Grid View and it provides the \"big picture\" transparency that enables connections between people and ideas.","border":true}]}
```

### Tenet #2: People share ideas, not presentations.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2Fwriting-on-the-wall%2Fafc2e870-9375-43a7-8d79-158b07c598c0.mp4?alt=media&token=d742a3df-5f97-4698-9b50-10fbce27d68c","id":"afc2e870-9375-43a7-8d79-158b07c598c0","width":1920,"height":1080,"filename":"tenet-02.mp4","type":"video/mp4","caption":"Get your ideas out with no time wasted. Unlike presentation tools that make you start with templates (which compels you to adapt your content to it), Paste lets your ideas lead and automatically assists in the formatting along the way.","border":true}]}
```

### Tenet #3: Beautiful design empowers people.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2Fwriting-on-the-wall%2F2771c683-0341-4650-858f-5acc0dcf0b68.mp4?alt=media&token=e1a50ba5-224b-48e0-b279-ab04f3785d94","id":"2771c683-0341-4650-858f-5acc0dcf0b68","width":1920,"height":1080,"filename":"tenet-03.mp4","type":"video/mp4","caption":"Always presentable. Paste's automatic formatting and Power Layouts give people the confidence to share their ideas and look good in the process.","border":false}]}
```

### Tenet #4: Diversity fosters better ideas.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F1caS7l0YlUbSajYPSlXWcDUlwVW2%2Fwriting-on-the-wall%2Fde854151-e80f-4ce5-b7aa-6639496f04b0.png?alt=media&token=f000470e-d31b-4f76-9eae-41fc894144d4","id":"de854151-e80f-4ce5-b7aa-6639496f04b0","width":1736,"height":982,"filename":"Slide view.png","type":"image/png","caption":"Add anything. From videos to Figma, we wanted Paste to play well with a range of media and digital tools, so anyone can contribute ideas in the language they're most comfortable with.","border":false}]}
```

> ***“I can feel that the team has a really specific vision. Paste is a different paradigm of thinking compared to other presentation software that’s out there.”***
>
> *—[Peter Wang](https://web.archive.org/web/20201202164446/https://ideas.bywetransfer.com/story/how-buzzfeed-cto-leads-with-paste), CTO at BuzzFeed*

## The Wall for All

We want to make the process of ideating, defining, critiquing, and iterating accessible to everyone, not just individuals with the skills and time to make great-looking slides. With Paste, you don’t need different tools for reviewing, planning, and decision-making. Like walking by the wall in the office, it makes the work visible and anyone can approach it and have a say.

---

*Thanks to Amy Cao for help on this story.*

Writing on the Wall: How Paste reimagined the the slide deck for collaboration

Product Design

Reinventing the Slide

Behind the scenes of Bento Layout System for Paste 2.0

Writing on the Wall

How Paste reimagined the slide deck for collaboration

Notable Consumer Technology

Design Annual, Environmental

Web Services & Applications

Paste by WeTransfer (acquired from FiftyThree)

Interactive Annual, Mobile/Tablet Technology

Semantic Slide Autolayouts Patent

Interview as Director of Design and Head of Paste

“If an idea doesn’t move, it will die.”

Led design and implementation of WeTransfer's first shared component library, uniting design and engineering teams across multiple products.

Created holistic design system and documentation site aligning designers and engineers across all products.

Championed systems thinking for the evolution of WeTransfer’s product suite to support cohesive user experiences.

Principal Product Designer

WeTransfer acquired FiftyThree in August 2018. Led design for product and marketing for Paste during the merge.

Director of Design, Emerging Products

Product owner of Paste and managed US product design team.

Spearheaded development and launch of Paste 2.0, introducing Bento Layout System to transform slide creation and UX which drove a 340% increase in signups.

Head of Product, Paste, and Director of Design, US

Brand identity systems, interactive, motion, print, and environmental design for AIGA, Boeing, Coca-Cola, MacArthur Foundation, Microsoft, Qualcomm, and more.

Senior Designer, prev. Designer

Product design for Paper and Paste.

Led product design for Mix—a collaborative web platform integrated into Paper.

Led design for all FiftyThree.com web properties including product marketing and shop for Pencil and Book.

Design

Founding designer for [Portals & Reviews](https://wetransfer.com/explore/portals-reviews), a key addition to WeTransfer’s new Premium offering. Laid the foundations and assembled the Design & UXR team to ensure a successful beta and v1 launch.

Led product design and UXR teams for Paste, Paper, Portals & Reviews.

KJ Chun

2020