SparkNotes Study Guide Navigation Redesign

User Interviews, Heatmaps, Card Sort, and Tree Testing

From Google Analytics we knew that most SparkNotes users initially enter the site via Google search, landing on specific “interior pages” rather than entering from the homepage. Knowing this, our goal was to increase relevant content discoverability on a title’s interior pages via the Study Guide navigation. 

With a business goal in mind, I used the Double Diamond (Discover, Define, Design, and Deliver) as the problem-solving process to guide my work. 

The SparkNotes team felt that the Study Guide navigation wasn’t well organized. To evaluate it, in the Discover phase we relied on

• 3 usability interviews

• Heatmaps (Hotjar)

• Card sort (Optimal Workshop)

• Tree testing (Optimal Workshop)

This allowed us to gain a deeper understanding by combining both quantitative and qualitative information.

User research (qualitative and quantitative) revealed that users seek out additional content when studying. The Study Guide navigation could be improved to help them find that content.

User Interviews

Creating an affinity map helped me consolidate and analyze the findings from the user interviews.

User Interview Results

• Users scanned the page to find information.

• Googled to find SparkNotes content rather than search on the site.

• Looked at other pages in the same study session to get a better understanding of content.

  • "...I start with the summary and then I realized I have to go for other things."

• Would like an easy way to find other content.

  • "there could be like some things…to just help you get to it [other content] more easily."

• One participant had never noticed the Study Guide navigation until our interview.

Heatmaps

From the heatmaps, I was able to see where user were and weren’t clicking. 

Heatmap Results

• Most clicks were on Summary, Characters, Main Ideas, Quotes. 

• No one was clicking on remaining three items. 

One reason why no one clicked on Teacher’s Handbook is that the majority of SparkNotes users are high school students, so they probably wouldn’t click on a menu item with “Teacher” in it. Even one interview participant was confused why a “teacher” item was there - “I don't know why that’s there and why it's necessary to have this.”

Card Sort

I ran a card sort and a tree trest via Optimal Workshop to assess if the Study Guide navigation and category menus were named and organized intuitively. Was the information architecture structured so that users could easily find the content they were looking for? Was the content grouped intuitively? 

Optimal Workshop’s card sort provided two methods - a Similarity Matrix and 3D clusters - to help us assess if our menu items were named intuitively for given topics.

Card Sort Results

• The current navigation used “Main Ideas” to include topics like Symbols and Themes.

• Users grouped those topics under Literary Devices more often.

• The Similarity Matrix validated that.

Tree Test

35 participants determined how easily users could find content in an in-text only version of our navigation. We focused on four tasks covering Main Ideas, Key Questions & Answers, Further Study, and Quizzes.

In the current navigation, Key Questions &  Answers was a topic in the Summary main category. We choose this as one to test because as a topic it didn’t “feel” correct being in Summary.

Tree Test Results

• 86% of participants failed where to find the Key Question.

• This confirmed that we need to move Key Questions from within Summary. 

Research Impact

Based on the research findings and business goal, I suggested two main solutions.

• Re-organize and re-group navigation menus.

• Make the navigation sticky.

After presenting the research findings and the sticky nav suggestion to the broader content, product, and business teams, they were in agreement with my solutions. 

Re-organize navigation menus

The card sort and tree test showed that we needed to update the navigation menus so they’re more aligned with how users expected to find content.

I worked closely with the Content team and the two Product Managers to re-organize and re-name content based on the research findings. 

This included: converting Key Questions & Answers from Summary to a top-level menu item, renaming Main Ideas to Literary Devices, and moving Teacher’s Handbook into the Teacher section in the global navigation. 

I also restructured the Quotes layout. For popular titles like Romeo and Juliet, Quotes is extensive. Each type of quote (ex. Quotes by Character) had its own column in the menu, which also meant that shorter sections might have one column for only one item.

Also each column in Quotes was named “Quotes by….”. This seems redundant and didn’t frontload the important information a student would be looking for when scanning. To see “Quotes by Character”, “Quotes by Setting”, “Quotes by Symbol” etc created more cognitive load. I suggested removing “Quotes” since the user is already in the Quotes section and needs to quickly find the specific type of quote they are looking for. 

Make the navigation sticky

To broadly address improving content discoverability, I proposed to make the Study Guide navigation sticky. One research participant noted he entered the page, but then immediately scrolled down to find the information he needed. While the current version of the sticky was available, it would only show the page’s title. If he wanted see other available content (ex. quotes), he’d have to scroll all the way back to the top or even Google it to come back to other content he was looking for. A sticky navigation provides an easier and faster way for students to discover other relevant content.

In addition to making the Study Guide navigation sticky, I suggested adding the logo which would link to the homepage and a Sign Up button for the newsletter. 

After final designs were approved by Product and the Business Director, a challenge was handing off the files. I worked in Figma and the UI designer was still in Sketch. SparkNotes dev team was also still receiving manual annotation designs to build from rather than using a collaboration tool like Zeplin (they’ve since transitioned).

I sent the Figma file to the UI designer and helped him transition to using Figma. We also made some last-minute changes including taking out the newsletter sign-up CTA. It was just extraneous content in an already full sticky nav. 

Two biggest contraints - Lack of research budget and working with high school students

Two large constraints we worked within were the minimal research budget and minors as a target audience. The budget restricted the breadth of the tree test and card sort due to using a free plan. However, I still felt that any feedback gained would be helpful. We recruited participants via the website and through friends and family. 

Since our target audience are high school students, in order to provide compensation for completing either study (tree test or card sort), participants would have to fill out a consent form. Obtaining this for a higher number of participants needed for quant testing would be a challenge. So we decided that participation would be anonymous and students would be recruited via a link in a Hotjar survey. While we were concerned there would be low participation for the tree test and card sort, we were still able to obtain 30+ participants. 

User research is important for meaningful problem-solving that addresses their behaviors, needs, and wants 

User research is important in providing appropriate and meaningful solutions to problems. For example, interviews confirmed that users wanted an easy way to find additional, relevant content. This knowledge helped inform one of my solutions, a sticky Study Guide navigation where users can quickly find more content even when scrolled to the bottom of the page. This encourages users to explore more content from that page, reducing the likelihood users will leave the site. Helping our users be successful helps business goals as well. 

Looking back, it would’ve been helpful to conduct further user testing after launching the revised navigation to assess the impact of our update. This was not conducted due to limited bandwidth and lack of research budget.