Evolving a 35-year old print product suite into a coherent online experience

Serving as lead UX Designer and UX Researcher at Committee for Children

The Challenge

Second Step, Committee for Children’s flagship product, is over 35 years old. It is a comprehensive school program to teach Social-Emotional skills to students in Pre-K to 8th grade. Up until 2021, Second Step has primarily been a print-based product. In 2011, the program released an online component to the print-based editions. For nearly 10 years, this online component became an unorganized receptacle of resources, growing in navigation complexity over time.

In November 2019, I joined the Second Step team and was tasked with a very large-scale project. I was asked to make sense of the existing online content and propose an information architecture that would serve both the legacy print programs and help grow the incoming (still in development) digital programs.

Approach

For a UX undertaking that literally touched every part of every user’s experience and would become the bones for which Second Step products would grow upon for many years to come, I needed to break the project down into phases. By outlining this ahead of time, sprint by sprint, product stakeholders were able to participate in the design process and follow along with the progress.

Project Planning and Framing

Phase 1: Clean up the individual program IA through a Content Audit

After aligning with the development team and product managers on a sustainable and user-centered plan of how we will do this work, it was easier to move through the project. I was able to stay focused on each critical area, while also knowing how the piece of the puzzle will connect to the whole.

The first step was to understand the current content and make sense of it. In the initial IA, the content resources were divided by “audience” which was problematic for a few reasons:

1. Oftentimes users associated with more than one audience, causing stress in identifying oneself.
2. By labeling by “who” there is a very weak information scent for “what” the user is looking for.
3. A lot of content was shared across audiences and therefore had to be duplicated in numerous places.

For point of reference, you can see the annotated screenshots below.

As an alternative, I proposed to remove the “by the audience” navigation and categorize content by its purpose in the product implementation cycle.

After carefully reading each page of the website, it became clear what themes were emerging based on the intended use of the content. It broke down into the user’s journey pretty nicely. The wider team was excited to imagine how our navigation structure could help reinforce the product implementation model.

From here, I was able to get to a lot of wider-team support. I started to draft site maps for every print-based program and iterated on them with different collaborators to get it “just right”.

Phase 2: Global IA through an an Object-Oriented UX Approach

Once we got the current program content under control and found a sensible system to code the content for all physical products, we could then zoom out and start thinking of the global IA and how the user will be able to navigate not just within products, but between them.

To do this work, I found it wildly helpful to apply Sophia Prater’s method of Object-Oriented UX.

The beautiful thing about Object-Oriented UX is that it relies on the mental model of things to establish an online space. I love this method because:

1. Reduces dev and design work in such a way that software scales and doesn’t break.
2. Maps to the user’s pre-existing mental model of the real world.
3. Informs the navigation, way-finding, components, and page content.

This process was extremely illuminating in that it uncovered where our digital objects were strong and where they were weak. It also provided us with the foundations of our wayfinding system of how people will get from one place to another.

This map got me on a path of how to:

1. Think of how programs can have a common structure, regardless of format (physical product or digital product).
2. Provide routes for core user goals and common tasks.
3. Structure our dashboard.

The OOUX relationship map got me to a global IA that looked something like this:

In addition to looking at pretty circles as our IA map, this map revolutionized something really important org-wide. Committee for Children had recently grown so rapidly, that the staff size had doubled in the past 18 months. A lot of staff members were still learning the Second Steps product offerings and how the programs were related and varied. This map got us all aligned on what we were building together, in one high-level view.

At this point in the project, nearly a month in, we were getting closer to a stage where we could start conceptualizing wireframes and navigation. We started with core user scenarios and flows as a framework for validating the routes we need to design. Below are some artifacts that illustrate how I moved from understanding content objects to a map that helps users get from one object to the next.

Phase 3: Testing the Navigation and IA with a Usability Study

With general concepts coming together for how the IA will support the various programs and thus the pages needed within each program, we were at the stage where we could put the navigation to the test. We created two design options, one with a program nav slide-out drawer, and one with program nav visible at the top.

I interviewed many stakeholders to collect all that we wanted to learn from a usability study. Here were some of the questions we had:

1. Is it easy to learn how to use the app and know where to go?
2. Does the navigation support diverse scenarios and tasks?
3. Is it extensible for what comes in the future?
4. Is the experience cohesive and intuitive cross-programs?
5. What sort of templates will we need to consider?
6. Can we build this by July? If no, how can we reduce it?
7. What is MVP and can we iterate upon it without jarring the customer?

The Test Setup

• 2 navigation designs (Prototyped with Invision)
• 2 program navigations (Middle School Digital and Kit Elementary)
• 14 tasks (7 for each program)
• Hosted remotely with Zoom and screen share

Try one of the usability prototypes that we used for the study.

What we learned

Overall, users were able to teach a lesson, access reports, activities, and training with ease. Finding supporting content proved to be a little more challenging in the Elementary kit IA than in Middle School digital IA. In general, admins and teachers agreed that they are most likely going to look for information in the “teach” and “training” journeys.

Between the two designs we tested, users completed more tasks and with greater efficacy in the “top bar” design than with the “drawer” design. Once users learned how the drawer design worked, they found both designs easy to use. The top bar design was easier to see where they were in the program and the drawer seemed to be more visually appealing. Between the two designs, our team felt that the top bar design would improve the usability of the Second Step platform. View the full report here.

What we changed

We learned that if we leverage a “library of articles” format, that we could get by without a dropdown or secondary navigation. We figured that this would also scale well for a dynamic and searchable resource library in the near future. This pivot was the last step we need to build out the site map, templates, and UX requirements for the pages for upcoming page designs.

Phase 4: Site Maps, Cross-Program Page Templates, and Nav System

What was so beautiful about the closing steps of this Information Architecture overhaul, was how all the programs were getting a common structure that was also able to hold the unique differences with integrity. Additionally, we discovered a systematic way to build out these pages relatively quickly across all the programs. We workshopped and mapped out the content to see how it would group as a template system.

As a team, we grouped and mapped the content into what would become our template system.

With this template system, we were able to design and develop the pages, migrate all the programmatic content for 8 unique products, and ship it all within a few months.

Impact

There are some very key ways that this IA influenced our product trajectory and customer experience. Here are some significant examples:

• The global site map and prototype provided a common understanding and a visual map of the product we were all building together.
• It was a systematic way for us to meet our very tight timeline constraint and release all the products on the new platform on time.
• Each product owner could adopt and maintain the new site map structure.
• There was a great reduction in redundancy. We went from ~175 pages in the program to ~20, without losing any essential program content.
• This IA overhaul was attempted by 4 different UX designers in the previous 6 years, and the system I designed was the solution that actually made it across the finish line.
• I reduced the program navigation from 2 navigation menus with 11 top-level sections to 1 navigation menu with 5 top-level sections.
• We changed the product paradigm from a “website of pages”, to a “library of articles” (The power of OOUX!)
• This new content system is synced with a CMS that allows new pages to be produced without development effort.
• We were able to release a brand new program on the new platform by using 95% reusable code from the previous program. Meaning, that the platform IA can handle new Second Step offerings in a way that is turn-key. <– This is HUGE from a business perspective.
• The navigation works similarly and consistently in each program, so learning new programs, or changing programs, is simple and consistent.
• The new dashboard serves as a simpler way to “keep everything in one place”, particularly for customers that are transitioning from physical kits to digital subscriptions. Educators can access any and all programs easily without interruption.

In Retrospect

In many ways, I am very happy with the process and outcome of this project, particularly given the constraints everyone was working within. That said, there are a few areas where we did not execute on the IA and UX to fidelity, resulting in some significant usability issues. Due to time constraints, some of the proposed UX was cut when we before we launched.

The compromised UX features include:

• Breadcrumbs.
• Dynamic category tags and other wayfinding elements on articles.
• A broken “All Categories” section on program resource landing pages.
• The visibility of “what” is in the resource categories.
• No search or filtering on content, making it difficult to narrow options for something specific.
• No “Help” tool, which would have assisted in serving up support content.
• Minimal pictures to the articles.
• The “S” Logo as a way to return to the dashboard did not perform great in usability, but we did it anyways on the assumption that people “would learn”.
• We did not implement text hovers on icon-based navigation, such as the “S” icon to go to dashboard.

The UI, Dev, and Content teams had to build this out so fast, that it did not go through iterative improvements or QA passes. With more time I think we would have executed this stronger. In general, our foundation to grow and iterate is in a much more stable place and will allow us to tackle the next big IA challenges such as our account management and school model. 😀

This project was in collaboration with Committee for Children, and all rights to this work belong to Committee for Children.