The unique value prototyping brings to the design process

Adobe Design Prototyping: Show don’t tell

A very colorful digital illustration with a Black woman holding a pencil at the center. She's surrounded by more than a dozen documents and electronic devices with different graphics on them.

Illustration by Kenzo Hamazaki

Delightful user experiences make products special. But those experiences are seldom happy accidents, they must be thought through, teased out, and finessed. The best way for us to think through and test the features and functions that result in these experiences is by building and testing them before they’re put into products—using prototypes.

Books and articles go through multiple drafts before arriving at final versions. The drafts are stepping stones to something better. They give authors permission to be scrappy and incomplete and provide multiple opportunities for revision. Prototypes are drafts of a product, and essentially serve the same purpose: Every iteration is a new draft that gets a team closer to its final version.

Adobe Design Prototyping has built more than 150 high-fidelity prototypes.

They’ve helped our design and product teams prove concepts early and avoid mistakes that might otherwise happen late in the development process. They’ve helped designers uncover new design paths and workflows and aided in design and design research processes. They’ve also helped teams leap communication hurdles with concrete experiences that leave less room for assumptions and misunderstandings. Having a prototype often leads to quicker consensus and, most importantly, fewer meetings.

What is design prototyping and what do prototypers do?

Prototypers, who often have both design and engineering skills, care about the user experience just as much as the technology that brings it to life. Since they aren’t bound by the same constraints as engineering teams—like addressing security and scalability concerns or writing production code—they can build on short timelines, with fast feedback and iteration cycles, and quickly answer questions for design and product partners. They also encourage trial and error, are extremely comfortable writing throwaway code, and restarting from scratch. More than anything though, they’re great partners in early-stage discovery and iteration and readily jump into the design process with the goal of helping designers learn more about the experiences they want to implement.

Prototypes can range from simple hand-sketched paper prototypes and low-fidelity user flow wireframe prototypes to high-fidelity working prototypes written in code. All are early samples of a product or feature, built to test a concept, or hypothesis. Because they’re working versions of designs, high-fidelity prototypes can uncover one-off corner cases that may occur as part of special workflows, and shed light on technical hurdles that could make features tricky to build. They address how something should look, feel, work or, even more fundamentally, what role a feature or product will play in a workflow, and whether the design for it is appropriate. One example of how we explored many of these questions in a single prototype was Project Cooper.

Learning content created by product teams can become difficult to maintain, and a bottleneck to scaling. Project Cooper, which started as a web prototype, was an exploration of crowdsourced learning content that would help Adobe Lightroom users grow and improve as photographers. It leveraged Lightroom’s active and knowledgeable user community to create tutorials: Users could edit their own photos in Lightroom and publish them to a Lightroom community where others could easily learn the process. Each post included a quick animation of the editing process along with all the values used to create it. Users could also create tutorials capturing the edits along with short explanations, so others could follow the creator’s step-by-step process.

A screenshot of a web browser with two horizontal rows of images (three on the top row and two on the bottom) on a light background.

Community feed: The prototype was for a stand-alone website with a community feed of images.

A screenshot of Lightroom's Discover screen with eight images on a dark background.

Community feed: In Lightroom the community feed of images is in the Discover section.

A screenshot of a web browser with a light background. On the left are two copies of the same image (one color and one black-and-white) stacked with room above and on the right for commenting. On the far right is a panel with information about the color photograph on the top left.

Remixing: In the prototype any published image could be remixed by anyone in the community and shared in the comment thread.

A screenshot of Lightroom's Discover screen with two large copies of the same image (a tulip emerging from rocky soil) taking up most of the screen. To the right is information about the image on the right and underneath both images are 17 additional thumbnail-sized variations.

Remixing: The feature in Lightroom shows every remixed variation of the image alongside the original.

We not only built a prototype to envision what the experience would look like, we also built prototypes for the tutorial maker and for posting, remixing, and commenting on photos (which the team used for feedback during testing). Multiple concepts were tested and iterated on or discarded during the process. One of the comments during a testing session even managed to sum up the entire purpose of our approach: “I’m always looking at someone’s photos and wondering, ‘How did they do that?’ and want them to show me how they did it step by step. That’s what this is, this is fantastic!”

A GIF of a mobile phone screen transitioning between a gallery of images, a selected image, an information screen, and export options.
The prototype for posting, remixing, and commenting on photos in Lightroom for mobile.

Originally intended as a stand-alone website, in the end Project Cooper was incorporated into Lightroom’s Home experience. Released to the public in a 2020 update, it has increased engagement and retention for Lightroom, and built a vibrant community of photographers.

How our prototyping team works across Adobe Design

We have more than two dozen design engineers and managers on our team supporting products across Adobe. There are many reasons designers might engage us:

Our involvement in the design process always begins with a conversation about what the designer is trying to learn. After that first conversation, the prototyper will usually build a rough first version of the prototype. We often think of prototypers as “User Zero” because they’re the first to use designs after bringing them to life, but the magic happens the moment the designer sits in the user seat to test it.

A GIF of an Adobe XD artboard with three designs scrolling in the center and tool panels on the left and right.
The Adobe XD team was unsure how a scroll animation might function within the browser.
A GIF of an Adobe XD artboard with multiple screen mockups scrolling in the center and tool panels on the left and right.
We worked with them to build each animation and explore the transitions at various scroll speeds.

Together the designer and prototyper will uncover most usability issues and from those insights, future iterations of the prototype are built. Once it’s put in front of users, a feedback-iteration-feedback process begins (from the feedback designers make the necessary design changes, and those changes are incorporated into a new build). Each round of testing with users, in partnership with our user research team, helps highlight design gaps or answer specific questions about whether the design addresses a user pain point. Each iteration adds design and product polish and gets the team closer to understanding user needs. The most important concept we can impart to our design teams is to leave time for this process of exploration and discovery.

People might think that factoring in time to prototype and iterate will slow them down, but prototypes are completed on much smaller time scales than actual products, and often save time and resources in the long run. That said, timing is key:

Prototyping should be part of the design process, not an afterthought

Adobe has world-class talent on its engineering teams who build products in the best way possible (often on tight deadlines). But releasing a product or a feature, only to find out later that it doesn’t work, can mean rebuilding and course-correcting, which leads to delays and excess costs.

Instead of building in isolation, releasing to customers, then learning which parts are successful and which aren't, building prototypes early in the design process carves out time for a discovery phase to explore and test product and user experience hypotheses before significant time is spent building the product. It’s a controlled period where customers can provide candid feedback that will be factored into the next iteration of the prototype (a cycle that's repeated until planned features are resonating with users).

When the Behance team was considering the addition of a carousel to the Livestreaming home page (so users could scroll through streams instead of watching a single video play) they had some questions that were easily answered by building and testing a prototype:

A GIF of a screenshot of the Behance Live home page with horizontally scrolling livestream videos in the upper half of the screen and sixteen video thumbnails on the lower half.
The hero carousel on the Behance Live home page.

Prototypes are powerful testing and researching tools for designers and design researchers, but there are two reminders we impart early and often:

Design prototypes allow teams to fail fast, learn from mistakes, and course correct. Our users deserve intuitive and delightful experiences, and prototypes help maximize the odds of delivering them.

Header copy
Design your career at Adobe.
Button copy
View all jobs
Button link