Core Navigation

The Problem

The current navigation experience was a buffet… assembled by a drunken monkey. The older decision was to overwhelm them with options to give a sense of “we have stufffffff!” Between the top navigation and the in-page navigation, it took 3 or even more pages to get to where you wanted. You could pass through 3 or 4 different layouts and design languages. It felt like Doctor Strange flying through the multiverse.

This would not do.

Contribution/Role

I served as the primary UX Architect, UI Designer, and User Researcher.

Figma Prototype

The ideal solution:

I often start with a grand ideal then pull it down into reality. The grand ideal for this project was to replace the homepage with a more dynamic dashboard. What do students and teachers need the most from our system? To know:

  • What’s my next thing?
  • How’s my progress?

The practical solution:

In order to make an impact on the users and the business now, we had to simplify. The various experiences (such as Test Prep, Gradebook, Classrooms, Assignments, etc.) we older, gnarlier systems. Creating an automatically aggregating dashboard was out of the question.

But the problem remained, users didn’t know where to go when they got to our site. We built the system to highlight recent products and classrooms accessed, taking advantage of the data we could wrangle.

First Navigation Design

We had a dozen subjects, and 6 different tools with which to study said subjects. Our first major overhaul took everything and organized it into a new structure. The result? A clearer information architecture, but repetitive. At the time, we did not have the data we needed to know how to simplify it in a way best-suited to our users.

Focus on Experiences, not the Smorgasbord

After some time, we had the data (between analytics, CSAT, and usability testing) to know which model was best. Sorting first by experience (Test Prep, Courses, Videos, Study Guides), then allowing the users to find their preferred topic was best. I wondered if the opposite might be true, but we learned that:

Users did not really use our site to explore, they used it to perform schoolwork requested by an educator.

The next, and critical, piece of the puzzle was deprecation. Like many systems, we had undergone some feature bloat (looking at you, Photoshop). Before the navigation system could be improved we had to remove dozens features. Some had to be removed because they were old, some we were not directly selling or were performing worse than the competitor. Where did we decide to focus?

  • Heartbeat, a powerful self-learning SEL tool
  • Test Prep, a dynamic skills-based educational tool
  • Courses, our wide array of fully-packaged course materials
  • Browsing content, including hundreds of delightful videos, study guides (like SparkNotes but funnier)

We chose to remove the random doodads (like our essay builder, Shakespeare translator, Career Quiz, and many more) and focus on the core experiences.

Less spunk, more relevance

Some companies have the mental model that they are VERY important in the users’ minds and that their users are just casually browsing their smorgasbord of beautiful content, ready to tattoo the logo onto their foreheads.

This is not only true, but the opposite is more true. You are not that important to the user, they are not there to bask in the glory of your content and design. They are there to meet a need, and get out.

So many of our pages not only had lists and lists of links organized under every possible category under the sun, but hundreds of “Shmoopy Explainers.” Little bits of brand snark.

We found that this spunk was useful in the body of the learning content (videos and readings), but when in the navigation or UI? Not useful. The result.

Let your interface be as invisible as possible. On pages where users are there to make a decision (where to go, or what to do), don’t fill it with fluff that the user must then read, only to learn it was a funny and unhelpful in them making a decision

Remember: You are not that important.

New Navigation, Home, and Browse

The newer, improved left navigation reduced the decision fatigue exponentially by focusing on the core experiences. The updated home would have Classrooms, relevant assignments, and key data.

The almost 100 pages of links are replaced with a single navigator page. Videos, Study Guides, and Courses are all organized by topic, grade level, and more. Users can now pick their criteria, and have relevant results appear. No more “Shmoopy Explainers” cluttering up the process of deciding what to click on.

Blog at WordPress.com.