Imagine Learning

Redesign of Support Site

Role: User Experience Designer

Client: Imagine Learning

Imagine Learning develops award-winning language, literacy, and math software programs. Since 2004, over three million K–12 students in more than 30,000 schools across the United States have used their products. Headquartered in Provo, Utah, this award-winning software creates a curriculum based on research and effective teaching practices.

imagine learning logo

Problem:

In 2014, Imagine Learning was acquired by Weld North Holdings LLC who were in the process of buying additional EdTech companies. None of these companies’ products were deployed in comparable ways. The Director of Engineering wanted parallel structures for presenting support information.

Further complicating the issues, Imagine Learning moved their support documentation from PDFs to a quickly built website in 2015. The PDFs were digitized without considering naming conventions or a navigational hierarchy. Only one technical writer was staffed to the project who created and managed these updates. However, usability issues were accruing at an alarming rate due to the lack of UX consideration given while building the website. Seen below are screenshots from the legacy website:

homescreen imagine learning before redesign

release notes original imagine learning site

Solution:

We built an intuitive and integrated website for the four new products that were acquired and consolidated under the Imagine Learning name. I worked on a Scrum Agile team and handled the user research, created the information architecture, and wireframed a comprehensive website. We launched

the website in July 2017.
mock up of finished website in use

Process:

I worked with a project manager, technical writer, Drupal engineer, and graphic designer. In the course of conducting ten rounds of research and many additional design iterations, I documented the primary task flows to create design documentation and wireframes. The new sitemap, naming conventions, and page structure have been heavily influenced by my research.

Current Task Flow:

In order to comprehensively understand Imagine Learning’s products, I generated flowcharts for each product to document their convoluted deployment processes. Input from relevant departments helped us understand the intricacies of the implementation process. These steps were unclear and even difficult for internal staff to describe.
Archived Imagine Learning support site user flow

Card Sort:

I created an open card sort to test the navigation with five internal customer support members. Even though they used the site daily to link clients to troubleshooting solutions and to personally keep informed of new deployments, the test participants couldn’t understand the current naming conventions of the support site pages. After I translated their comments and card groupings, my main takeaway was that strikingly different user groups were visiting the support site. The primary users are school employed engineers focused on mass deploying software and pushing updates on multiple devices; teachers were subsequently linked to the site if problems are encountered in the classroom. However, elementary students were also directed to the website if there were issues completing their homework. These groups, plus our customer support team, don’t have the same user goals and technical computing capabilities. The naming conventions are imperative to assisting the engineers to find content quickly, but would likely confuse the teachers and students.
Dendrogram from card sort

Field Visit:

Based on questions raised during the card sort, I wanted to know when district technicians turn to the support site and how Imagine Learning products are used in schools. We organized two field visits. The most crucial information gathered was that every classroom had multiple different devices. Each device has different deployment steps, so local technicians deploy multiple times at each school.

Initially, after seeing that each school had so much variance in devices used, I wanted to organize the top navigation as user goals like system requirements and then have the four Imagine Learning products as sub-navigation. I quickly concluded that it would be confusing to have the products as sub-navigation. District technicians decide which product to deploy and can then jump between devices if necessary, but wouldn’t jump between products.
children using Imagine Learning products on field visit to schools

Interview with a Technical Support Engineer:

I interviewed Imagine Learning’s lead Technical Support Engineer. He said that he had written an email template to use for new work orders. It contained links to specific pages because the labeling on the site was not intuitive. He shared this workaround template with other engineers, and they sent it to all of the local school technicians. The old support site’s top navigation didn’t answer the primary user goals and helped me surface information that new clients needed for the new website. Based on this navigational need I sketched an idea that was used in the final design.

Paper Prototype Testing:

Based on my generative research, I mocked up paper prototypes. I created and ran a usability test with six participants with varying levels of experience with the Imagine Learning products. The main finding was a further need to prioritize content to enable user goal completion while removing superfluous content.
all paper prototypes next to current iteration of site map

Task Flow:

During discussions with my team and the other product teams, we decided to focus on two target users–the school technicians and the internal technical support team. The teacher portal was ramping up documentation production, and there was no way to address the needs of students on one site without underserving the technical readers.

Once I had ascertained the user goals, I started the design documentation with new task flows. From there I proceeded to link that content together to create a sitemap.
Cloud Installation flow for Imagine Learning

Sitemap:

The main flaw in the old site was information architecture (IA). The sitemap was a living document that changed throughout the design process because the content labels and hierarchical structure of content were imperative to the redesign’s success. I ensured the inclusion of new research insights from my research while addressing the primary user tasks.

imagine learning support site map draft

Focus Group:

One of the last group of users I was able to test was the Technical Support Engineers because they work remotely. I needed their input because they are the most frequent and technical user of the support site. As soon as they were at headquarters for training, I conducted a focus group with 12 participants. The results showed a universal desire for new navigation. The participants wanted information restructured and to redundancy remove.

There was a lot of information to translate after the focus group. To efficiently run through options I took a piece of paper and sketched out ten ideas. From there I critiqued each iteration and pulled the strongest features into the next phase of design.

sketches of ideas after testing

annotations of critiques and benefits of each design idea

Usability Testing with Low-Fidelity Prototype:

I wrote and moderated usability tests with the current prototype for three of the engineers, not in the focus group. All users liked the consistency of information presentation and new navigation topics. One participant said that the new site was easier to use than the previous site and that he liked the tabbed content configuration. I caught multiple design flaws in this round of research which I reported back to my team and immediately fixed.

deployment wireframe imagine learning

release notes wireframe imagine learning

Closing out My Contract:

My work at Imagine Learning had the benefit of an all-female development team and, consequently, was one of the most rewarding professional experiences. These women strengthened my desire to promote more inclusive work environments.

Development Team of All Women for Support.ImagineLearning.com

The Final Product:

Because my contract was ending in December, I ensured that the development in Drupal progressed quickly, and the graphic design was in the process of finalization. The team and I felt confident the graphic designer could handle the final UX design needs. In addition, I made myself available for support as needed. The visual design did evolve after I left, but the IA and labeling remained intact.

final website Imagine Learning
Release notes from final website redesign Imagine Learning