WebCRD & ReadyPrint Documentation

Phase 1

The WebCRD Master Help page needed to show all documentation PDFs available, which included more than 50 PDFs. In order to make the page easier to scan through, I designed a basic list that was divided by documentation type (eg, User Guides and Student Resources). Each line has space for the title, a short description, and links to the resources. In order to make the Master Help page easier to digest, each documentation type was then put into an accordion.

Phase 2

A year later, I was asked to improve on these basic lists. While the lists worked on module pages with a smaller number of documentation items, the accordions on the Master Help page confused some users, and the descriptions for documentation PDFs and videos took up too much vertical space.

To populate the new list, I created a "doc box": a compact rectangle that contained only the document name, PDF buttons, documentation type, and module name. In the first wireframes, I included a mouse-over hover that contained a document description, but my client and I eventually decided that the descriptions were unnecessary. The doc boxes are color coded by documentation type, making them easy to scan through on each module page.

For the Master Help page, the doc boxes are still sorted by documentation type. However, at the start of each section a sub-navigation system is inserted, to make it easy for people to jump between documentation types, and an explanation of each documentation type has been added to the top of the page.

Phase 3

In July 2020, I was asked to improve the aesthetic of the menu in the tri-panel screen layout as well as the design of the Administrator landing page. I ensured a consistent aesthetic between the menu and the typography of the page content, and I integrated the breadcrumbs, search bar, and utility buttons into the page content instead of separating them out.

For the landing page, I considered the purpose of the page and built the design around that functionality. This led me to make the search bar front and central, standing out with a thick outline. I wanted to make the landing page feel more connected to the rest of the Administrator help site, so I included the new menu structure. This made the old grid of buttons obsolete, letting me bring to prominence the quick links sections that would be of more interest to users.