Houghton Mifflin Harcourt Research Library

My role:
UX Designer
Tools and methods:
Hand sketching, InVision, Sketch, User flows
Above/ HMH's new research library responsively-designed


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.

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.


A key goal in our redesign was to exemplify their expertise and commitment to educational innovation.

What we aimed to do:

  • 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

Additive filter and sorting

With the breadth of data and research, users may not be sure what they're looking for. To combat null sets, we designed the filter and sort system to be additive instead of subtractive.

Report navigation and HTML-based

Key information about the report is called out at the top of the page. Because some reports are quite hefty, we introduced left sidebar navigation and anchor-linked sections of the report. This saves the reader time and provides better focus.

Each report is also HTML-based and is optimized for accessibility and SEO purposes.


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.

Above/ Flow of how a user got to a research report before
Below/ Previous design of the research area

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.

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.

Above/ Covers of various types of research reports created by HMH
Below/ We logged the commonalities and differences of the available types of reports


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:

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.


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.

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.

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.

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.

Below/ Comparison of old and new user flows

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.

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.



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 template reports
  • 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 designs

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


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


  • Able to find research reports
  • Able to find and learn information about ESSA
  • Find the 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 & takeaways

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

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

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.
  • Academy of Interactive and Visual Arts W3 Awards - Silver, Website Redesign
  • BMA of New York Global ACE Awards - Honorable Mention, Website Redesign
Project details
  • Agency: Siegel+Gale
  • Client: Houghton Mifflin Harcourt
  • Year: 2018