Web Design and Development

Updated WordPress informational website design with a focus on 508 compliance, accessibility, and plain language. Website uses Lexend variable font, a font that is designed to reduce visual stress and improve readability.

Key website features:

Meaningful website architecture

The previous location for tick-borne information was buried on the sub-site Environmental Epidemiology under a tab on “Bugs” and Human Health.

The problem was that it was hard find the information, the information was combined with other “bug” conditions, and to navigate to within the whole VDH multi-site.

The solution was to move the content to its own sub-site allowing the content to be easier to locate and to have a shorter url for marketing campaigns.

Designed with the audience in mind

The original Tick website did not have a focused audience. Edits to the content were made to the to follow Plain Language Guidelines and Universal Design Principles.

Updates included:

• Content edited for the average reader using plain language
• Headings are meaningful and useful to the reader
• Content is written with short sentences and sections
• Short bullet points to organize information

Graphics used to emphasis content

People often rely on familiar icons and symbols to understand and navigate content. Using the tick symbol from the logo, I created icons for each page using common symbols to assist in relaying information.

Images were added to assists with various reading levels and skim readers, and add context to the information on the page.

Important content emphasized

Page Summary

Page summary at the top of each page. When needed quick links to information on the page.

Accordion for long content

For pages with long content, important content was pulled out and the remaining content was put in an accordion to allow the reader to find information easier.

WordPress website with a focus on 508 compliance, accessibility, and plain language. Created a resource directory based on key audiences to allow resources to be automatically posted and sorted thorough out the website.

The Mpox website gave the opportunity to build on what we learned on the COVID- 19 website and brainstorm ways to create a structure that would allow web content on a contagious disease to be reproduced in timely manner.

Key website features:

Meaningful website architecture

Working with PACT plain language editor and team leader we created a website outline and structure that could be reused for most contagious diseases.

The overall reusable website architecture would be audience based:

• Information about the Disease (for the General Public)
• Information for Healthcare Providers
• Information for Partner Organizations

The information for the general public would then based on content information:

• Signs and Symptoms
• Prevention
• Risk and Testing
• Vaccination
• Treatment
• Data

Icons to navigate content

Symbols help people that struggle with language to navigate content, and allow users to easily and quickly associate groups of information.

To increase usability I worked with the PACT graphic designer to create a reusable set of icons to distinguish each of the general public information sections.

Meaningful headings

Based on Usability.gov: Writing for the Web and research that say users read about 20% of the text on the page, our focus was on making headings easy to read and scan.

For the Mpox, the sub-headings for the content pages were written as questions.

Homepage questions link to answer

The homepage was then designed to highlight the content page heading questions to allow the website visitor to easily find the answers to their questions.

Skimmable headings on content pages

The headings on the content pages are easy to find and skim read for the visitor.

Resource Directory Hub

An important part of the website is the ability for key audiences to find curated resources.

Ability to find resources easily

A resource directory was created that was organized by:

• Audience
• Resource Type
• Source
• Languages

Creating the resource directory allowed specific visitors to find related resources quickly.

Resources were able to be added to more than one category to be found by various criteria. Now it would be easy to find all resources in other languages. Prior to this resources within language were siloed on various web page and difficult for visitors to find.

Hub for all resources

Prior arrangement for resources was to posted individual links and documents on specific web pages. Each page on a website might be maintained by a different team. This created issues with updating content, and duplicate content. Creating a hub for resources allowed resources to be gathered and organized across the website.

Now resources are updated in one location, and based on categories chosen will automatically post in the correct location.

For example, Mpox Close Contact with High Exposure Risk Information Sheet will show up in the Resource Directory and will be updated and added to the the Risks and Testing page.

Webpage Gallery