Case Study | Sarasota Bay Estuary Program Website Rebuild

Website Rebuild Objectives

  • Ensure that the website mobile friendly
  • Improve the appearance and usability of the website
  • Ensure that SBEP Staff can access the website while it is under construction
  • Work as a team with Sarasota Bay Estuary Program (SBEP) Staff

Industry

Intergovernmental Organization

Challenges

In 2011 the old Sarasota Bay Estuary Program website took advantage of a theme called Headway. It was version 2.0. Headway used a grid based system to allow users to create a myriad of layouts and was ahead of its time. Over time an updated version of Headway came in to play but unfortunately there was no "path to upgrade" and there was no budget for such a large task considering the website was over 70 pages excluding blog and news posts.

In 2017 resources became available for a complete rebuild of the website. The initial challenges were:

  1. Determining the new look and feel
  2. Condensing 70 pages of content down to 40 - 50 pages and moving all content manually vs. importing it
  3. Ensuring that the new website retained all the existing functions of the old website including the Habitat Restoration Map and other antiquated elements
  4. Ensure that the website loads fast and looks good on all type and sizes of devices
  5. Enable the use of drag and drop technology so Sarasota Bay Estuary Program staff could edit and update the site easily

Look and Feel

For any website the header is very important because it affects so many things. After that the large image had to be iconic. Really showing off Sarasota Bay. Our early designs included a "burger bar" menu even on large screens. That was eliminated so we could move the social icons up into the header.

Website Header Mockup
Header Mockup early June 2017

To come up with a look and feel we reviewed several other websites for features we like and for inspiration. As a web developer the emphasis on having content above the fold was always a priority in the past. The more prevalent use of large, beautiful images on modern websites had a major impact on our design.  For aesthetic reasons we chose to feature a full screen background image on the home page on all screen sizes.

Old Sarasota Bay Estuary Program Website
Completed in 2011.

New Sarasota Bay Estuary Program Website
Completed in 2017.

Website Usability Improvements

Responsive Design

The new website employs both responsive and mobile first strategies to ensure usability and ensure the site is fast loading. For example the home page "hero" background image is actually several different images. The correct image is specified by prioritizing mobile devices by specifying the smallest images first.

Navigation

Paring down the website was a great success. The final product has 23 pages in the navigation (down from 70+) and 42 pages with important content.

Usability is improved by not overwhelming the audience with too many choices. Users who want more detailed information can drill down through specific pages, use the search feature or the sitemap in the footer. Credit for this streamlining effort goes to the SBEP outreach manager Darcy Young.

Draft version of the Navigation
First draft of navigation with 19 items.

Sarasota Bay Habitat MapOne of the most significant usability changes was the increase in base font size to 18px and using a sans-serif typeface. Navigation items and submenu items are significantly larger than the old website was originally. Social Icons are large and easy to click and spread out further on small devices for fingers.

One of the functions of the website is a legacy tool called the Sea Level Rise Viewer created over 7 years ago. While this is not actually part of this website it is an important resource. It is not mobile friendly; it is functional down to a tablet size. The viewer was improved by editing existing code to simplify and eliminate redundancies by depending more on public data so it loads much faster.

A new feature was added that also relies on public data is the Sarasota Bay Estuary watershed map. This tool was created using GIS data layers by SBEP staff. It is mobile friendly.

Part of rebuilding this website involved moving and converting various document formats to PDFs and providing thumbnails images to link to PDFs (there are hundreds of PDFs on this site).

One example of how we eliminated pages was by combining all "media center" items on one page. Previously there were over a dozen. By using tabbed layouts for different years were were able to fit several years of newsletters, media coverage and press releases on one page.

Another legacy function of the website was a print format field guide which was converted to large images that can be viewed effectively using touch gestures on mobile devices.

To enable users to find information from old links to the website we created a limited number of redirects for pages and some wildcard redirects for major sections of the website.

A broken link feedback system was created so links from other websites could be corrected or additional redirects created for important content. After users submit a broken link they are redirected to a search page so they can find what they need.

Sorry Page Doesn't Exist Broken Link Page.

Usability and Fast Page Speed

Page Speed is a huge priority for Empowered Marketing. We strive to make every web design project result in a fast loading website. In this case our efforts were very successful in spite of having large images on the home page and a significant amount of content.

Often designers don't pay attention to details so they are bits of coded loaded on pages where they aren't even needed. Empowered Marketing uses several techniques to ensure pages load fast which includes minimizing how many different files are loaded to display a single page.

GTMetrix Report

Staff Access and Working as a Team

On this project staff access to the website during construction was critical for 3 reasons:

  1. Ability for staff to review work in progress
  2. Ability for staff to edit content
  3. Ability for staff to create content and add media

We made an decision early in the process to use Beaver Builder Pro for formatting editing the content. Even though Beaver Builder is very flexible it was important for us to adhere to some standards for a consistent look and feel. This was established early on but it also evolved over time. The biggest enhancement to the appearance of non-home pages was to include a large image on every page. The diversity of the images really shows off Sarasota Bay and makes the website more inviting.

This was truly a team effort starting months before the project officially started with SBEP eliminating pages to choosing photos and establishing the initial navigation.

The project completed in 5 months. Thank you to all SBEP staff who were involved in this project as it couldn't have been done without your help and knowledge of the organization and Sarasota Bay.

Working with you [Frank] was a pleasure. You were quick to respond to all of my inquiries, and none of my unique projects put you off. You were able to find a solution for everything on my wish list. I truly appreciated your willingness to teach us how to use WordPress and Beaver Builder so that we can continue to add to the site over time.

~ Darcy Young, SBEP Outreach Manager