Procreate & Reference Images: A Relationship Revisited

Product Design
Objective
Making the process of using reference images in an art piece in Procreate less obtrusive, with less steps and less hassle. Since reference images are useful in essentially any step of art-making, this feature makes the reference image more of a tool the artist can use rather than an obstacle they have to maneuver around constantly.

Long-term goal
Additional reference image usability will Procreate easier and more appealing for use to a broader audience.
‍
Role
Led the design of the reference image implementation feature.

Note
Around the time I finished this case study, Procreate updated their app with reference image implementation. See the "Procreate's Update" for my thoughts and critique.
Overview
Scope      Interaction and Design
Platform iOS
I conducted interviews with artists of different trades (3D modeler, pixel artist, dressmaker, digital illustrator, graphic designer) to get their insight on what kinds of programs they prefer to use for art and the benefits of each.
From here, I decided to focus on creating a feature that would help Procreate hold its own against computer-based programs that typically have the advantage feature-wise. These conversations led me to the following opportunities:‍
The key takeaway I got from my interviews was that while Procreate is cheap and convenient (if you already own an iPad or iPhone), it does not have as many features as its counterparts (Photoshop, Clip Studio Paint, etc).
How might we provide more features to users reminiscent of computer-based apps?
How might we create a more seamless drawing experience?
How might we make new artists feel familiar and comfortable with Procreate?
Research
Map
Below is an overview of the experience as it stands today, identifying the step of inserting an image onto Procreate as the focus for this project; this step dictates the rest of the user's workflow on an art piece, making it an essential step to streamline.
I focused on how we could create a more seamless drawing experience because using a reference image should be quick & easy and not like pulling teeth -- which is what the process feels like right now.

To quickly generate a number of different solutions, I started exploring ideas with low-fidelity sketches.
8 low-fidelity sketch ideas I sketched out containing different potential solutions.
The idea I decided to go with in the end. Reference images would work like artboards that would exist off and around the canvas that could also be moved around on their own.
The runner-up solution resembled PadOS's built-in multitasking feature with a sidebar.
Exploring Solutions
After choosing a direction, I set out to more explicitly define design goals and success criteria:
Artists will be more inclined to use Procreate if they can use reference images more easily.
Importing reference images and implement them like an artboard in Procreate will be easy for users to understand.
Implementing reference image usability in Procreate will help users work on their pieces more easily (with less obstruction, more time spent on the flow rather than adjusting canvas/layers/etc.).
Storyboard
My user’s journey began with wanting to use a reference image for their art piece and ended with them being able to reference it with ease. Other important moments included:
‍
‍1. being able to move boards around easily
2. having a separate tab for boards and layers so each can be navigated easily
3. borders around reference images to distinguish them between other boards
Highlight 1: 
Boards are transformable like layers & can exist outside the canvas. Multiple boards can be added as well
Highlight 2:
Boards can be accessed in a tab separate from layers; layers & boards can be moved without disrupting the other
Prototyping a
Successful Solution
Prototyping a
Successful Solution
I generated a realistic prototype to bring my solution to life and get high-quality feedback from users with Figma. The prototype was carefully created to mimic Procreate's current interface and design layout. Procreate's clean and simple interface is what ultimately drove me to creating the "Boards" tab within a space that already existed.
Prototype
Try out my prototype here!
A click-through of my Procreate Figma Prototype, displaying all the screens created to bring this idea to life.
What changed: the Actions tab of Procreate contains a new option: "Insert Reference". This works exactly like inserting a photo in Procreate now.
What changed: the Boards tab operates similarly to the preexisting Layers tab and lists all reference image "art boards".
I identified target users through my personal contacts and assembled a research script to ensure I got high-quality & unbiased feedback. Interviews were about 45-60 minutes long via video call.

Each user was given the task of inserting a reference image relevant to the image on the canvas. Users were free to explore the parts of the working prototype they pleased, and they all achieved the task with relative ease.

One user remarked how the board function would work well for users who needed to reference often, and found the process easy.
‍
Another user wondered why Procreate did not have this feature within their app yet. "It seems so obvious!" she exclaimed.
User Testing & Evaluating
After completing interviews, I revisited my notes to find large patterns and inform next steps.
Users valued the artboards.
Users appreciated the separation between reference image layers and drawing layers. They also found it easy to understand, which is a plus!
Key Takeaways
The visual difference between a "Board" and the canvas was not distinct enough
Making the border of the reference images to be different colors was a good idea, but was not enough.
My next iteration will include more well-defined borders and the power for users to choose the colors for their borders.
The concept of "Boards" may only be familiar to those who have used apps like "Adobe Illustrator".
A next step for this project would to create an onboarding window or slides to introduce new users to the concept of Boards in Procreate.
Procreate's "Reference Companion" was introduced to Procreate with its 5.1.1 update. At first glance, the update seemed to contain the features I implemented in my case study and more, but after fiddling with the feature for a few minutes I formulated some of my thoughts and critiques.
Procreate's Update
Adding "Reference" to the "Canvas" tab seems somewhat unintuitive for a window that floats above the canvas.
My reference implementation menu was accessible under "Add", implying it was something that would be added to the piece, but not strictly onto the canvas (which was my main objective with this case study).

My design implementation featured just images as reference, but Procreate did well by allowing users to also reference their own canvas like other digital illustration programs do. In that instance, having the Reference Companion on under "Canvas" does make sense.
Procreate's update, Reference Companion, allows users to get a very useful zoomed-out version of their piece for reference.
Reference Companion is good with its scaling and mobility, but restricts users to only one reference image.
The Reference Companion window is mobile and scales well, but prevents the user from utilizing multiple references at a time. The feature could definitely be taken a step further to implement multiple windows, possibly similarly to my concept of having a tab for just Boards.
Reference Companion's options for interaction on its window.