One of the most challenging tasks of designing a website is making everyone in the athletics department or conference happy. It's troublesome because gut instincts and politics are not always the best guides, and the number of people you have to please can shortchange the design.

Recently a conference approached us that was willing to take a completely fresh direction with its website. The New England Collegiate Conference (NECC) is a Division III conference that felt it had tried all the recommended approaches to a conference website and challenged us to think of something new. We want to share how we approached that challenge and the results so far.

Traffic-driven analysis

We started by looking at the data. We dropped all assumptions about what should go onto a website and looked at the traffic reports to see where fans were going. We categorized the types of pages, like scores, schedules, player pages, standings and releases.

This data is broken down by the major categories of content in the left column and more specifics in the right column.

Lessons from the data

We took away several key lessons that used while designing a new layout for the home pages.

1. Dynamic content is key — Fans spend the most time looking at scores, schedules, standings and the various statistics reports.  We expected this would be a major area but not that it would be this much larger than the releases.
2. Traffic not correlated with effort — Following on the above point, all of the time the conference staff would invest in writing various types of releases did not generate significant traffic.
3. Top content is seasonal — This is not apparent in the above table, but in comparing traffics across months, the in-season sports received so much more traffic than the out-of-season sports.
4. Player pages were much higher than expected — We did not expect that the fans would be looking at player statistics on the conference site. This is something that Stat Crew does not create with the conference software, but seemed to be really valuable in stats reports.

While these insights were garnered by looking at Google Analytics, useful data can be found in the traffic reports or more advanced tools like Crazyegg.

Since we're breaking the mold, update the design too

As we were taking all of the lessons into a new layout, we realized how radical this design was going to be compared to what sports websites normally look like. The conference was ok with this new direction, and with that freedom, we decided to go ahead and add a lot of the latest design features too. Here is what we added:

1. Web fonts — Newer browsers now support much more flexibility when it comes to fonts, and allow us to take a different look that fits the look of modern websites.
2. Masonry headlines rather than rotators — Rather than use the tired rotator look, we went with what is called a "masonry" effect. This technique stacks stories of different sizes into a lengthy area, and they have the look of stones in a wall. You lose the ordering and use much more space, but the space is used optimally.
3. Emphasis on vertical scrolling — Following another current trend in site design, we want long pages that scroll vertically. No more scrolling left to right, no more trying to squish content above the fold and no more stacks of multiple horizontal columns that compete for your attention. This is a common move away from the newspaper look because that never really worked on a monitor and it's time to let go of the holdover from print days.
4. Flat design without edging, shadows, and 3d effects — This is what Apple and others have pioneered in design and goes against what most of you ask for. We doubt that a lot of sites will want to pick up this latest trend for several more years, but we were taking a lot of risks with this design and included this as well.

It's always a balancing act between doing the latest and greatest and creating something that will meet the needs of all audiences. This design was deliberately edgier than the sites that clients are typically looking for.

Screenshots so far

This site is still being developed and will be launched later this month, but we have some screenshots to show what it looks like. There are a few areas I want to highlight (and explain why they work) as you look at this screenshot.

1. Stats are the top of the home page — The first thing you'll notice with the new design is that we're featuring players and statistics on the home page. The sport-specific home pages will similarly have a stats-heavy emphasis as this is the rich data that fans are seeking.
2. The home page of the site is dynamic based on time of year — This is the most radical layout change. Normally the home page is a mixture of everything going on in the athletics department, but the layout is static throughout the year. The site will look no different in April than it did in October. We wanted to change that. Additionally, the sport pages will look different in season and out of season. Once the season is over, you'll see more end-of-season honors and photos than the scores and stats you'd see during the season.
3. Fewer big photos — This is simply because conferences struggle to get these, so we didn't want to mandate extra work that will quickly get stale. The smaller thumbnails with sport-specific default photos make it easier for the conference to post what it can quickly and easily and keep the site fresh.

Now the screenshot.  Let us know what you think!