How we used illustrations to bring an app to life

[Editor’s Note: This is latest in a series of blog posts about our collaboration with Eye to Eye, a nonprofit dedicated to improving the life of every person with a learning disability. Our goal for the Making an App series is to help spread the word about Eye to Eye’s important work — and offer a behind-the-scenes look at how an idea becomes an app.]

The process of building a great user experience begins with research, and extracting insight from the information you gather. But insight alone isn’t enough. You need empathy. As you get started designing any app experience, you need to be able to get outside of your own head and into the mind of your user.

For our recently completed Eye to Eye Empower Different Learners app, that meant empathizing with the 1 in 5 students that have learning disabilities. Eye to Eye, a non-profit run by and for people with learning differences such as dyslexia and ADHD, is a physical network of more than 150 schools across the U.S., where “Mentors” and “Mentees” come together once a week to create art projects specifically designed to share similar experiences while building social emotional skills such as self-esteem and self-advocacy.

In our previous post, we talked about how we explored different approaches to the overall UX — and how we could transform the physical experience of participating in Eye to Eye’s classroom setting into a digital one that could be experienced by millions of other children without having to live near one of the chapters.

The design challenge was self-expression. Specifically, how could we help children using the app achieve the same goals of the classroom art to foster self expression, but knowing that the student may not have access to art supplies?

Translating experiences

Mobile devices provide a lot of input options, and there are already plenty of apps that allow you to sketch and paint using your fingertips. But we understood that without a teacher to guide and motivate the student, the experience of painting and drawing on a device might be too complex or frustrating.

So we decided not to build a drawing board, but instead create a toolkit that would allow the students to more easily express themselves. Then we worked with our friends at Eye to Eye and came up with a different approach: Instead of having users doing actual on-screen drawing, we would provide elements and illustrations that function more like stickers. So the app user experience centers on combining different pieces of digital artwork and their own portrait into collages and composite images.

This simple shift helped us refine the experience, and we quickly became confident that we had a solid concept.

Early sketches.

Establishing an illustrative style

Once we decided on the format, we needed to establish a design style in order to create the illustrations. Defining the style came back to understanding our users’ needs. The typical Eye To Eye student is 10-14 years old, but the app can be used by anyone from elementary to high school age. We performed inspiration research to learn more about the students’ perspective — including meeting with Eye to Eye Mentors and staff and looking at some of the classroom artwork students had completed. We drafted some early sketches (above) that were in a cartoon format to try to make the app fun and creative. But we weren’t quite happy with the tone.

Even though older students could relate to a cartoon character, many younger students are eager to stop being called kids. In our research, we found out they didn’t respond well to a cartoon character, regarding it as “too childish.” So, back to the drawing board.

By interviewing Eye To Eye staff, we learned more about the kinds of cultural references that inspired students. Together, our teams came up with a new approach. We believed that if we used a super hero theme, and then adjusted the tone to be more “cool teenager,” this would inspire a range of students, from young to old.

Comparison of the early cartoon sketches (left) and the final “cool teenager” look (right).

We tested this superhero style with the client and target users and were confident we’d nailed the tone with these illustrations. But there was another challenge: how to make these characters fun and dynamic, but also both gender and ethnically neutral.

It’s all about the pose

In parallel to the style studies and exploration, we created a list of qualities, activities, places and objects based on specific attributes the students could relate to. So a completed collage would not be about a character alone, but a complete and meaningful scene.

That way, a composite image could include a combination of attributes and communicate things like: I see myself as a ninja, I like math, I feel safe in my room, my favorite food is pizza and I’m known for being a good friend. These meaningful traits would be composed with a portrait picture of the student, along with balloon messages, a background scene and props.

We started with characters that had simple and symmetric body shapes, but these simply illustrated the look but not the attitude. We realized we needed a more dynamic approach, focusing not only on the visual style but movement. After all, super-heroes aren’t static. With this illustrative style, students could express themselves in an aspirational manner and feel like a ninja, a wizard, a super-hero.

Comparison of the early symmetric bodies (left) and the more dynamic, asymmetric ones (right).

Whether you are creating characters and scenes for an app or game, it’s important to pay attention to the silhouette. Is all about the pose and the contrast. The characters need to look and feel different in a glimpse, so we have a jumping ninja, a speedster running, a flying super-hero, a wizard with a mantle and pointed hat, and more.

Sketches of the dynamic poses. The characters are always in the middle of an action.

Every design process is a sequence of choices, you start with a broad but fuzzy universe of possibilities, then explore, combine and narrow down ideas to materialize a concise and consistent style. At this point in the project, we’d defined the tone, the visual language and the attitude of our characters, so the process of finishing the artwork became just a matter of rolling up our sleeves, putting some music on our headphones and finishing off the illustrations with some subtle details.

Example of one character from sketch to final artwork.

Putting things together

As I said earlier, the purpose of the Eye to Eye app is to help students express themselves through artwork. To do that, we wanted to avoid excessive text information, and create meaning with every illustration — and allow students to create their own unique combination of images by choosing their superpower, favorite food, favorite activity and safe place. The finished artwork becomes part of the My Advocacy Plan (MAP), a self-advocacy tool that all Eye to Eye mentees create to explain who they are and communicate their learning needs.

To make things work together, we need to think as designers and create not only great illustrations but a visual system that makes it possible to build an entire scene. The student’s portrait, for example, needed to be fixed in the same place for each pose, as did their hands, for holding their favorite food. With these dedicated locations, we didn’t need to re-create the entire screen for each custom option, allowing us to create a more coherent scene. So with a few simple tricks, we were able to create a powerful tool for self-expression, with just a handful of individual assets.

Examples of different scenes with the hand and head at the same place.

As the first-generation app, this was a minimum viable product (MVP), meaning that we wanted to create a foundation that we could build upon — but not spend too much time creating an endless amount of assets in advance of more real-world user feedback. We created the right amount of illustrations for version 1 — and built a foundation for growth. We designed the app as system, so the scenes and props work together, the proportions of the assets look right, and objects don’t overlap and hide each other. It’s also something we could easily build upon, adding new pieces of content as the app matures.

Final composite scenes, including background and props.

Illustrations bring user journey to life

When you strip away the color and consider only the step-by-step logic of the Eye to Eye app, it’s really straightforward: users fill in some forms, input some personal information and make some content choices. It could, in theory, be a step-by-step text-based app. But that clearly wouldn’t serve the purpose for Eye to Eye students. The artwork and the process of creating it is the soul of the app, just as art is the pathway to the soul in Eye to Eye in the classroom.

Great apps are never just a form. And to design and ultimately build a great app, you need insight and empathy for your users. From our first app strategy meeting with the client, through the whole design and engineering process, we got to know more about the students and how Eye to Eye works, so we could design this tool to help Eye to Eye help students it couldn’t reach before.

Much like education, design is not an end by itself, but more of a process to achieve a goal. When you have a challenge, you do research, learn something new, adjust what you know, and (hopefully) become inspired to approach a problem in new ways.