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.
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.
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.
I would love to see some user analytics post-launch and see how users are currently interacting with the website. I'm currently in the process of doing some ad-hoc user testing.
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.