Designing the onboarding process + illustrations


Heard is an app centered around school communication, used by parents, teachers and administrators to keep each other updated about school related issues and events.

The Challenge

How can we design an onboarding experience that aligns with both user and business goals, while also accounting for existing and non-exisiting users on both ios and desktop platforms?

My Role

Working in a team with six other UX designers, I was involved in the entire process except for the hi-fi design. Instead of hi-fi, I led the the illustration process of the onboarding experience. I introduced the red route analysis tool to the team as well as the user journey map.


User Research | Usability Testing | Personas | Wireframing | Card Sorting | Task Flow | Prototyping | Vector Illustrations | Lo/Hi-Fidelity Design | Sketch

The Process

Understanding the User

Affinity Map using information gathered from user interviews

Research Process

In order to create a seamless onboarding experience, it was important for us to focus heavily on research and understand pain points surrounding the current app. We conducted user interviews with parents and teachers, created personas, affinity and journey maps, and used the Jobs to be Done framework as part of our research process.

Usability Testing and User Interviews

Through usability testing and interviews, we were able to discover common themes amongst new users of HEARD:

  • Even after signing up, parents still did not understand what HEARD was used for.
  • Parents were worried about privacy and found the amount of information requested by HEARD off-putting, especially since it involved their children.
  • Parents questioned HEARD's legitimacy since their school name was absent from the e-mail invitation.

Current users of the app also complained that:

  • Too many notifications were received
  • Settings were hard to find and understand

User Journey Mapping

Using comments and information we received from the interviews, I created this journey map to illustrate the emotions that the user would feel during the current onboarding process of the HEARD app. This allowed us to visually see opportunities for improvement.

Main takeaways from this journey map was that we needed to build trust and make sure users understood the unique value proposition early on. Also, privacy and amount of notifications were a point of frustration for many users.

Narrowing down the scope

Design Principles

With the information gathered from our research, we had a better sense of what concerns parents had when using HEARD. With this in mind, we created a set of design principles to adhere to for the rest of our decision making process.

  • Build trust with users before asking for personal information
  • Every function needs to provide value
  • Minimize cognitive load through consistency

Red Route Analysis Tool

To figure out which aspects of the app we should focus on and highlight during the onboarding process, we used the "Red Route Analysis" tool. We created a list of tasks and sorted them by asking two questions:

  • How many users need this function?
  • How often do users use this function?

Through this analysis, we determined that the main priorities to focus on would be the actions that fell on the two right columns of the chart.

Ideation of the onboarding process


After consolidating our research information, we began to sketch out ideas using wireframes while keeping in mind the design principles that we had established.

We wanted to create an onboarding process that highlighted the unique value proposition early on so that parents understood the importance of using HEARD. We also determined that the minimum pieces of information (other than the signup info) needed in order to get the best experience out of HEARD included:

  • Photo: So parents can recognize other parents (as expressed in the user interviews)
  • Child's name: So parents can associate the child's name with the parent
  • School: Assures that parents are joining the right community
  • Classroom: So parents can get the most relevant information as it pertains to their child

In keeping with our design principles, we felt it was important to explain the benefit of giving the information while also assuring the user that their privacy would be respected.

Wireframe sketches
I was responsible for illustrating and creating the welcome/signup screen and empty state prototype
Lo-Fi prototype showing the unique value propositions

After our first round of usability testing with the lo-fi prototype, we uncovered several areas that needed to be improved.

  • Users wondered why their information was auto-populated; not knowing where the app took this information created a sense of distrust with the users
  • Users did not want to create a post before seeing the news feed
  • Users liked that the settings were pointed out since it was not obvious during the initial onboarding

Creating onboarding and empty state illustrations

Working with one other team member to create the illustrations, we started by brainstorming different ideas, words and emotions that we felt correctly portrayed HEARD's image. Taking feedback from the initial lo-fi iterations, we had at least a basic runway to guide our ideas.

  • The monster character was well received so we decided to think of other illustrations that would put him more in the spotlight while still getting the message across
  • We wanted the illustrations to be child-like, whimsical and non-literal; perhaps playing off of children themes
  • The illustrations needed to portray the copy
Initial rough sketches I created for the UVP screens
Early phases of hi-fi illustrations

Initial illustrations didn't match the audience

After some feedback, some users felt the illlustrations were too "childish" and did not target parents of grade school children. We went back to the drawing board to think of new ideas for the empty state and communication UVP screens.

Final Illustrations

Final illustrations for onboarding