How User Research Led to the Creation & Evolution of Adobe Fresco

Illustration by Justin Cheong.

An enormous amount of leg work goes into building a great product before even a single pixel is laid down. From establishing an actual need to identifying workflows, user research can give you invaluable insights into your audience to ensure you’re on the right track. With this in mind, Adobe’s design team carried out user research at every step of the design process when planning new digital painting and drawing app Adobe Fresco.

In this article, Brooke Hopper, lead designer for drawing and painting at Adobe, gives us an exclusive look behind the scenes to understand just how important user research was — and still is — in the creation of Fresco.

Establishing a user need

Adobe already had two free drawing apps on the market: Adobe Photoshop Sketch (pixels) and Adobe Illustrator Draw (vectors). Both are available as phone and tablet versions for both iOS and Android. So why was another app needed?

“These apps utilized the power of Photoshop brushes and Illustrator vector drawing, and many artists used them for professional, paid work on a daily basis,” Brooke Hopper explains.

“There were features in both Photoshop and Illustrator that customers were asking for, and we knew we needed to make the decision to keep iterating on Sketch and Draw — or we could build a powerful new painting and drawing app that was still easy to use, like Sketch and Draw, but also contained pro-level features that Photoshop and Illustrator artists were used to. Additionally, we saw Fresco as an opportunity to leverage the advantage of having both pixels and vectors into one app, hence the project name, Project Gemini — a reference to the constellation, represented by twins and the combination of pixels and vectors in a single app.”

The very first design for Fresco in 2017 and the most recent iteration in 2020. With the help of user research, the app has evolved significantly — from major visual changes to the app framework, to minor interactions and nuances in the experience. Art by Kyle Webster and Jessica Wong.

User interviews with real users

The decision to create Fresco grew from extensive user research. The team spent several months talking to more than 50 artists and illustrators, about their workflows and pain points, what they wanted from a perfect app, what they felt was missing in existing apps, and their dreams of what they might someday be able to do. The team then broke the drawing and painting space down into categories (comics/graphic art, animation, storyboarding, editorial illustration, fine art, hand lettering, industrial design, technical illustration, graphic design, book design, and game design) and identified the most popular apps for illustration.

“From that matrix, we tried to talk to multiple artists within each category who were using the different apps,” Brooke remembers. “As you can imagine, it was a lot! In order to reduce location bias, we also made sure to talk with artists and illustrators from as many parts of the world as possible because different apps and styles of drawing are popular depending on location.”

Artists Grace Hwang, Kervin Brisseaux, Shyama Golden, and Jess Worby watch as a Fresco team member shows the latest Fresco designs while Rumiana Williams, Fresco design manager, notes observations at the Adobe Union Square Office in New York in February 2019.

The creation of the Gemini 10

Two groups of artists were core to the development of Fresco. One was called the Gemini 10 (more on the second group, comprised of “pre-release artists,” a little further down).

“The Gemini 10 were a diverse set of 10 illustrators using different styles and workflows that we handpicked to test the limits of Fresco before it was even ready for internal use,” Brooke reveals.

“We wanted to be sure that we identified problems very early on, and so even though it was somewhat risky because we were giving out builds that were far from ready, we asked the Gemini 10 alpha testers to complete a series of tasks that relate directly to their workflow,” adds Will Eisley, principal product manager for Fresco. “These 10 artists suffered through app crashes and super early buggy builds, and sometimes they weren’t even able to finish their work because the app wasn’t far enough along. We asked them to be brutally honest with us, and in turn we learned an incredible amount from them. After three months, we had identified places where we needed to improve the design and experience of the app — and even commissioned work from them to be used as promotional art for Fresco once it launched.”

Jing Wei, one of the Gemini 10 artists showing how she uses Adobe Draw in her workflow and some of the features that she would want in Adobe Fresco during the Make it on Mobile event in 2017 in New York.

Muna Abdirahman, one of the Gemini 10 artists and a devoted Photoshop user, describes her experience using Adobe Sketch into her workflow during the Make it on Mobile event in 2017 in New York. Conversations with artists to understand workflows and pain points were a large part of the Fresco design process throughout the entire process of building the app.

Individual research sessions

The most common research sessions, particularly for testing specific features and workflows in Fresco, always included at least three creative professionals (people who create art for money) and three emerging professionals (students or people who are moving toward making money with their work). Additionally, at least two of the participants in each study were supposed to be “non-Adobe”. This meant that the Creative Suite (or more specifically, Photoshop) was not their primary tool for creating illustrations, drawings, and paintings. This gave the team a clear understanding of whether or not a feature made sense for a more broad spectrum of users, not just existing Creative Cloud desktop customers.

Group feedback sessions

At least three to four times a year, the Fresco team would get into a room with a group of artists who specialized in drawing and painting and worked in a variety of apps (Photoshop, Procreate, Clip Studio, Illustrator, etc). During these sessions the team would show designs for new features they were working on, get feedback on the experience of features that were already working, and show prototypes of future-forward features. Most of these artists were an integral part of the pre-release program if they had iPads, and in some cases, they went out and purchased an iPad after playing with Fresco during these feedback sessions. Additionally, the team solicited casual feedback on workflows during conferences like 99U, Adobe MAX, and the Adobe Education Summit.

Mari Gabi Messina and Nan Cao explore new features in Fresco during a feedback session in February 2019 as Elissa Welsh, experience designer for Fresco, observes.

Student engagement

While the Fresco team engaged with students on a regular basis during testing, there were two student groups that had an opportunity to provide continual feedback to the Fresco team. Each semester, the team held organized sessions with the MFA Illustration students in a class taught by director of experience design at Adobe, Matthew Richmond at the School of Visual Arts in New York, as well as students in a class taught by DC comic artist Allen Passalaqua at the MFA Comics Program at California College of the Arts in San Francisco.

Testing with pre-release artists

Apart from the Gemini 10, the other set of artists that were, and still are, integral to Fresco’s development are the pre-release artists. We started slowly with Fresco’s pre-release program, eventually building a community of more than 600 engaged and active artists and illustrators — who either design for profession or passion — and have a direct line to the design team through a Slack channel.

“A big part of my role is to always be in communication with the illustration community, regardless whether they are Adobe customers or not,” Brooke explains. “I continually reach out to artists via Instagram and Twitter (my direct messages are open!), engaging in conversation with them, listening to where they struggle, and many times, reading between the lines to understand where Fresco could make them more efficient or reduce friction in their workflow. Research, design, testing, evaluation, and iterating are core tenets for the Fresco team.”

Designing customizations and shortcuts

During initial user interviews, the team found that customization was a big part of the reason people love Adobe’s desktop products. So customization had to be built into Fresco but it was important to strike the right balance.

“This is where we started designing the customizable app frame,” Brooke reveals. “Panels and tool options can be detached to be floating, or even docked to different parts of the screen. As the Fresco app frame evolves along with the rest of the new apps coming to the iPad, like Photoshop and Illustrator, we’re looking at additional ways to allow for customization but still retain a consistent experience across Adobe’s creative apps.”

Another important area were keyboard shortcuts. “Artists working in Adobe desktop creative apps live and die by keyboard shortcuts,” Brooke laughs. “Spend a few minutes watching a designer or artist in Photoshop or Illustrator, and it’s like watching a talented musician play the piano or guitar! Keyboard shortcuts are muscle memory, and they are the gateway to advanced, efficient workflows.”

Will Eisley, principal product manager for Fresco, conducts a group interview with students in the MFA Illustration program at SVA in January 2018 about their workflows.

During user testing sessions, the team often heard that artists loved Fresco but that it felt a little slow. A large set of keyboard shortcuts will be implemented in Fresco’s 1.5 release in May, but as few artists worked on their iPad with a keyboard attached, the team also went a step further and created a feature called the Touch Shortcut, which temporarily changes the action of the tool you’re using.

“The Touch Shortcut enables artists to quickly switch between the brush and the eraser without having to actually switch those tools,” Brooke explains. “You can also constrain the X or Y position while moving layers. There is a large set of advanced workflows that the Touch Shortcut enables, and even more are coming. Many of them are actions you wouldn’t be able to do with keyboard shortcuts.”

The below images are examples of different iterations of where the tool options (properties tied to each tool, like brush size, flow, smoothing for brushes, and adding to or subtracting from selections on the Lasso tool) should be placed. The team had a hunch that users might have preferences for where they wanted to access these things on the canvas.

“We user tested options for placing tool options directly below the tool, at the very bottom of the toolbar, or detached, allowing the user to place them wherever was convenient for them,” Brooke reveals. “Ultimately, through user testing we discovered that very few users noticed the tool options when they were directly below the tool (Option B), and while nearly all testing participants had no trouble finding the tool options when they were detached from the toolbar and floating, many wanted the option to tuck them away and visually have more canvas space.”

This is how the team arrived at having tool options in Fresco docked at the bottom of the toolbar (Option A), but with the ability for users to drag them out and place them anywhere on the canvas, similar to Option C.

Testing workflows with prototypes

To design and prototype Fresco, the team used Adobe XD. Some of the prototypes were then tested with users.

“We worked with the Adobe Design prototyping team to build an incredibly robust iPad version of Fresco, which was still called Project Gemini at the time,” Brooke recalls. “We used this to test workflows and understand where more thinking was needed. In fact, the prototype was so robust that some people thought they actually had early access to the app! As the Fresco engineering team put more components in place, we were able to do more end-to-end workflow testing and longitudinal tests within the actual app itself.”

One of the benefits of user testing is that you will see people use apps and tools in ways that you, as a designer, never would have thought possible.

“Fresco’s Live Brushes blend and bleed just as they would in the real world,” Brooke points out, by way of example. “Very early we found artists who would import images onto their canvas, and then paint over them with the Live Oil brushes, effectively turning an image into an oil painting in minutes!”

User testing and prototypes also help keep your excitement about innovative features in check, as it can be easy to get carried away.

“If you’re being selfish as a designer, you don’t want to hear that something you designed didn’t test well,” Brooke acknowledges. “But engaging in thorough research and testing with Fresco showed us that we needed to go back to the drawing board and re-think some of the early experiences. We’d rather wait to ship a game-changer feature and totally nail it than get it wrong and have no one use it.”

Jinjin Sun, experience designer for Fresco talks to Chana Messer and other K-12 educators about Fresco during the July 2019 Adobe Education Summit.

The UX evolution of Fresco

User research is an ongoing key part of Fresco — whether it’s a new feature or a longitudinal study that helps the team understand full workflows over the course of a few weeks or a month.

Collaborating with the Adobe XD, Premiere Rush and Photoshop Lightroom teams also ensured that users can seamlessly work between apps without having to relearn menus or memorize an all new set of keyboard shortcuts.

“If we create a new pattern in one app, it needs to be able to be adopted by the rest of the apps in a way that makes sense,” Brooke explains. “When we created this new framework for Fresco, none of the other apps were in the hands of all customers. As they have been out in the wild, we’ve learned a lot of things and have been evolving the app framework as we go along. We will continue to evolve Fresco as new features make it in and as artist workflows change.”

The team is always looking for feedback and keeping their ear on the ground to learn what customers want and need. Embedded in Fresco is a feedback mechanism called User Voice, which customers can use to submit features that others are able to vote on. With every release — which happens monthly — new features and tools are added that are in direct alignment with user requests.

Drawing and painting is an incredibly personal activity. Without the extensive user research the Adobe Design team carries out, it simply wouldn’t have been possible to create an intuitive tool to augment such personal and tactile workflows.

Special thanks to Adobe Fresco researcher, Quynh Nguyen, along with the entire Adobe Design research team, for their incredible work creating Fresco and contributing to this article.

Give Fresco a try and let us know what you think!