It’s not breaking news that teachers are using technology in their classrooms more than ever. Public schools in the US now provide at least 1 computer for every 5 students and spend more than $3 billion per year on digital content. With their already packed schedules, teachers don’t have time to figure out websites and apps that are complicated and unintuitive. A key feature determining whether using a website feels simple and easy is the site’s information architecture, or IA. IA is the underlying structure that defines how the contents of a website (or any repository of information) are classified and organized.
Good IA goes unnoticed, allowing the user to navigate the site and find what they are looking for without a second thought. Bad IA makes itself obvious, and can often be the culprit of a frustrating user experience. My local supermarket, for example, continues to baffle me in the way that its goods are organized. On a hunt for peanut butter, I see the jelly and think to myself, “I must be getting close.” But alas, it’s hiding 4 aisles down, next to the olive oil, inexplicably.
This summer at NoRedInk, the product team embarked on a project to redesign the information architecture of the teacher side of the website. We hadn’t audited the IA since its launch in 2012, and we wanted to ensure that creating an assignment and viewing student results were as easy as finding the peanut butter next to the jelly. As with everything we do, the project focused heavily on user research. We utilized a variety of methods to get to the core problems with our IA and evaluate potential solutions, resulting in a final product we think teachers will find welcoming and intuitive when they come to NoRedInk this fall.
Phase 1: Gathering and synthesizing teacher feedback related to IA
The first step was to examine where our current IA wasn’t working well. We spoke to members of our Support, Customer Success, and Partnerships teams about feedback they’ve collected from teachers regarding usage challenges on the site. These teams interact with teachers every day, responding to support emails, conducting professional development training, and giving demos of the site, and they had great insights about common navigation pitfalls on the website. For example, the Support team tracks all the emails we get from teachers about specific problems or requests. The second most common issue reported this past school year was not being able to add new students to existing assignments - a problem we knew could be fixed with better IA.
We then conducted interviews with teachers who had recently signed up for NoRedInk in order to understand which aspects of teacher functionality were easy to do right way, and which parts of the site were more likely to go unnoticed. We learned that a few key aspects of NoRedInk - the different types of assignments we offer and the ability to track students’ mastery levels - weren’t always immediately clear to teachers in their initial experiences on NoRedInk.
Phase 2: Card Sorting
Once we knew the major problems with our current IA, we started to design solutions. Instead of building off the existing model, we wanted to give ourselves the freedom to start from scratch. So we began by listing out all of the teacher-facing pages on NoRedInk and experimenting with new ways of organizing the pages. Using a method called card sorting, we had teachers do the same. Card sorting is a tool that helps uncover the way users intuitively group and categorize the pages and functions on a website. The user is presented with a long list of the website’s contents, like “Preview an assignment,” and asked to sort them into categories and give each category a name. We recruited teachers who had never used NoRedInk to avoid bias from familiarity with the current structure. The card sorting tests revealed that participants largely agreed on the overarching categories on NoRedInk: Assignments, Student Performance, Classes, Settings, and Instructional Resources. From there, we had to drill down into the finer details of where more specific functions would be found and what to name them.
Optimal Workshop, the tool we used for card sorting, analyzes the results from each participant and quantifies how frequently cards were sorted into the same category.
We took what we learned from teacher interviews, support data, and card sorting to the drawing board, and each member of the product team mapped out some new structures. We had a brainstorming meeting in which we taped hard copies of the sitemaps up on the wall and went around with stickers to mark the ideas we liked the most.
Ideas of new sitemaps from our team brainstorm.
Phase 3: Tree Testing
Our brilliant designer Ben synthesized all of these ideas into two new versions of the IA: one that was more similar to the existing site, and one that was more “class-centric” - using a teacher’s classes as jumping off points to other parts of the site. We used a method called tree testing to evaluate whether the new versions made things easier to find compared to the existing IA. In a tree test, the user is presented with a hierarchical list representing the contents of a website and several tasks; the user clicks through the list and selects the places where they think they’d be able to complete the tasks.
A screenshot of one of the tasks in the tree test. Based on the feedback we heard in our initial research, we wanted to make sure that teachers could find where to add new students.
The data we collected from tree testing included where the participants expected to complete the tasks, the paths they took to get there, and how long they spent looking. We conducted several rounds of tree testing with participants who had never used NoRedInk before. After each round of testing we made changes to address places where participants were still having trouble. Sometimes we simply renamed a feature, like changing “Student Leaderboard” to “Top Performers.” Other times we changed the location of a feature, or added another way to navigate to it. All in all, we tested 7 different iterations until we came to a version that nearly all participants completed correctly and quickly.
Phase 4: New IA! Final Design and Validation
Ben transformed the final version of the IA we developed during tree testing into a beautiful new design for the teacher side of NoRedInk. The updated layout features a new menu bar with some renamed pages. “Lessons”, for example, became “Curriculum,” a clearinghouse for our scaffolded pathways, lessons, and tutorials designed to address a pain point we frequently encountered during our research: many teachers weren’t aware of the full breadth of curriculum available to them on NoRedInk. We also added a prominent sidebar menu where teachers can manage their class settings, including student rosters. The biggest change in the new IA is the class-centric teacher dashboard, where teachers can view their classes, see what’s upcoming for the week and how students are progressing on assignments. We knew from our research that those were things that teachers want to see right away, and we organized them front and center so teachers can jump quickly into assignments or student data being better informed about the current state of their classes.
To validate the new design, we tested a working prototype to see whether the real layout, compared to the more artificial layout in the tree test, was still just as easy to navigate. We tested with new users who had very little experience on the site and with NoRedInk Ambassadors, who use the site regularly. The feedback we got from both groups was hugely positive, with multiple teachers using the word “streamlined” - exactly what we were going for.
Our current dashboard (left) and the new design, not yet in production (right).
What we learned
Looking back, the most important source of information was teacher feedback, via the Support and Customer Success teams and directly through interviews. That feedback heavily influenced the solutions we designed, and tree testing was a great tool to fine-tune and validate them. Card sorting, though a common and logical place to start when it comes to IA, didn’t tell us much beyond what we already knew. A better way to start might have been to brainstorm creative ways of getting teacher feedback related to IA that eventually drove our final solution. We’re really excited to release this more straightforward, user-friendly IA to teachers this fall!
At NoRedInk, our product team is deeply user-driven, and we are consistently pushing ourselves to find even better ways of getting feedback from teachers and students. If you’re passionate about building a product that teachers really want, our team is hiring— we’d love to hear from you!
Christa Simone is a User Researcher at NoRedInk, leveraging research and data to help build a product that teachers love.