skip navigation

CJ Crew Homepage Makeover

09/21/2016, 7:30am CDT
By Andrea Hyduke

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.

Learn how to change the color of the logo name field

Learn how to remove the default border on images


Before



After

Learn More

To learn more SportsEngine Sitebuilder tips, visit the SportsEngine help center.

Discuss on the Community Forum  //  Share or Tweet

    About the Author

    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.

    Email Andrea a Comment or Idea

    Tag(s): Showcase