How we brought an app to life with illustrations.

The process of creating a great user experience begins with researching and extracting lessons learned from the information gathered. But insight alone is not enough. You need empathy. As you begin to develop an app experience, you need to be able to move beyond your own mind and in the minds of your users. For our recently completed Eye to Eye Empower app for different learners, that meant empathy with the 1 in 5 students with learning disabilities. Eye to Eye, a non-profit program by and for people with learning disabilities such as dyslexia and ADHD, is a physical network of more than 150 US schools where "mentors" and "mentees" come together once a week to create art projects specifically for this purpose to share similar experiences while building social emotional skills such as self-esteem and self-confidence. In our previous post, we talked about how we explored different approaches to UX as a whole and how we can transform the physical experience of participating in Eye to Eye into a digital environment that millions of other children can experience living close to one of the Chapter. The design challenge was self-expression. Specifically, how can we help children achieve the same goals of classroom art with the app, to promote their own expression, but to know that the student has no access to art supplies? Translating experiences Mobile devices offer many input options and there are already numerous apps that you can use to sketch and paint with your fingertips. But we understood that without a teacher guiding and motivating the student, the experience of painting and drawing on a device could be too complex or frustrating. So we decided not to build a drawing board, but instead create a toolkit that helps students express themselves more easily. Then we worked with our friends on Eye to Eye and developed a different approach: instead of actually drawing users on the screen, we provide elements and illustrations that work more like stickers. The app user experience therefore focuses on different.to combine digital artwork and her 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.Establish a descriptive style After choosing the format, we had to set a design style to create the illustrations. The definition of the style came back to understand the needs of our users. The typical eye-to-eye student is 10-14 years old, but the app can be used from elementary school to high school age. We conducted an inspirational study to learn more about the students' perspective - including meeting with eye-to-eye mentors and staff and watching some of the students who attended the class. We designed some early sketches (above) that were in a cartoon format to try to make the app funny and creative. But we were not happy with the sound. Although older students can identify with a cartoon character, many younger students want to stop calling themselves children. In our research, we found that they did not respond well to a cartoon character and saw them as "too childish." So, back to the drawing board. Through the interview with Eye To Eye staff, we learned more about the types of cultural references that inspired students. Together, our teams have developed a new approach. We believed that if we used a superhero theme and then adapted the tone to be more "cool teens", it would inspire a number of students, from young to old. Comparison of the early cartoon sketches (left) and the final "cool teenager" (right). We tested this superhero style with the customer and the target users, and we were confident that we could set the tone with these illustrations. But there was another challenge: how to make these characters funny and dynamic, but also gender and ethnic neutral. It's all about the pose In parallel with the style studies and explorations, we compiled a list of qualities, activities, locations, and objects based on specific attributes that students could relate to. So a finished collage would not just be about a character, but about a complete and meaningful scene.In this way, a composite image could include a combination of attributes and 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 to be a good friend. These meaningful features would be compounded with a student's portrait image along with. balloon news, a background scene and props. We started with characters that had simple and symmetrical body shapes, but these only illustrated the appearance but not the attitude. We have realized that we need a more dynamic approach that focuses not only on the visual style but also on the movement. After all, superheroes are not static. With this illustrative style, students could express themselves in an ambitious way and feel like a ninja, a magician, a superhero. Comparison of the early symmetrical bodies (left) and the more dynamic, asymmetrical bodies (right). Whether you create characters and scenes for an app or game, it's important to pay attention to the silhouette. It's about the pose and the contrast. The characters have to look different and feel different at a glance, so we have a jumping ninja, a running car, a flying superhero, a wizard with a coat and a pointed hat, and more. Sketches of dynamic poses. The characters are always in the middle of an action. Every design process is a sequence of choices. You begin with a broad but fuzzy universe of possibilities, exploring, combining and refining your ideas to achieve a concise and consistent style. At this point in the project, we defined the tone, visual language, and attitude of our characters, so the process of completing the work of art just rolled up a matter of sleeves, made some music on our headphones, and ended the illustrations with some subtle details. Example of a character from the sketch to the finished work of art. Put things together As I said earlier, the purpose of the Eye to Eye app is to help students express themselves through works of art. To achieve this, we wanted to avoid excessive textual information and create meaning with each illustration - and allow students to create their own unique combination of images, choosing their superpower, favorite food, favorite pastime, and safe place. The finished artwork becomes part of the My Advocacy Plan (MAP), a self-help tool created by all Eye to Eye mentees to explain who they are and their learning needs. For things to work together, we as designers need to think and create not only great illustrations, but also a visual system that allows us to build an entire scene. For example, the pupil's portrait had to be fixed in the same place for each pose as her hands to hold her favorite food. With these dedicated locations, we did not have to recreate the entire screen for each custom option, so we could create a more coherent scene. With a few simple tricks, we've been able to create a powerful self-expression tool with just a handful of individual assets. Examples of different scenes with the hand and head in the same place. As a first-generation app,which meant we wanted to create a foundation on which to build - but not spend too much time allocating an infinite amount of resources ahead of a real world create user feedback. We've created the right amount of Illustrations for Version 1 - and created a foundation for growth. We designed the app as a system, so the scenes and props work together, the proportions of the assets look right, and objects do not overlap and hide from each other. It's also something we can easily build on by adding new content as the app matures. Final composite scenes, including background and props. Illustrations bring the user journey to life If you remove the color and only consider the step-by-step logic of the eye-to-eye app, that's easy: users fill in some forms, enter some personal information, and make content decisions. It could theoretically be a step-by-step text-based app. But that would clearly not serve the students eye to eye. The artwork and the process of creating it is the soul of the app, just as art is the way to the soul in Eye to Eye in the classroom.Big apps are never just a form. And to create and ultimately create a great app, you need insight and empathy for your users. From our first app strategy meeting with the customer throughout the design and engineering process, we learned more about the students and how Eye to Eye works. So we were able to develop this tool so that it helps the pupils of Eye to Eye to reach before. Similar to education, design is not an end in itself, but more of a process to achieve a goal. If you have a challenge, do research, learn something new, adapt what you know, and (hopefully) be inspired to tackle a problem in a new way.