skip navigation

Chattanooga FC Academy Homepage Makeover

By Andrea Hyduke, 10/24/16, 5:00PM CDT

Share

CFCA gets an overhaul with a SportsEngine homepage makeover

SportsEngine's homepage makeovers kicked off a couple of weeks ago when we selected Colorado Junior Crew  as our first winner of the contest.

Our team gave Colorado Junior Crew's homepage a tune-up in design and usability. One happy organization later, and we are excited to announce Chattanooga FC Academy out of Chattanooga, Tennessee as our second winner of the homepage makeover.

Chattanooga FC Academy already had professional looking graphics for its background and banner, in addition to a lot of valuable content for its readers to consume right on the homepage. Our team jumped in to enhance the academy's homepage layout and functionality.  

 


Follow Along

Check out our step-by-step transformation and learn some tips along the way to give your own website a little more star power before the season hits.


Tab Element 

Before:

Originally, CFCA had multiple sections on its homepage that hosted a pool of articles ranging from player spotlight stories to coaching resources. This had the potential of making it difficult for visitors to find exactly what piece of content they were looking for.

After:

By implementing a tab element, all different categories of content are located in one space and simply placed under the correct tab for easier navigation and a cleaner look.


Before



After

News Article Layout

Before:

When adding news articles to a news aggregator, a common mistake webmasters make is adding all the content of the article to the preview text field (see sidebar). Doing this limits flexibility with the article layout. 

After:

An easier way to do this is to use a news article template that allows for easy plug-in of images and a side-bar aggregator that lists similar articles for your visitors to read next. This provides a better experience for readers and is more appealing visually.


Before



After

Quick Links

Before:

When looking through Chattanooga FC Academy's homepage we noticed a lot of important items that were sometimes in hidden places making it hard for people to find exactly what they were looking for.

After:

By adding a “Quick Links” section to the top of the page (we used the Call to Action page element), visitors can quickly access important information. A specific link we added to the “Quick Links” was “Club Notes.” This link references all of the previous emails that have been sent organization-wide. Prior to the makeover, these “Club Notes” consisted of a single text box page element that was continually added to. We now have them each listed as a separate news article so they are easier to find.


Before



After

Social Media

Before:

Similar to news article creation, there are a lot of ways for organizations to promote their social media accounts on their websites. Using code elements, photos and page elements, social media references can be placed anywhere on a site. At first,  Chattanooga FC Academy was using a combination of elements and manually plugging in URLs that directed out to their social accounts.

After:

A couple of best practices to follow when it comes to social media are;  1) Entering your social account information in one location, the admin control panel. This will allow the info to reflect throughout the entire site. 2) Using the Social Media Links and Feed Reader page elements for social accounts is easier than embedding code into the code element. This makes it possible for automatic updates to take place while the formatting stays intact.


Before


After



Before


After

Weather & Venue

Weather and venue status sections are important for many organizations, especially if the sport is typically played outdoors. Chattanooga FC Academy originally had multiple custom weather elements including the current weather, 7-day forecast and doppler radar, all in code form. It also had a venue section that minimally listed the field name and current status.

Benefits:

First, by using our weather page element, we added a single source of weather instead of embedding code from multiple weather reports. We also added a venue element for each facility, complete with address, directions, and status of the playing field. A finishing touch in this step included placing them all in a single layout container.  


Before


Before



After

The last two steps we took in the  Chattanooga FC Academy makeover are repeats from our last homepage makeover but important enough to reiterate. Below you will find a couple of bullets as reminders about why these are both significant game changers for your website:


Connected Sponsor Footer Bar

Benefits:

  • Saves time by only needing to update sponsors in a single place 

  • Gives your sponsors more space to be highlighted

Best Practices:

  • Use the SportsEngine template and simply build to your liking

  • Use vector images over bitmap for higher quality

  • For even more flexibility in design, use a text box for a heading and add the link to your sponsor's website. We recommend images in separate page elements


Before



After

Call to Action Upgrade

Benefits:

  • Helps direct visitors to particular area of importance

  • Can add personal photos and messages that are most engaging for audience

Best Practices:

  • Use the one-third/one-third/one-third layout container

  • Use 2:1 ratio for the CTA boxes


Before



After

Andrea Hyduke headshot

About Andie Hyduke

Andrea Hyduke is a product marketing associate at SportsEngine. She recently graduated from the University of North Dakota with a degree in marketing. Andrea grew up playing soccer, hockey, and golf in Duluth.

Andie's Social Media Contacts