To put it mildly, my district’s previous website was plagued by problems. An outdated content management system dictated how we organized content, resulting in a maze of drop-down menus and unruly sidebars. The search didn’t work (except to find outdated content that was supposed to be hidden) and pages couldn’t even be bookmarked. Lack of oversight and a login for every staff member meant that content was inconsistent at best, complete with empty pages and 90s-era animated GIFs. Those who did diligently maintain their space, would fight with the software for hours, as adding a simple textbox would throw everything askew. Access it on your phone? Hope you liked the frontpage, because you wouldn’t get any further.
A year and a half ago we began the process to bring our website into the 21st century. Our objectives with the redesign were to:
- Reflect our standard of excellence and better convey our brand
- Refine and reorganize our content to make it easier to navigate
- Optimizing for mobile devices, specifically smart phones
- Keep the website fresh with live calendars and active blogs
- Make it easier to support and maintain by 1) reducing the number of people who need to update the website and 2) switching to a software that’s actually WYSIWYG
Branding & Message
Months of planning occurred before I wrote a single line of code. We refined our brand and determined what messages we wanted to convey. We also created a prioritized list of who our audiences would be and what they needed from the website:
- Prospective families interested in enrolling in our schools
- Current parents and students looking for current information, e.g. upcoming events
- Community members looking for information on our district, e.g. budgets
- Staff members needing to access online resources such as our payroll system
- Et al. – visitors looking for directions, potential applicants looking for job postings, etc.
The primary purpose of our homepages would be to market our district and convey our core values, with a secondary purpose of providing quick access to the information needed by parents, students, and community members. Since most of our staff resources were located on other websites, there would be a few links to other “hubs” of information, but the district site itself was not intended for communicating with staff. Overall, we also made sure to avoid duplicate content, for example, linking to a district health page rather than having to update each building’s health office page with the same information.
Navigation
The redesign was a great opportunity to not only improve the organization of our content, but to get rid of outdated and unnecessary content. Rather than starting with what we had (which obviously wasn’t working) we started fresh, and pulled from our current content as necessary.
Mega Menu
To improve navigation, I implemented a mega menu instead of traditional dropdowns, to show visitors the all the main pages at a glance. Sidebar navigation was automated to display sibling and subpages, with the top levels pages always matching the navigation in the mega menu for consistency.
Search
The search function was customized to search across building sites, but break down results by school, with the option to narrow results to the current school. The staff directory was also made into a searchable database rather than a static list, with a breakdown by building.
Responsive Design
A fluid layout and relative-sized web fonts adjust the site content according to the viewer’s screen size. Content is not altogether removed from smaller layouts, but rather condensed into slide out menus, or linked to instead of embedded. In order to account for touch-based devices, hover interactions were not relied on for navigation.
Optimized for Mobile
Small screen sizes often indicate a mobile device, which can mean slow download speeds and limited data plans, so small layouts were optimized for mobile by hiding large media (e.g. the photo slideshow) and replacing images with lower smaller versions.
Visitors accessing the site from their phone are most likely to be looking for a phone number or directions, so all contact information was made clickable – phone numbers trigger the devices dialer and addresses open directions on Google maps.
Device Agnostic File Embeds
To ensure files and videos display all all devices, Google Drive and YouTube are used for all documents and videos, respectively. This also helps decrease data usage, as YouTube automatically compresses videos based on the users device and connection speed.
Dynamic Information
To keep the site fresh and dynamic, each school has a blog for announcements, complete with a commenting feature. Feeds from each school’s calendar are also embedded on the homepage.
Modern Software Open for Customization
The best part of the redesign was leaving behind a clunky, confusing, and outdated content management system (CMS). It was important to choose a CMS that fit our needs, rather than making our content fit our CMS. We considered a hosted solution, but we already had a dedicated web server with HostGator for our Moodle site, which could also house any variety of software.
Given that I would be the sole designer and developer, I made the case to use WordPress, which I know and love. Although WordPress was originally just a blogging platform, it has evolved into robust CMS. Most importantly, since it is open source software, WordPress can be easily customized and has a large support community.
WordPress’ multisite installation option enabled us to have a separate site for each school, while enabling me to manage them under a unified system. There were some disadvantages to choosing the multisite installation method, like having to update theme settings and menus on each site separately, but overall it has been a useful method for managing the website at a district level, while giving each school control over their own content. Having distinct subsites also enabled me to do a lot more programmatically, like dynamically displaying a list of pages without having to filter out other buildings’ content, and setting unique headers and footers for each building.
The Launch and Next Steps
After 6 weeks of user testing, we launched shortly after the new year, with the understanding that the project was not over…and technically never will be. When the site launched we had a feedback tab on every page, and adjusted the website in response to feedback as necessary.* We continue to monitor usage through Google analytics – how are people finding our site, what paths are they taking to their information (are these paths too long/complicated), where do people leave the website, etc.
There continues to be a list of improvements and additions to make, but it was important not to hold off launching until the site was “perfect”. It’s more valuable to live in perpetual beta, iterating early and often, basing changes on actual usage.
