top of page

Web Design
FACILITY MASTER PLAN

A dynamic and continuously evolving web page.

Laptop and cell phone with screens open to the same web page. The phone show FAQs in accordion elements, the laptop shows a timeline.

BACKGROUND

In the spring of 2023, the administrative team of a school district with over 12,000 students faced a difficult decision: the space across its 11 elementary schools was unevenly utilized, thus leading to overcrowding at a few schools.

Facility space was a common concern amongst community stakeholders. In feedback gathered from over 1,000 community members, 13% of the responses expressed concern for overcrowding and facility use. Administration engaged in a demographic study to determine what options they had to alleviate some of these concerns, and the path forward ultimately came down to the future of two schools.

These schools have been the epicenter of a years-long debate that predates the tenure of any current administrator. Recognizing the delicacy of the situation, the school district required a means of communication that allowed them to drive the narrative.

How might we
effectively communicate
and clarify the reasoning behind difficult decisions that greatly impact a community?

Laptop showing a timeline section on a web page.

Administration needed a webpage to serve as the primary source of information related to this and future facility space decisions. This page required a timeline, a section for frequently asked questions, and a section that compiled all of the links listed on the page. As the district's primary web manager, administration called upon me to create a solution for their communication needs.

Create a website that is CLEAR

CLEAR USER EXPERIENCE

Distinct sections and bold headings create a visual hierarchy of information groups that can easily be scanned. This reduces the cognitive load of users and allows them to pay attention to the information of their choice.

Distinct sections

Bold Headings

To depict a timeline of events, the left column uses distinct sections clearly group events that occurred at around the same time. The bold headings briefly describe what events occurred within that period of time. Headings stand out from the body text while still keeping the visual relationship between heading and body.

CLEAR CODE DESIGN

Though I am not the only web manager in the district office, I am the only one who knows coding languages. Building a clear code design was necessary so other managers could easily update the content of the page should I be unavailable to make changes.

<!------COMMENTS FOR SECTION BREAKS--------->

    <div>

        <h2>Why clear code is important</h2>

        <p>Using comments to signify section breaks distinguishes similar pieces of code from one another.</p>

        <br>

        <p>Consistent indentation of HTML tag pairs also draws a clear relationship between pieces of code, especially for someone who may not be familiar with the language.<p>

    </div>

Create a website that is DYNAMIC

DYNAMIC USER EXPERIENCE

This page needed to contain a lot of dense information and will need to be frequently updated as new developments occur. With over 20 potential questions to address, this presented a challenge in presenting all information without significantly decreasing engagement.

DYNAMIC
CODE DESIGN

With current and future timelines on the page, those sections need to be fluid enough to reflect the passing of time. Information in the "Future Timeline" section will have to be incorporated into the "Current Timeline" section to signify to users that the webpage is current and relevant.

Interchangeable CSS Classes

<div class = "

" >

By using clearly defined and labelled CSS classes, any web manager can easily change the appearance of the page with minimal changes to the code.

Create a website that is ACCESSIBLE

ACCESSIBLE INTERACTION

Many users are not be able to interact with a page by using a mouse due to visual or mobility impairments. Creating interactive elements that are accessible by keyboard navigation ensures that people of all abilities have access to the same information.

ACCESSIBLE IMAGES

Alternative text is used on all images on the page. Using descriptive alternative text ensures that the page information is accessible to all users, including those with visual impairments. Furthermore, all the information presented in the images is fully written in the live text. The images themselves are solely for supplemental visual aid.

Visual depiction in beige of the Future Timeline for the Facility Master Plan. Timeline spans to Fall 2024. Details of this graphic are listed below."

<img alt="Visual depiction in beige of the Future Timeline for the Facility Master Plan. Timeline spans to Fall 2024. Details of this graphic are listed below.">

Computer screen showing the top of a web page called "Facility Master Plan."

"Gema is one of the more talented employees I've supervised. She has elevated the position and her fingerprints are and will continue to be seen in our organization's work for years to come."

Ready to connect with your community?

Let's talk about how I can help you create a beautiful and accessible website to increase traffic from a more diverse population.

bottom of page