Heard

 Designing the onboarding Experience + Illustrations

Heard_Mockup.jpg
 
 

Overview

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?


The Process

 

Understanding the user

Affinity map using information gathered from user interviews

Affinity map using information gathered from user interviews

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.

Heard_Journey_Map.jpg

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

 

Forming our 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?
Red_Route.png

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

 

Lo-Fi

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.

Diverging: Initial wireframes I created for possible workflows

Diverging: Initial wireframes I created for possible workflows

Heard_LoFi_Wireframe.png
Initial lo-fi prototypes emphasizing the unique value proposition

Initial lo-fi prototypes emphasizing the unique value proposition

 

Testing the lo-fi prototypes with parents

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