Scholastic:
Onboarding Tour
Scholastic's Redesign
During the summer of 2017, Scholastic's Classroom Magazine division was preparing for the roll-out of 12 redesigned websites. These websites were new digital versions for some of their flagship publications, such as Junior Scholastic and Scholastic News. The new sites had a different look and feel, as well as brand new functionality.
My Mission: An Onboarding Tour
While everyone was excited for the redesign, there was also apprehension: What if teachers' struggled to adapt to the new sites? This concern lead to an opportunity for me, as I was tasked with to designing an onboarding tour experience for all 12 websites. My aim: Helping teachers seamlessly navigate the new sites during the busy back-to-school season.
Step 1: Reviewing user test results to uncover challenges
Using Existing Research
To determine which aspects of the site to include in the onboarding tour, I reviewed the results of 30+ user tests of Scholastic's new websites. By analyzing the test data, I learned which features teachers struggled with when adjusting to the new website. Two of these pain points are highlighted here.
Understanding Content Tiles
Teachers did not always realize they could access the full article text by clicking on a content tile. They also frequently did not know what the share icon was, or understand how to use the bookmark icon.
Bookmark icon
Share icon
Clicking within the gray border opens the full article
Finding the E-Reader
Before the redesign, the Scholastic Magazine websites prominently featured e-reader versions of the print magazines. Teachers weren't always sure how to find these on the new sites.
Clicking on the button or image opens the
e-reader
Two Types of Users
While many teachers were apprehensive to explore the websites during user tests, there was a noticeable minority that was willing to dive right in: These teachers would click, scroll and try new features without any prompting. They weren't the target for the onboarding tour, but I knew we needed to consider their needs as well: They needed to be able to use the site seamlessly, free of tour-related friction.
Key Challenge
How do we give teachers the help they need to navigate the site without causing interruptions for those who want to explore the site on their own?
Step 2: Exploring paths while considering complications
The Happy Paths
I started by creating the core flow. This shows how the onboarding tour would work for those who wanted the full experience, and how others could opt-out of the tour altogether.
Accounting for Additional Scenarios
The core tour flow offered an all-or-nothing approach to onboarding. But there were many potential use cases where that wouldn't be ideal. To map these other scenarios out, I considered questions such as:
What if a teacher...
-
didn't take the tour right away, but wanted to access it later?
-
didn't complete the tour in one sitting?
-
wanted to repeat the tour another time?
-
wanted to go back a step on the tour?
Working Across Websites
The tour also needed to work on 12 websites. While all the sites used the same page templates, there were large differences in branding and occasional minor differences in functionality or layout. This meant I needed to consider how the tour would handle cases of missing features on particular site pages and how the tour would look across websites.
Step 3: Collaborating with developers and product managers
Early Wireframes and Prototypes
In preparation for a meeting with developers and product managers, I made wireframes of the tour and put them into an InVision prototype. We planned to discuss feasibility, and I knew it would be helpful to show some of the interactions that I was considering.
Wireframe of the tour "entrance" on the Junior Scholastic website. Teachers who wanted to skip the tour could ignore the banner or close it.
Adding testing notes to my paper prototypes.
Wireframe of a step in the tour. Teachers could exit the tour at any time if they were uninterested. I wanted teachers who exited the tour to later be able to return to where they left off, but this turned out not to be feasible.
Learning Technical Limitations
After discussing my prototype with the team, we collectively made decisions about which ideas were in scope. I advocated strongly for keeping features that ensured the tour would not get in the way of site content. Here's some examples of decisions we made:
In Scope
-
Having the site remember whether or not a teacher had taken the tour, so teachers who had already taken the tour would not be prompted to take it again
-
Having the tour disappear from the homepage after a teacher visited the site a certain number of times, so it would not be in their way
Out of Scope
-
Letting teachers navigate backwards through the tour steps, which would require lots of extra development for only a small benefit in the user experience
-
Creating different visual designs for each brand, as this turned out not to be a priority for our marketing department
Step 4: Creating documentation for clear communication
Annotating for Developers
Once the user flow was agreed upon, I created a UX guide for our developers. Using annotations, the document explained the nitty-gritty details of the tour interactions, This was in addition to the annotations they would receive with the final visual design, and helped ensure they knew exactly what to build.
Business Summary
Our marketing and customer service departments wanted to learn more about the site tour, so I created a guide for them as well. Here, I replaced the detailed annotations with a high-level overview of the tour purpose and functionality.
Step 5: Finalizing content for implementation
Balancing clarity and brand
I wrote the copy for every aspect of the tour. First, I focused on keeping the copy understandable and precise. After talking with a Scholastic editor, I then found ways to make the writing more friendly, as per the Scholastic brand voice.
A visual celebration
I handed-off my wireframes to our visual designers, and explained that we needed a design that would work across 12 brands. In her designs, she captured the excitement of launching new websites. After recommending a few tweaks, the tour was ready for development.
The Tour - Now Live!
Here's a few screenshots (access to these sites is for Scholastic subscribers only).
Result
The site tour went live on 12 Scholastic websites when they relaunched in August 2017. Most teachers who started the tour chose to complete it, a strong sign that they found it helpful!
Want to know more about the Scholastic onboarding tour?