WURRLYedu Onboarding Redesign

Tablet.png




Meet WURRLYedu

With arts education budgets cut in schools across the county, WURRLYedu is an affordable, comprehensive tool for music education. Teachers manage students, lesson plans and assignments through a web-based portal, and students complete assignments and collaborate with their peers with a mobile app (Android and iOS). A catalog of lesson plans, and a wide variety of music make WURRLYedu a plug-and-play option for busy teachers, and an engaging tool for students.





Role 

UX Designer

Tools 

Sketch, InVision, whiteboard

Key Skills

 UX Design, User Research, Prototyping, UX writing

Project Length 

1 month, in progress


The Problem

The process of onboarding a new user was clunky. In a round of focus group testing, we found that users were unsure of how to use the product after they signed up for a free trial. Additionally, access to the product’s core functionality was dependent on the user setting up a classroom — a process which most users did not want to invest the time into until after they were sold on the benefits.

Original Onboarding

 User must set up classroom before accessing the web portal  User: “Can I skip? Can I explore? Do I have to do this now?”

User must set up classroom before accessing the web portal

User: “Can I skip? Can I explore? Do I have to do this now?”

 After classroom set up, user is dropped into this view  User: “Now what?”

After classroom set up, user is dropped into this view

User: “Now what?”


 From focus group session

From focus group session

 

Initial Research

In addition - our data showed low conversion rates from trial users to paid users. The majority of the trial users did not make it through the classroom setup, and therefore could not have had the chance to explore the other features. This was a major block that I wanted to clear.

The users that did make it past the classroom set up had some sort of warm introduction to WURRLYedu, either by attending a product demo session, or through contact with our customer success representative. These users also had some sort of engagement with the product and had saved lesson plans and/or sent out assignments to students.

This told me: there are different engagement outcomes for trial users vs “warm” users. My assumption was that warm contact with the team allowed these users to quickly have any questions answered and benefits explained to them that removed friction and encouraged product use. As the product grows, however, this level of personal attention is not scalable, so the question I asked myself was:

How can I create an onboarding experience that gives users a clear understanding of how to use WURRLYedu and also allows trial users to explore without commitment?


User Types

I defined rough different user types so that I could better understand the use cases and opportunities for each for onboarding, (and beyond). Understanding the nuanced goals and opportunities for the trial v.s. warm users gave me a more holistic perspective to approach onboarding with.

 
 Because the product is new, our users were mainly trial and warm users. Our definitions of active and power users are in progress as finding the best way to define these.

Because the product is new, our users were mainly trial and warm users. Our definitions of active and power users are in progress as finding the best way to define these.

goals and ops.png

 

Who’s doing onboarding well?

I also looked at companies and brands who were doing onboarding well in our competitive space and beyond. I liked the idea of showing users how to use the product, in the product itself. I also liked the idea of having demo content or examples of classroom applications to accomplish the goal of exploration without commitment, a suggestion that our CTO thought might work.




Screen Shot 2018-10-12 at 12.14.40 PM.png
Screen Shot 2018-10-12 at 12.15.52 PM.png

 

Design

Before I started designing, I fleshed out the things I definitely wanted to include and exclude in the onboarding flow based on my research, and my conversations with the customer success representative. I used the MoSCoW method to organize these:

  1. MUST: Show users what they can do on each page, and guide them through setting up a lesson plan (no dead ends!)

  2. MUST: Save onboarding resources so users can refer back to it at any time

  3. MUST: Organize form fill information into logical sections (opposed to long forms)

  4. MUST: Have a copy/paste function so teachers can easily add their student rosters manually

  5. SHOULD: Allow users to drop into the product quickly

  6. SHOULD: Make the experience feel less like a transaction and more like a friendly, helpful introduction to WURRLYedu

  7. WON’T: Require classroom set-up as a necessary step in onboarding

  8. WON’T: Ask for unnecessary information in form fills

brandperspective_blank.png
 

Success looks like…

I initially envisioned “onboarding” to be a specific set of pages or modals that a user walks through in order to get their account set up. As I was designing, however I realized that we needed to expand our definition of onboarding and define what a successful onboarding experience looks like based on both company and user goals so that we could reflect and revise as needed. I worked with our program manager and key stakeholder (CEO) to finesse these. We landed on:

Onboarding (definition): A new user’s initial experience on each page of the product

A successful onboarding is when: 1) teacher sets up a classroom 2) teacher saves a lesson plan or adds an assignment to a class (shows they are able to use the product)

From there I broke down the user flow for the onboarding experience so that I could visualize the steps required to complete these tasks.


Original onboarding flow - (10 steps to drop into web-portal)

Screen Shot 2018-10-12 at 2.04.03 PM.png

Revised Onboarding Flow (3 steps to drop into web portal + guided instruction on each page)

Screen Shot 2018-10-12 at 2.21.35 PM.png

 

Medium Fidelity Wireframes

Based on our priorities - I first focused on designing the process of adding students to a new classroom. I also revised the product copy to accomplish the goal of having a friendly and approachable tone.

 
 

 

Next Steps

  • Final UI design (in progress)

  • Build out the demo content and tour overlay on each page

  • Usability testing with warm and trial user types (in progress)

  • Revisit success metrics for onboarding periodically

Retrospective

Although this project is in progress, I started thinking about what can be improved for my upcoming design sprints. My biggest takeaways from this sprint were:

  • Think systems, not features - in the early stages of ideation, I skimmed over how introducing new elements would impact the product overall, from the consistency of the design across different pages to the back end functionality. I now know to ask myself, “how does this affect the overall ecosystem?” when introducing a new element.

  • Design for edge cases as much as possible — if there’s a lot of content, if there’s a little, if the user is logged in, if the user is new, if the user is on a trial… thinking of a variety of use cases in ideation will help make my design bulletproof.

  • Have a more structured design ideation process - on a UX team of one I found myself going down unnecessary rabbit holes. After chatting with a more senior product designer friend of mine, I got some ideas of how design teams of different sizes structure their ideation (Google’s crazy 8’s for example), and I have some ideas of how I can adopt them for myself.

  • Continue to ask for input from team members. Ideas are stronger with different perspectives. Asking for input from engineering, marketing and customer success helped me understand the problem better, and helped me see some of my blind spots.