Home
AboutWorkContact

Effortless Mobile Navigation

GreatSchools empowers users by providing comprehensive, easy-to-use school information. This project was an overhaul of the mobile navigation for school profiles. The existing mobile navigation was tucked away in a burger menu, which fell short when compared to its desktop counterpart. Our goal was to improve the user experience by refining navigation, spotlighting key actions, and optimizing the school profile presentation.

My Role - Lead Product Designer

Sophie Hwang- Product Designer

Lorry Henderson- Product Manager

Alexina Chong - Lead Web Engineer

Two mobile phones depicting the GreatSchools profile navigation. The phone on the left shows the primary navigation before you begin scrolling. The phone on the right shows the secondary navigation with a side scrolling feature.

Project Goals

Amplify Usage
Our goal was to boost mobile navigation usage by a solid 10%.

Elevate "Save" Action
The “Save” button held utmost importance as a user action.

Intuitive Movement
We worked to facilitate effortless movement between distinct sections of school profiles.

The original GreatSchools profile navigation. A top navigation has a hamburger menu and school name. A second navigation bar appears just below the top with three CTA buttons; one to save a school, one to get school updates, one to write a review.
Our starting place

Research

Personas
Parents using our platform for the job of picking a school have a myriad of priorities. What’s important to one may not matter as much to another.

Usability Testing
demonstrated that mobile users didn’t know what to expect behind the burger menu, but when they discovered the ability to navigate the profile, they were delighted.

Analytics
provided further information. An interesting fact? A whopping 70% of our users operate on mobile devices, but of the total profile navigation clicks only 10% of them came from mobile users. This gap demonstrated a need for a significant improvement.

A graph showing profile navigation usage. 88% of people use profile navigation on desktop, 10% on mobile, and 2% on tablet.
Profile navigation usage

The Main Navigation

Positioned at the top of the screen, the main navigation bar takes over when the user scrolls past the header and remains fixed. Displaying the school name, users maintain orientation throughout their journey. The “Save” button cozies up next to the school name, subtly urging users to bookmark their favorite schools.

Two phones depicting the new main navigation. The first image shows the global navigation for the site. The second image show the navigation for the profile once a user begins to scroll.
Left: global navigation
Right: Profile navigation on scroll

Secondary Navigation

A horizontal secondary-navigation bar occupies the space below the main navigation, ensuring visibility of navigation elements. We pursued simplicity - decluttering the navigation list aids category breakdowns and decision-making. Highlighted titles represent distinct profile sections like “Overview,” “Reviews,” “Academics,” etc. As users scroll, the active section title lights up, offering a visual cue of their location. A tap on the section title easily transports users to the corresponding profile section.

An image of the GreatSchools secondary navigation on the school profiles.

User Feedback

We subjected prototypes to testing with 5 mobile users, which provided valuable feedback. We discovered that after pressing the save button for the school, users struggled to navigate to their saved school list. Additionally, we found out we had some work to do with the profile naming and taxonomy, with words like “equity” confusing users.

An image highlighting the word equity in the secondary navigation.
"What is equity"-User feedback

Results

400% Increase in mobile navigation use
The outcome? We increased mobile navigation usage by an impressive 400%, soaring from 50,595 events in the 30 days pre-release to 205,643 events in the 30 days post-release. Our users were navigating with newfound efficiency.

A graph showing mobile profile clicks 30 days before and after release.
Mobile profile navigation clicks

Lessons Learned

Highlight Crucial Actions: Enhance essential buttons for user convenience.
Guided Navigation: Illuminated titles act as compasses, guiding users through the interface.
User-Centric Approach: Regular feedback loops hone design precision.
Striking a Balance: Prioritize navigation visibility while avoiding visual overload.

An image of two phones depicting the GreatSchools profile navigation on mobile. The first image shows the "Save" button in its inactive state. The second shows the "Save" button in its active state.
Jillian Hansen-Lewis 2023
ResumeLinkedIn