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.
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.
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.
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 (school principals, school district officials, and superintendents)
- HMH Specialists
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.
- 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
- 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.
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.
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.
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.
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.
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.
First, I outlined my objective and goals for the user testing. Then I began designing my user testing questions.
- Testing HMH research to ensure users can find the information they need
- 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
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:
- 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.
- 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.