Houghton Mifflin Harcourt Research Library

My role:
UX Designer
Tools and methods:
Hand sketching, InVision, Sketch, User flows

Overview

Houghton Mifflin Harcourt (HMH) is a publisher that focuses on providing educational materials and books to readers of all ages. With a proud legacy of 200 years, HMH is proud of their role in helping students excel in the classroom. A key goal in our redesign was to exemplify their expertise and commitment to educational innovation.

Having recently rebranded to being a "modern learning company", HMH wanted to create a centralized hub for all things research, and give context on their ongoing education initiatives.

My team and I were able to audit HMH's assets and the current user journey, create user personas, formulate respective user flows, then iterate on the designs. Then I designed a test plan and had users interact with the new site, and compiled the data.

What we're aiming for

  • Design a landing page clearly displaying HMH's dedication and efforts to research without overloading the user
  • Allow users to learn about HMH's approach to research and engage in potential partnership
  • Engage users to learn more about ESSA and HMH’s research in response to ESSA
  • Allow users to sort and filter reports by relevant information

Discover

Analyzing the problem

Taking a closer look, we evaluated how HMH previously held their research on their site. We also identified how diverse HMH research publications were and their current shortcomings.

Issue 1: Research was hard to find

Prior to fully adapting their website with their new rebrand and visual identity, their research was buried under layers of content. There wasn't a centralized area where the research lived, and each report only opened as a PDF. Their website wasn't able to convey HMH's perspective on ESSA or show any top-level indicators if report would be relevant to the user.

User flow of how a user got to the research in a previous state

A screenshot of the previous research area on hmhco.com

With their rebrand, HMH seized the opportunity to start building a research area on their website. The research section was more readily accessible and HMH began shaping how they conveyed their approach to educational research.

While they featured a handful of research reports, it still led to only a PDF and wasn't searchable content. HMH needed a user-friendly database for visitors to interact and see the breadth of their research.

User flow of how user got to the research in the current state

Screenshot of their research page post-rebrand. We got the aesthetics down. Time to make it useful!

Issue 2: Research wasn't optimized for the web

Majority of their reports were created with the intention of publishing for print. This meant all the files were in PDF. This meant their research text wasn't searchable and accessible.

Examples of HMH print covers

Issue 3: Size, format, and elements of different publication types differed widely.

There wasn't a specific template these research reports followed. A user would have a hard time finding and comparing information.

When a document included efficacy information, there were a number of additional elements that wouldn't exist in other reports.


Example of how documents varied in length and design
Comparison chart of document types and their respective elements


How could we accommodate individual reports containing multiple studies?

Define

Personas

Before any sketching, we had to outline who we were designing for and how they might approach HMH's research. We identified three types of users:

  1. Administrators (school principals, school district officials, and superintendents)
  2. Teachers
  3. HMH Specialists
HMH Research users

Administrators need to verify legitimacy of HMH's educational programs and materials before agreeing to partner with HMH. This type of user would need to pinpoint specific  reports and studies and ensure the program not only met ESSA standards, but was also effective for students in the classroom.

Teachers may go to HMH's Research Library to learn more about a program. If a school recently implemented a program like Go Math!, a teacher would want to find a related study to see how other educators used and applied Go Math!'s materials successfully.

Lastly, if an HMH sales representative needs supporting documents on a program, they can go to a centralized database to find and share relevant studies to a potential customer.


Requirements

After identifying the user personas and aligning with the client, we made a catch-all list of what the research section needed to do and have. These requirements were split into two areas: functional and content. The functional list outlined key user actions while the content list outlined the storytelling strategy of HMH.

Functional requirements

  • Clear sub-navigations for research section
  • Ability to browse HMH’s collection of research reports and resources
  • Search HMH’s collection of research reports and resources
  • Taxonomy structure that allows users to filter HMH’s collection of research reports and resources
  • Ability to view reports and other resources in HTML
  • Download PDF files of reports and other resources
  • Create a web template for research reports that allows for visual, dynamic content
  • Provide a way to compare programs and solutions across ESSA standards
  • Clear connection points established for the user between program pages and research destination content
  • Simple sharing mechanisms for research reports


Content requirements

  • Tell the story of HMH’s research team – their mission & how they approach their work and in a compelling & visual way.
  • Feature HMH’s statements/point of view on ESSA and how their programs meet the standards.
  • Feature HMH’s research reports and white papers from the HMH’s researchers
  • Feature timely thought leadership

Reimagining the user flow

We first analyzed how HMH had presented their research in the past. Then we performed a competitive audit to analyze how competitors or analogous organizations orient their users in getting to their research. Armed with knowledge of our past and our competitors at the present, we developed a future state for HMH's research. It's important to note this audit was completed in July 2018 and the information architecture of each organization's website may have changed.

Competitive audit

With McGraw Hill, the process to get to a research document was still convoluted. Users were bound by the structure of how McGraw Hill thought their users would need to drill down content. It took the control away from the user.

Flow of how a user would get to McGraw Hill's research reports

With Pearson, it was more straightforward and research was divided by program. While this approach works for Pearson, HMH’s breadth of programs would make it difficult to represent their research, a structure that could easily cause the strategy to quickly become unruly. In addition, Pearson also only provided PDFs of reports.

Flow of how a user would get to Pearson's research reports

Digital Promise's research space is even more prominent than McGraw Hill and Pearson and lives in the top-level navigation. They provide more context on what's inside the report so their users know if the study is relevant to them. Digital Promise recently implemented "DSpace" - a report repository.

Flow of how the user would get to Digital Promise's reports

HMH's future state

Our proposal was to have the research section only 3 levels deep (research landing, research library, report). With the future state, we knew a research library complete with a filter and sort system was needed. We wanted to give users control on seeing which reports were most relevant to them. Lastly, ESSA needed its own dedicated landing page so HMH had the opportunity to share their unique perspective on it.

Proposed user flow indicating how the user can always land back into the Research Library

Comparison of old and new user flows

The former flow is linear and only one way would end in an efficacy report. In the new user flow, the user can move between the two main areas of the Research section and all alleyways could potentially end in an efficacy report.

Design

Wireframes

After many sketches, we present the client with low-fidelity wireframes with content outlines for each relevant screen. This allowed us to get on the same page, but also give the client opportunity to collaborate with us during the design process.

We outlined four areas within research:

  • Research landing page
  • Research library
  • Individual report templates
  • ESSA landing pages

From there, we created more high-fidelity wireframes after further discussion of the content strategy and client's needs.

HMH wanted to illustrate more of their legacy and provide additional context on their ESSA rating system. To do so, we added a timeline and built out the ESSA landing page to encompass more of HMH's rationale. We also added a chart so users could compare HMH's products and solutions.

Desktop design

Mobile design

Cleaner and fresher

Evaluation and Results

Once we delivered the website, user testing and QA was not in scope. However, I was still curious to see how users found the new website to work, especially those within the education field. I did some user interviews on teachers on the educational program selection process. Then, I formulated a quick ad-hoc testing round.

User interviews

I confirmed that textbooks are decided by school district (as per User Persona #1) and teachers aren't generally given an option in required material. However, teachers are given the option of choosing their own supplemental material.

I learned that when there's curriculum change, schools send a panel of subject-specialized teachers to evaluate the materials. Research, compiled by the district, is given to the those teachers and admins to evaluate the program. Then each teacher on the panel submits a comparison report using provided research and materials. In the end, district representatives are the ones to make the final decision.

I noted that this process may not be the same at other school districts. However, my initial assumption of teachers going to view reports on HMH Research may not be true as led to believe.

User testing

First, I outlined my objective and goals for the user testing. Then I began designing my user testing questions.

Objective

  • Testing HMH research to ensure users can find the information they need

Goals

  • Able to find research report
  • Able to learn more information about ESSA
  • Able to find comparison chart about HMH educational programs

User testing questions

I began with having the user imagining themselves in a scenario. From there, I introduced the HMH Research landing page to gauge initial reactions. Then, I gradually guided the users towards the different areas of the HMH Research site. See my questionnaire list.

Choosing the test takers

At least one-third of the test takers were in the educational field. Unfortunately, I was only able to secure test takers aged 24 - 35.

Results and Takeaways

Overall, there was too much content for the user. This brought up two related points:

  • additional navigation is needed to sift through such long pages
  • the amount of scrolling the user needed to do was excessive

One user mentioned a lot of "fluff" words seen at educational conferences and another mentioned, "I think it's a lot of information to absorb and the long scroll accentuates that, however, I don't know how to fix that because all of this information is so important."

This tells me that the content (mostly on the Research landing page) isn't relevant material for users. If the content was long but deemed worthy of attention, the users may not have minded the amount of scrolling.

Other notable stats were:

  • 83% were able to use the research library and filter system
  • 50% said the ESSA chart was easy to find with 1 user tester noting how the verbal design of the CTA confused them

Reflection

Over the course of 2 - 3 months, I was able to hop onto a project on the cusp of a new rebrand and fully develop an area of their website that hasn't exist before. And then a year later, I was able to see it come to life (exciting!).

I had to be flexible in the way I was approaching the problem as I was working with a new team and their design process was different from what I was used to.

If I had to reiterate on this design, I would advocate for additional navigation and more obvious link/button designs with hover states. I would also advocate for less content on the research landing page. Since my user testing was more scrappy, I would like to cast a wider net of user testers, specifically in older demographics.

Some inklings I picked up along the way:

  1. Don't innovate for the sake of doing something new.
    The goal should always be about what's best for the user and working within certain constraints and affordances. Initially, I approached the project with just the goal of creating something super innovative. Over time, I grounded the approach with creating a design that made the most sense.

  2. Learn how to speak to your client.
    This is crucial. Many a-time we speak of annotations as a to-do for developers. But annotations + low-fidelity wireframes is a great way to ease your client into understanding where your thought process is going in terms of design. It's a great time to get buy-in from your client.

Awards

  • Academy of Interactive and Visual Arts W3 Awards - Silver, Website Redesign
  • BMA of New York Global ACE Awards - Honorable Mention, Website Redesign

Team

  • Group Experience Director - Leesa Wytock
  • Assistant Director, Experience - James Barnes
  • UI Designers - Liz Motolese and Antonio Ma
  • Content Strategist - Adrienne Michitsch
  • Project Manager - Evan Karol
  • UX Designer - Jenny Chau