skip navigation

CJ Crew Homepage Makeover

By Andrea Hyduke, 09/21/16, 7:30AM CDT

Share

Colorado Junior Crew selected as SportsEngine's first "Extreme Makeover: Homepage Edition" winner

In August, we opened up submission for our users to win SportsEngine "Extreme Makeover: Homepage Edition". So many websites out there are on the brink of brilliance, and with a little help from our internal team, we figured we could utilize the built-in page elements, put best practices to work, and give one lucky organization a transformed website.

After much anticipation, our first winner was Colorado Junior Crew, from Boulder, Colorado! An organization with a fully functional website that just needed a facelift on the content and usability side.

Follow along below to witness 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.


Friendly Name URLs

Benefits:
Having messy URLs can confuse your visitors when navigating your site, and make your org less searchable on the web. By adding “friendly name” URLs to your page, they will look cleaner in the address bar, and will also help from an SEO standpoint. URLs that clearly state what is on each webpage will be easily searchable, and found more often by unfamiliar searchers.


Before


After


Sponsor Footer as a Template


Benefits:
Managing and updating a sponsor’s content across multiple pages can be time consuming and error prone for webmasters. By creating a sponsor footer as a connected template, you can make updates to the sponsors in a single place and it will be reflected wherever the template is used. In addition to that, you can give your sponsors optimum exposure by letting their logos and info live on more than one page. 

 

Best Practices:

  • Use the SportsEngine template, and simply build-out 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


Customized CTAs


Benefits:
Having well designed call-to-action elements at the top of your page will help direct visitors to areas of particular importance, especially visitors unfamiliar with your website. By using our Call-to-Action page element, you can add personal photos and messages that are most engaging for your audience. For CJC, we chose “Rowing 101” for newcomers to the sport, “CJC store now open!” for those looking to purchase gear, and “Our programs” for quick access to all of the teams in CJC.


Best Practices:

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

  • Use 2:1 ratio for the CTA boxes


Before


After


Background and Banner


Benefits:
A lot of orgs struggle with using the page elements and built-in theme options to show their unique personality. Having a generic black, textured background is fully functional, but we chose to add a tinted rowing image as the background and a banner to really help tell the story of CJC’s organization, and give their homepage a little bit more character.  

Best Practices:

  • Choose a background image that is at least 1000px wide and 1600px tall

  • Check “The background is fixed with regard to the viewport” to avoid the background scrolling


Before


After


Layout Container Sizes
 

Benefits:
Having a library of high-quality action shots and team photos to use on your homepage isn't always realistic. From a visual standpoint, one giant low-quality picture in the single layout container isn’t as appealing to viewers, as a two-thirds/one-third container, or a one-third/two-thirds container. By changing the layout container sizes on the top of the page,  we reduced the size of the main image, and allowed options for lower quality photos to be used, without affecting the page's visual impact. This also solved the problem of unnecessarily pushing important content further down the homepage.

Before

Before


After


Brand Consistency


Benefits:
Confusion on who you are as an organization can be at an all-time high, especially for newcomers to your organization or sport. A series of small tweaks we made throughout the site saved CJC from this confusion, First, we changed the color of the logo name field on the top of the home page, so it matched the colors of the organization. Next, we audited the site to make sure there was consistency in punctuation, case and language (ie: a club is referred to as a "club" throughout the site, not a "program" or "team") Lastly, we removed the border on images throughout the site for stylistic consistency.


Before


After

Learn how to change the color of the logo name field

Learn how to remove the default border on images

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