Meet Kristen (a fictional user). These studies describe Kristen's experience on Whooosreading before and after these designs.
4th Grade, Hills Elementary
Always looking for ways to integrate technology into the classroom.
Kristen uses the site for a variety of tasks, such as, editing student or class information/settings, logging reading (for students), sending notes/coins (to students), adding/uploading students, adding classes, and retrieving (student) login information.
Previously, these actions were all on separate pages and the links (for these actions) were spread between the home and settings pages (images of that experience below).
Kristen's experience was laborious and time-consuming for three reasons:
- The tasks were spread out over a number of pages. For example, to log student reading, add new students, and send a note, Kristen would go to three different pages (via their links). Already crunched for time, Kristen was losing time on the site.
- Navigationally, the groupings of the different actions didn't seem to have much of a connection either; making it hard to know where to go. There were categories for Students, Classes, and Editing Information (both for students and classes). Additionally, a few tasks were just placed by themselves (as Quick Links). Kristen found the groupings confusing even after using the site for a while.
Some of the actions were rigid in that they could only be performed for all the students or one individually.
A common scenario: Kristen wanted to award 5 students from two of her classes with 50 Wisdom Coins for their independent reading from the previous night. Without support for batch processing (taking action on/for numerous students at once), she had to do all the work manually (award each student the coins separately) and was again losing even more precious time.
Create one place and system for Kristen to perform any of these tasks at once. Additionally support her multiple classes with the ability to perform any of these tasks on behalf of multiple students-quickly, all at once, and and without having to sort through a giant list of student names.
Some of the inspiration for the design came from Class Dojo, a highly popular classroom-management tool that is easy to use and beautiful. Their first screen has a list of your classes (on cards/tiles). On this page, you can do two things: add more classes and change your class-settings. The class card brings you to a students (of that class) page, where you can select (any or all) students and take a variety of the actions (from their toolbar). Additionally, clicking on a student card brings up the student information and settings which can be changed.
We took a similar approach to Class Dojo's, but with a few
Similarities to Class Dojo:
- Students can be selected and batched for different actions.
- The batch-able actions are on a toolbar and clicking on an action brings down an interface with the relevant forms and details.
- Clicking on a student brings up their information for viewing and editing purposes.
How we differed and why:
Class Dojo had the students of each class nested within that class;to get to a student, you first click on the class and then the student. We wanted all of a teacher's students (across classes) laid out at once. This way the teacher could more easily view all their students and select students across classes (for the given action).
Clicking on a student brings up their account information (which can be edited). Making the student selectable (for batching purposes) was challenging. To make the student selected without bringing up the modal, we added a checkbox on the corner of the student card-that would make the student selected without triggering their informational modal.
After signing up for a new account, teachers were introduced to the site via an onboarding tour. The tour introduced them to a handful of the site's most important features and interfaces. Kristen never really understood the tour and didnt find it particularly helpful.
Create a more helpful, elegant, and usable onboarding experience. The metric to gauge our efforts was the percentage of 'active' teachers (post onboarding).
book and principles was our starting point and guide throughout the process.
After reading and discussing the book, we came up with a gameplan:
the goal was to get Kristen to accomplish a few tasks (both from the student and teacher perspective). The purpose of this was twofold: a) she should see/feel the product in action, b) she should see the value of the product as well (by accomplishing tasks and 'getting some wins').
Whereas before the onboarding/tour was nestled within the regular flow of the product, we decided to separate the onboarding process out on its own. This would keep the interface really focused and prevent her from getting overwhelmed (and fleeing the scene). Kristen would log in and an onboarding modal (that is not able to be clicked out of) would appear over the page.
Kristen would then proceed to complete a task (on the right) and when ready click "next." Accompanying each step, there is a testimonial (and picture always fading in on the left) from one of our users about the given step. This provides real life validation and humanizes/personalizes the experience for Kristen as well.
This revamped experience brought close to a 10% increase in 'active' users (post signup and onboarding).
Student Incentive Creation
Kristen wanted a way to incentivize her students to accomplish different site-wide goals such as, reading and raising money. Essentially, she wanted to be a able to create incentives where those students who met the requirements would receive a prize.
Two examples of incentives we wanted to support: a) The first 5 students to answer 20 questions (about their reading) will receive a cotton-candy. b) The class with the most minutes read between May 1st and June 15th will receive extra recess.
Build an interface where teachers go to view and create their incentives. Each incentive would have details, requirements, dates, and a selection of prizes.
This was challenging for a variety of reasons. Each contest has a number of fields and we didn’t want the form to take up a whole page. Rather, we wanted the creation interface to be layered on top of where they would view their current incentives. Secondly, we needed to explain this incentive concept (without devoting a whole page it) and how it worked.
The layout was a modal that had within it a two-step process. To introduce and explain the ‘incentive’ concept we placed examples of what an incentive would look like to the left of the given step. Additionally, the examples would be within the incentive form’s format (screenshots of the form filled out) to habituate Kristen to the interface.
In the past, Kristen's home page was centered around her newsfeed. The newsfeed showed the activity of her students-such as starting a new book or answering questions about their reading. Kristen could like, comment (on), or grade the writings of her students. The sidebar of the home page had both a variety of 'Quick Links' for some of the most popular functions and a list of Kristen's students (each one was a link to that student's profile).
The challenge was two-fold: 1) Research and figure out what should be the main and secondary focuses of the home page. 2) Use the research/findings to design a layout and page that provides Kristen with her most important functions and information.
A lot of the challenge was in breaking away from a more open experience, and limiting the functions and links on the page, i.e. shaping the experience more directly. After numerous discussions internally (including heated debates about the newsfeed's prominence), we produced two mockups of a potential dashboard/home page and sent them to some of our most active users for feedback:
Both versions mostly focus on the same set of actions-Entering Donations, Student Roster, and Viewing/Creating Incentives (the buttons on top).
The main difference between the two versions is the focus of the page. Version 1 has a buttons tab that allows toggling between the newsfeed and the fundraising summary information. Version 2 does not have multiple tabs; the newsfeed is the only visible information (below the action buttons). However, it does have the Participation Stats on the side-bar (on the left).
Our teacher feedback provided us with a little bit of each version. Version 1 was strongly favored because of it's toggling (provided more information in one place). Teachers loved that Version 2 had the participation stats on the sidebar (which was kind of a dead space anyways).
Ultimately, we saw that the fundraising summary was very important to teachers. The newsfeed was still valuable but would no longer be the focus of the page (still accessible but not the default 'active' tab). Lastly, we saw that teachers wanted to know at a glance what was going on with their students (either their school or class specifically).
One of the ideas going into this project (and was something we tried repeating) was that there are nuggets of valuable information that teachers value and want to see effortlessly (without digging for it or going to an entirely new page). At a glance, teachers can now see class participation rates and what a given student has read in the last 48 hours.