BACKGROUND
Literator is a paid desktop and free mobile app that works as a teacher's aid to help teachers monitor and improve children’s literacy. Literator's free mobile app collects one on one reading data and uses it to provide students with personalized literacy education. The paid desktop version includes additional teaching tools and resources that add value to the teacher's experience. In an effort to add even more usability to the desktop app- the Literator team created a packet of customizable worksheets for students.
PROBLEM
Where can the addition of the student reading workbook be added to the desktop application that will feel natural and coexist well with the pre existing design ?
SOLUTION
Create a space for student worksheets universally on the upper navigation of the desktop app, as well as within the student section. Give teachers the ability to download or print the entire worksheet packet for the entire class at once or as needed.
Research
MARKET ANALYSIS
To understand how Literator's competitors were implementing worksheets, as well as recognize potential design trends- I made a competitive analysis of 5 of Literator's most direct competitors. Although none of these apps occupy the exact same space as Literator, they are all apps that serve as teacher's aids in some way or another and are therefore valuable to observe.
KEY PATTERNS
-
Use of word "Resources" to categorize student worksheets
-
Grid layout
-
Card layout to display initial view of worksheets
-
Ability to preview close up of selected worksheet
Design
USER FLOW
I started by creating a user flow that would serve as a backbone for the design iterations I would create.
LO-FI ITERRATIONS
From there, I started sketching out design concepts, keeping in mind the design trends I had observed in market analysis. Since every competitor I observed used a card formation, it seemed natural to display the worksheets in this way, no need to re invent the wheel when there is already a standard way the user is used to seeing information displayed. I drafted two design concepts at low fidelity.
Recruit
Since Literator's target user is a teacher of grade 3 and below, my recruiting was very targeted. I began recruiting for each round of usability tests I started by reaching out to Literator VIP members, then a database of individuals in Literators database who had expressed interest in potentially being interviewed. Once I ran out of subjects to contact, I used craigslist to recruiting users. The ad included a survey meant to weed out ineligible candidates from being interviewed.
Test
To make my design concepts as user friendly as possible I took them through 3 rounds of user testing. All usability tests were carried out via google hangouts. I used loom to record my interviews and annotated them afterwards using the video.
ROUND 1
The first round was a simple A B test checking teachers preference of sidebar or top navigation. All users I tested with preferred/were drawn to the upper navigation. Choosing to place the student reading workbook in the upper navigation also leaves room for growth; If Literator decides to create more worksheets or resources for students, it would be easy to add them here.
“Resources make sense to me. It’s a different enough category from Students and Groups that it should have it’s own section
-Jessica H 1st Grade Teacher
ROUND 2
I moved forward with upper navigation created several different UI iterations that I took through two more rounds of testing. next two rounds refined the usability of the product. This user journey illustrates our target user going through the process of printing out the student workbook packet for her entire class.
DESIGN PANEL FEEDBACK
Presenting my design ideas to industry experts helped to affirm what concepts were relevant and plausible to create. It also helped further refine the UI and give me feedback to make the final product as visually appealing and on brand as possible. The final design is a composite of the more colorful card design with the more subdued card design.
Below I call out some of the most notable design iterations made in response to user testing and design panel feedback.
Check out the clickable prototype HERE.
TAKEAWAYS+LESSONS LEARNED
Allot enough time for the recruiting process
Recruiting users from Literator's current available members and from paid posts on Craigslist was more time-consuming and challenging than I expected. I ran out of members within the Literators database within the first two rounds of testing and used only Craigslist from there.
Plan for a high number of user testing cancellations+recruit more than you need
I noticed the level of feedback I was getting decreased from the first round of tests as I was talking with paid users vs. paid users. I would leave the initial tests (A/B testing) for paid Craigslist recruiting and save the more important final rounds of testing for Literator members. I had planned on doing much more user testing, however, about 50% of my user tests were canceled or did not go through without an interview in one way or another.