A closeup section of the search results page

Search and navigation redesign

Corinne is a true UX leader – she combines deep quantitative research and analysis, strategic business alignment, and a user-centric design approach and aesthetic to deliver impactful solutions to market. She sees the big picture, partners with stakeholders and tackles high priority jobs to be done with a reliance on her user empathy, market testing and data and desired outcomes.

- Daniel Ginsburg, Interim head of product at Education.com

Timeline
8 months: May 2018 – Dec 2018

KEY GOAL
Improve the conversion of site visitors through better user experience and wayfinding. Improve the user experience and retention for existing users.

TEAM
Co-CEOs, interim head of product, SEO director, VP of content and curriculum,  VP of marketing, curriculum team, product management team, engineering teams, one data scientist, internal design team, internal researcher, UI designer Joe Shoop, IA expert Andy Fitzgerald, a researcher from Re/Mix, and me.

My role
UX lead on several simultaneous projects and interim design team lead. Strategy, discovery, wireframes, UX management, UI art direction, and engineering-ready designs.

The problem
Visitors arrive looking for one free resource. They don't realize the site offers a breadth of resources and a premium subscription.

Imagine you are a parent trying to find materials online to help your child with math. You search on Google and click on a promising-looking result. When you arrive at the site, it's unclear what the site offers, whether it costs money, and the brand isn't memorable. You may download one item, but you're unlikely to remember you signed up for the site or sign up for a paid subscription.

A photo of journal notes on navigation goals

Outlining considerations of the site navigation from a user-centered viewpoint.

Understanding the users
Parents and teachers who want to support kids' learning.

Education.com creates content to help children, but their product users are teachers and parents, including homeschoolers. The mental models and understanding of the subject area are widely variable. Everyone wants to help kids, but their expectations, goals, and tasks vary considerably.

A diagram showing from where users enter the site and on which pages they land.

Mapping out user entry points in existing website.

Custom process
Discovery, research, iterative design, research, final UI design, validation.

I worked with one CEO and the heads of many departments to coordinate this cross-company initiative. I also collaborated closely with engineering partners and members of the onsite design team.

I worked with the team through remote working sessions and review meetings, online documents and design tools, and daily standup meetings. Most of the team is co-located in California, while some were in Texas, Colorado, and I was in Seattle.

Discovery phase:
  • Clarifying project goals
  • Understanding what went wrong in prior redesigns
  • Validating that project goals support short- and long-term business goals
  • Identifying users and user stories (what people want to do and why)
  • Uncovering working assumptions
  • Collaborating with SEO Director to understand which navigational links and terms are key and which are not
  • Reviewing competitive and inspirational products
  • Hiring IA expert to model the subject domain in order to tease out accurate content types, objects, and attributes that are represented in the search and browse system
  • Working with heads of content, marketing, and SEO to identify where the structure around resources can be simplified, renamed to align with user mental models, and where content can be deprecated that does not align with the core business or user conversion
  • Documenting the project plan and getting stakeholder buy-in, iterating until clarity and agreement are achieved
Iterative design:
  • Creating an entry point map to understand where key conversion opportunities sit
  • Outlining the information architecture and refining it with SEO and other stakeholders to ensure it meets all foreseeable requirements
  • Creating hand-drawn sketches of various pages and parts of the system to generate and evaluate many ideas quickly
  • Designing all project screens, their various system states, and several future-looking search features
  • Wireframing draft designs in Sketch app
  • Reviewing designs against goals with executives, varied project stakeholders, and engineering
  • Prototyping various flows in Invision and micro-interactions in Flinto for user testing and internal presentations
  • Art direction of final UI visual designs
  • Mocking up and outlining all pages and system states with functional 'UX notes' about interactions and system behaviors
  • Collaborating on project documentation in Confluence for both short-term project needs and future-looking knowledge capture and sharing
  • Creating and editing Jira tickets for the team's agile sprints to include Zeplin design links and to surface important functional design requirements
  • Attending regular engineering standups to present designs, answer questions, and participate in QA
  • Coordinate with other designers on various projects that depended on or touched the search and navigation projects

Research:

  • Interviewing department heads and key employees across the company to understand all the interconnected needs and driving forces behind the existing system and interface
  • Reviewing existing research as a baseline
  • Reviewing existing analytics and marketing data around conversion
  • Leading data scientist and engineer in the creation of a custom user journey Mode dashboard to answer questions not known through existing data
  • Running an online card sort with representative user groups to explore IA structures and terminology
  • Running multiple unmoderated user studies on specific aspects of the existing design and prototypes
  • Running CrazyEgg tests on existing, and later redesigned, pages to evaluate scroll depth and click patterns in aggregate and by user type
  • Collaborating with a data scientist on new Mode dashboards to better understand user behavior data
  • Running surveys internally and externally on questions like feature naming, terminology, and other targeted questions
  • Running single-question contextual surveys to determine user reactions to experience changes or user expectations in specific feature areas.
  • Implementing new metrics to gather previously-unknown data about user behavior
  • Designing AB tests with the lead engineer to determine how best to chunk and evaluate sweeping changes to the experience
  • Hiring a qualitative research firm and collaborating on a moderated test plan to evaluate the redesigned navigation and search experiences
  • Collaborating with the internal researcher on further unmoderated research to evaluate additional  refinements to the initial release and assess interest in future-looking concepts
An affinity diagram of friction points in the conversion journey.

Affinity diagraming friction points in the conversion journey.

Edcom-ia-cardsort

An online card sort where users organize the site content and name their own groupings.

Screenshots of a custom Mode dashboard using existing data to understand user journeys
A screenshot with callouts to educate stakeholders about how different parts of the wayfinding system tie into project goals
Sketches of possible navigation solutions.

Sketches of global navigation approaches for SEO requirements and user mental models.

Sketches of ideas for the search results page (learning library).

Sketches of ideas for the Learning Library (search results), which is the most common  place where visitors enter the website.

The Results
Launched redesigned search and global navigation in fall 2018.

Through the discovery process, I determined that the search experience is critical to conversion since it is the most common entry point and the gateway to all of the curriculum.

Global navigation is less important for this particular site, but still an important wayfinding tool. In addition, since global navigation appears on all pages it provides an important tool in explaining the brand, purpose, and scope of the website.

These UX redesigns coincided with a massive rebranding project. This made it important that we user test and AB test functional changes independent of the visual changes in order to control our variables.

The designs I created for Education.com show:

  • Responsive search experiences for all user types
  • Responsive global navigation, including customizations for free and premium members and for parent vs teacher accounts
  • Designs incorporating the new branding as well as those tested in the old brand style
  • A reduced number of navigation links that support all key SEO needs as well as seasonal marketing needs
  • Reorganized filter facets, including some content deprecation, carefully vetted with the SEO, marketing, and content teams

Qualitative user research confirmed that users preferred the new designs. Parents and teachers were able to comprehend the site more easily and find the specific resources they needed. User awareness of premium features increased.

I left the team with documentation of further work to be done to refine the navigation model and feature naming, improve the search algorithm, and refine the UX to better meet user needs and business goals.

Screenshot of the search results page on a mid-sized computer screen
Education.com search results page on a mobile phone
Screenshot of XS phone screen with sorting and filtering takes place in an overlay menu.
Screenshot showing all states of the global topnav for anonymous visitors.
Screenshot of responsive menus for anonymous visitors on medium viewports (tablet devices).
Screenshot of user menus for different types of members.
Screenshot of top navigation for different types of members.
Screenshot showing new navigation on a portrait orientation tablet.
Screenshot of the new navigation UX in the old brand style.
Screenshot of Engineering handoff of the new Learning Library
Screenshot of the filtering and tagging elements in the rebranded design system.
Screenshot of global navigation variations for XS viewport.
Screenshot showing all navigation menu variations for XL viewport.
Screenshot showing all navigation menu variations for XS viewport.

See more of my work

Crypto bankingearly-stage startup, b2, fintech

Enterprise brand SaaS toolearly-stage startup, b2b, retail

 

Like what you see? Let's chat.

Corinne Sherry Design, Inc.
Independent UX specialist based in Seattle, WA, USA. Since 2009 I've been creating great products remotely with teams located anywhere. This is a woman-owned business.

Contents of this site are copyright by Corinne Sherry Design, Inc. and by the companies whose products are represented.