Inside the Design: CenterState CEO Website

By Cowley Team
01/15/2016

Cowley recently finished a complete overhaul of the CenterState CEO website. We gave it a brand new design, integrated it with the Drupal Content Management System, and introduced a whole new user experience that makes the site easier and faster to use.

Click on a “+” sign to learn more about our thought process behind some of the website’s design elements and insights on how the site functions. A full text transcript can be found below. (Currently this interactive presentation is not viewable on phones)

Simplified Navigation

It was important going into this web redesign that we take the time to plan and think deeply about the site’s page structure and navigation. It’s important from a user perspective to be able to easily find information within 2 clicks or less. We were able to streamline CenterState’s content into 5 main categories to keep things clear and organized. 5 is a nice round number that doesn’t overload a user, and still gives ample room in case a new menu item is needed in the future. With this new navigation, users will be able to clearly identify where to look for the information they need, and for CenterState, it will narrow their focus when continuing to add content to the site.

Header Image & Text

A good portion of the “above the fold” design is this large image and bold message. The image changes automatically upon different page loads, and very clearly represents what CenterState CEO is: Economic Development & Business Leadership. A first-time user to the website needs to understand the purpose of CenterState in an instant. So, we created this headline to encompass what they do from a broad level in just one line.

This portion of the site also introduces a light red gradient from the CenterState blue to give the site a pop of color and energy. The gradient provides subtle, yet very noticeable, warmth to the design that is pleasing to the eye. The image is also 100% width (along with the backgrounds), which makes the site look current, and works well for the responsive design and functionality.

Rotating News & Events

It’s important that CenterState’s audiences stay up to date on all of the information, events, and offerings within the organization. So, we included a rotating News & Events section that scrolls through the most recent news stories and the upcoming events. With this feature, returning users to the site can stay current on what’s happening. These news and events are also completely self-managed by the CenterState CEO team because we built the site using the Drupal Content Management System.

Staggered Photos

It would be nearly impossible to encapsulate everything that CenterState CEO is in just one image, so we had to find a creative way to introduce more photography into the site. We came up with this staggered/panel look on top of a dark gray background. This effect really allows the photos and the colors in the photos to pop off the page.

Scrollable Focus Areas

CenterState has core areas that they are focusing much of their efforts: Business & Economic Development; Innovation & Entrepreneurship; Economic Inclusion; Research, Policy, & Planning. We wanted to bring an extra focus to these initiatives, but take up minimal space doing it. So, as a user scrolls across the icons, the title appears. And, once clicked, a visitor is sent to that dedicated page to learn more about what CenterState is doing on that topic.

Arrow Element

As a user continues to scroll down the page, they’ll notice subtle arrows. The arrows have a two-fold purpose: 1) signify movement forward and 2) lead the visitor. So much of what CenterState does is help grow the local economy and move it forward in a positive direction. The arrows subliminally hint at that and involve another element of movement to the site. The arrows also are there to lead the user down the page. The mind naturally follows arrows as directional points, so by adding them down the page, we give the user a set path of information to follow.

Call to Actions

The arrows on the page ultimately lead a user down to “Ways you can get involved…” and these are the main call to actions we want someone to do on the site. The call to actions use the green color we’ve used for other buttons on the site and give a user just three options. This simplifies their choice and increases the likelihood they’ll complete the goal we’ve set for them.

Footer With Easy Access Pages

At the bottom of the website is the footer, which will be carried throughout the entirety of the site. This allows a user who has made it to the bottom easily find contact information (which was also at the top of the page), a specific page within the site, or access the new and improved business directory with the click of a button.

Let's
TALK
Contact Us a
Stay In
TOUCH

Sign up here to get our monthly newsletter and blog updates.

Sorry for the quiz. Just making sure you're a human.

Latest Blog Posts

July 5th 2023

Jul 5th 2023

The most meaningful attributes of a successful brand are...

May 9th 2023

May 9th 2023

What's our take on AI?

January 12th 2023

Jan 12th 2023

Cowley included in "Marketing Metrics" article from Drive Research

December 4th 2022

Dec 4th 2022

m-tip 9: Have you utilized the power of social media "groups?"