Advanced Search Redesign

Overview

Company

National Outdoor Leadership School (NOLS)
A global nonprofit wilderness school developing leaders through outdoor education and expedition-based learning.

Goals

User
Help prospective and returning customers quickly compare course offerings matching their interests, budget, and time so that they can easily find and apply to the right course.

Business
Improve the user experience of the website’s advanced search feature to attract more customers and increase revenue.

Summary

I led the complete redesign of NOLS' course search experience as UI designer and UX researcher, delivering a 30% increase in application engagement year-over-year.

NOLS customers were struggling to find relevant courses using the website's advanced search tool, directly impacting enrollment rates. I led the complete redesign as the primary UI designer and UX researcher, following an iterative, human-centered process with three rounds of usability testing. The solution delivered a 30% increase in application engagement year-over-year and resolved the core usability problems identified in follow-up testing.

Full Case Study

Introduction

Context

NOLS, a global nonprofit wilderness school, wanted to improve the user experience of their website’s advanced search tool to attract more customers and increase revenue.

NOLS is a global nonprofit wilderness school that educates students in leadership and wilderness skills. It offers courses in four main program areas: Expeditions, Wilderness Medicine, Risk Services, and Custom Education. Of these programs, Expeditions and Wilderness Medicine account for the majority of revenue and courses for the company.

At the time of this project, the company was trying to grow the revenue of its Expedition course offerings but had been unable to do so for the past two years due to a shift in customer preference towards shorter, less profitable courses.

One idea NOLS had to address this shift was to attract more customers by increasing brand awareness and driving more website traffic. To ensure they had the best chance of attracting customers on their website, the company wanted to improve the user experience of the advanced search feature.

Problem

Customers were having trouble using the advanced search tool to quickly find course offerings based on their interests, budget, and time.

Based on previous usability testing, customer complaints, and an UX audit by an external SEO company, our team knew that prospective and returning customers were having trouble using the advanced search tool, to quickly filter down course offerings. Over the course of the project, I realized that these usability issues were part of a much larger problem with how the NOLS website segmented customers.

Users & Audience

NOLS’ advanced search users are outdoor recreationalists, outdoor professionals, and medical professionals seeking education in leadership and wilderness skills.

To help guide our design decisions and priorities, our team spent time getting to know NOLS’ advanced search tool users through proto-personas, validated personas, and usability testing conducted both before and during this project.

Below is key information about two personas that our team focused on:

*These personas were prioritized because they represented customers from the programs that account for the vast majority of the NOLS’ revenue and courses. Other personas not listed here were also considered.

Role

UI Designer

I was responsible for concept ideation, visual design, wireframing, hi-fi mockups, prototyping, design system components, and developer feedback.

During this project, I spearheaded redesigning the course finder’s interface, developing a new visual style for NOLS’s web brand that was much cleaner, minimalist, and modern. Alongside this redesign, I documented and created guidelines for this new style in WindPants, NOLS’s primary design system, which I was working on building out at the time.

I was also responsible for creating and updating 100+ wireframes, high fidelity mockups, and clickable prototypes. After passing off my mockups to the developers from the external web studio, I gave them detailed feedback on implementation.

Deliverables

• Wireframes (InVision Freehand)
• High Fidelity Mockups (Sketch)
• Clickable Prototypes (InVision Prototypes)
• Design System Components (Sketch, Abstract, InVision DSM)
• Development Feedback (GitHub, Google Docs)

UX Researcher

I conducted and synthesized the research for two usability tests.

During this project, I conducted two out of the three usability tests: 1) moderated in-person with employee subject matter experts and 2) moderated remotely with new and returning customers. And was responsible for compiling my findings from these sessions into a usability report. Since I joined this project part way through, other team members were responsible for creating the testing plan and script.

Deliverables

• Recorded Usability Tests (Zoom)
• Usability Testing Reports (Google Docs)

Team

I was the sole designer for most of the project. I reported to one project manager, worked with four directors, and collaborated with two developers.

In-House (6 people)

• Web Manager
• Frontend Designer
• Art Director
• Creative Director
• Marketing Director
• Information Systems Director

External Web Studio (2 people)

• Backend Developer
• Frontend Developer

Scope & Constraints

Joining Mid-Project
I joined this project a part way through and needed to hit the ground running. I had to simultaneously catch up on what was previously accomplished while also preparing for the next round of usability testing.

Technical Debt
NOLS used multiple aging databases to keep track of student and course information. This led to limitations and complications during this project related to accessing and editing course data.

Scope Creep
Changing requirements from stakeholders and usability testing expanded this project’s scope from minor updates to the website’s advanced search interface to a total overhaul of the entire site.

No UI Guidelines
The NOLS Creative team did not have any layout or spacing UI guidelines in place for the web and I ended up needing to take time during the project to create them.

Minimal UI & UX Experience
When I joined this project to replace another team member, I had no UX experience and very little UI experience. I had to quickly learn about both of these disciplines within a matter of weeks through heavy research and quick learning.

Process

Overview

Our team followed an iterative, human-centered design process that spanned three usability testing cycles. After the first cycle, I joined the project and took over UI design and UX research.

To ensure our design decisions addressed real user needs, the team constructed a process out of Stanford d.school’s five modes of design thinking—empathize, define, ideate, prototype, and test—that spanned three usability testing cycles. During each cycle the team 1) conducted usability testing to better understand our users, 2) identified where our users’ problems existed, 3) created low fidelity sketches to brainstorm solutions, 4) built high-fidelity interactive prototypes of our ideas, and 5) returned to our users again for feedback.

When the teammate originally responsible for the UI design and UX research was unable to keep working on the project in the same capacity after the first cycle, I transitioned onto the team and assumed both roles.

Joining Mid-Project

To get myself up to speed upon joining the project, I reviewed the usability testing report from the first cycle and identified three key findings.

Before moving on to the next round of usability testing I analyzed the team’s report from the previous cycle so that I could: 1) get myself up to speed on who they tested, why they tested them, and what they discovered; 2) distill my own key findings from this information; and 3) identify any recurring issues in the next round of testing.

I learned from the team’s report that they had conducted five remote unmoderated usability tests with new customers on the live advanced search webpage to evaluate how easy it was to use the interface for the first time. Since NOLS was looking to expand its customer base, the team thought it was critical to begin usability testing with new customers to ensure the advanced search tool was easy for a wide variety of customers to use without prior knowledge of the interface. Five participants of representative ages (18-45) and devices (computer, tablet, smartphone) were recruited via UserTesting.com to take remote unmoderated usability tests on the live NOLS website.

From the report’s findings, I distilled three key issues that seemed to be part of larger overarching usability problems:

Key Report Findings

Understand Users

Following the team’s usability testing plan and script, I conducted eight in-person moderated usability tests with subject matter experts on a high fidelity clickable prototype to evaluate how easy it was for returning customers to use the interface.

In the second round of usability testing, the team wanted to evaluate how easy it was for returning customers to use the advanced search tool. In addition to attracting new customers, NOLS was also looking to grow its business by selling more courses to current customers. For this reason, it was important to conduct usability testing with returning customers to ensure the advanced search tool was easy to use for customers with more specific needs and deeper product knowledge.

In an effort to recruit the smallest number of participants with the greatest knowledge of program specific customer needs, the team recruited eight internal subject matter experts spanning NOLS’ course offerings to take in-person moderated usability tests on a high fidelity interactive prototype. I conducted these tests with participants at my desktop computer and took notes during the sessions. Following testing, I gathered my findings from these sessions into a usability testing report.

Define Problems

After conducting the tests, I used affinity diagramming to help me identify six usability issues that needed to be fixed.

To define what problems users were having, I reviewed the notes I had taken during the usability sessions and recorded participants’ pain points in a Google Doc. I then used affinity diagramming to organize related participant pain points into distinct clusters and prioritize them based on severity (did the issue prevent users from completing critical tasks?) and pervasiveness (how many users experienced this problem?).

I decided to tackle the following six usability issues that were the most severe and pervasive:

Top Usability Issues

Brainstorm Ideas

To find the best solutions to the usability problems, I conducted several rounds of brainstorming and sketching.

I began solving for each of the usability problems by first brainstorming a wide range of possible solutions. I then explored the viability of those solutions through low fidelity sketches. Finally, I narrowed down my solutions and chose the best ones to implement on the high fidelity mockups.

Prototype Solutions

Based on my proposed solutions, I used Sketch to update the high fidelity mockups and InVision to stitch the new mockups into a clickable prototype.

When I opened the mockups that I had inherited from the previous UI designer for the first time, I took time to review the file organization in Sketch. High fidelity mockups can be quite time intensive to work on and I knew that making sure my file had meaningful naming, logical foldering, and useful symbols would save me (and future designers) a lot of time down the road.

After organizing the file to my liking I set to work implementing my solutions:

Usability Updates

After implementing these solutions I stitched the mockups together into a clickable prototype with InVision for the next round of usability testing.

Validate Solutions

Following the same usability testing plan and script, I conducted three of five remote moderated interviews with new and returning customers on the updated high fidelity clickable prototype to validate my design solutions.

In the third round of usability testing, the team wanted to 1) evaluate if the design iterations had fixed the issues users were having and 2) find any new usability problems introduced by the changed design.

Five participants of representative ages (18-45), experiences (new & returning), and program interests (Expeditions & Wilderness Medicine*) were recruited in-house to take remote moderated usability tests on a high fidelity interactive desktop prototype. I moderated three of these tests with participants over recorded Zoom calls and another teammate assisted me in moderating another two tests. Following testing, I took notes on the session recordings and gathered my findings into a usability testing report.

In retrospect, the team should have conducted this usability testing on a variety of devices instead of testing only on desktop. Half of NOLS’ website traffic comes from customers on mobile devices and this round of testing completely missed out on gathering further insights into how to improve that experience.

*Since these two programs accounted for the vast majority of the company’s revenue and courses they were prioritized above other programs for usability testing.

Define Problems

After conducting the tests, I used affinity diagramming to help me identify seven key findings.

To identify new, persisting, and solved usability issues, I reviewed my notes from the usability session recordings and documented participants’ pain and high points in a Google Doc. I then organized related points into distinct clusters and ranked them based on severity (did the issue prevent users from completing critical tasks?) and pervasiveness (how many users experienced this problem?).

I generated the following eight key findings from my affinity diagramming:

Solved Issues

Persisting Issues

New Issues

Brainstorm Ideas

While brainstorming and sketching possible solutions to the remaining usability problems, I realized the interface needed to be segmented by program.

While exploring the viability of listing default course results in order of start date (to solve for the unnatural listing order usability problem), I realized it was possible for the first page of results to only be Wilderness Medicine courses (since there were 506 Wilderness Medicine courses, 333 Expeditions courses, 3 Risk Services courses, and 27 Alumni courses). If that happened it would be very confusing to other program users and would be unacceptable to Expeditions stakeholders.

This led me to consider if the course finder experience needed to be separated by program. Comparing the filtering needs of all the programs (especially those of Expeditions and Wilderness Medicine), I quickly found that they had conflicting preferred views (list vs. grid), location data (campus vs. geolocation), and searching behaviors (browsing vs. comparing). Based on the results of my comparison, it was evident to me that separating the course finder experiences was necessary to further simplify and customize the advanced search interface.

I brought my team together to brainstorm a new page flow to segment users into separate course finder experiences based on program. We all agreed that we would need an unfiltered course finder page to bucket users and that the filters for each of the programs should be tailored to the needs of the program.

Prototype Solutions

Based on my proposed solutions, I used Sketch to update my high fidelity mockups. As part of that process, I ended up needing to create and document layout guidelines for my team in a design system.

While working on my mockups this round, I began considering the development handoff and realized that my mockups were not following any layout or spacing guidelines and my team did not have any in place for me to follow. I quickly set to work researching, creating, and documenting these guidelines in the design system that I was building out at the time. After doing that, I reworked all my mockups to follow these new guidelines (and in the process deepened my use of symbols in the file to be the most efficient with this overhaul).

After reworking the mockups to follow the new layout and spacing guidelines I set to work implementing my solutions:

Usability Updates

Refinements

Stakeholder Requests

Implementation

To set the developers up for success, I created 92 high fidelity design spec mockups in InVision and provided detailed feedback on each round of implementation.

Due to the extensive nature of the proposed changes, implementation was split up into two phases. Before each phase, I created and annotated a total of 92 high fidelity design spec mockups in InVision to clearly communicate to developers how every part of the interface should look, work, and feel. These specs and annotations detailed different screen sizes, views, states, and page flows.

After each phase, I gave the developers detailed feedback (via Google Docs and GitHub Issues) on how the coded interface compared to my design specs mockups. Despite my best efforts to be as clear as possible, this process ended up being very painful and time consuming. Many details of my specs were overlooked or not executed properly and I ended up needing to provide feedback on quite a few visual inconsistencies. In retrospect, it would have been really helpful if NOLS had had a design system in place* to aid with smooth designer developer collaboration.

*At the time I was spearheading building out a design system for NOLS but it wasn’t far enough along yet to truly begin translating between design and development.

Outcome

What Happened

Two months post launch, NOLS experienced a 30% increase in application engagement year-over-year. Six months post launch, further usability testing indicated that the redesign had fixed the interface’s main usability problems.

Two months after the launch, the redesign was responsible for a 30% increase in the number of customers reaching the application phase year-over-year. This data strongly indicated that the redesign of the advanced search tool had improved the user experience and was attracting more customers. After this two month period, our team was unable to continue tracking this data because COVID-19 forced NOLS to suspend all course offerings for several months and resume only limited operations later that year.

To supplement our quantitative launch data, the team also collected qualitative data via another round of usability testing (conducted by a third party freelancer in July 2020). This testing confirmed that the redesign had fixed the main problems with the interface. The minor issues the testing identified confirmed several areas of improvement the team was already considering.

Lessons Learned

Usability testing is humbling, persuasive, and powerful.
Conducting usability tests for the first time during this project taught me that it’s virtually impossible to design an exceptional user interface without testing it with real users.

Expertise in digital design is knowing that you need to test things.
Being a good designer for digital experiences means recognizing that you are working off assumptions that need to be validated by actual users.

Design file organization is crucial for maximum efficiency.
Keeping files organized with meaningful naming, logical foldering, and useful symbols saves you, developers, and future designers a lot of time down the road.

Smooth designer developer collaboration does not happen by accident.
Effective communication and collaboration between design and development can only happen if there are systems, tools, and workflows in place that help translate between disciplines.

Design is never finished.
Customer expectations change over time and so must design—there’s never an “end” to iterating on digital experiences.