Studio IQ

Phone

Call us Mon to Fri, 9 AM to 5.30 PM

Phone +61 (0) 2 4260 7997
Location

11 Charcoal Close, Unanderra, NSW, 2526

Get Directions

More Than Just A Pretty Face

The Fraternity Club homepage after the redesign

After winning the job and understanding the users’ needs, it’s time for design!

“Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” — Steve Jobs

It’s sometimes hard to feel excited about redesigning a site you worked on in the past. In the case of The Fraternity Club, it came as a relief.

When we originally designed and developed The Fraternity Club’s website in May 2007, it was as part of an extreme overhaul of the club’s entire identity (including redesigning the logo, signage and supporting printed material). Here’s how the site looked when we delivered it that year:

The Fraternity Club homepage as designed in May 2007

Before: The Fraternity Club homepage as designed in May 2007

7 years later, the site hadn’t held up well.

After: 7 years later, the site hadn’t held up well.

That site was designed and developed on a very tight budget, and was heavily limited by a lack of high-quality original content (especially photography), but it served its purpose at the time, providing a credible web presence for the club that showcased the new logo and colours and answered the questions of their users.

But seven years is a long time on the web. In 2007, just 64% of Australian households had access to the internet, and even those select users spent just 2 minutes per day using the internet outside of their own home on average. To say the least, things are very different in 2014, when recent stats show that more than 35% of all Internet usage happens on mobile devices.

Interaction Design (How It Works)

As part of the exercise of producing the personas and user stories for the site, we established that there were a few common kinds of needs that many user types shared.

Contextually Relevant Information

The new Frat site shows custom contextual alerts based on the time of day and day of the week

As we began ideation over how to best allow users to achieve their stated goals quickly, it became clear that one of the most valuable additions we could make to the site was to allow the site to preemptively answer questions the user is likely to have when they visit the site. Is the club open now? Can I still get hot food? Who is playing on the big screen tonight? What’s the lunch special today?

These kinds of time-sensitive information are especially valuable for users on mobile devices (who are far more likely to be in the immediate area and for whom a page load can be a time consuming, painful process when using mobile data networks), but benefit all users.

We designed simple text-based alerts that could be configured by the club to show up during a temporary window at any time of the day or night, and which are prioritised visually, especially on mobile.

Ticket Sales

From the very beginning of the process it was clear that one of the club’s highest priorities for the website redesign was to use the site to manage ticket sales.

The Frat website can generate totally custom branded tickets for any show

Historically, the club could only sell tickets from the front desk at the club itself or over the phone. Reasonable, perhaps, in 2007, but an unreasonable constraint for users in 2014.

Selling tickets online means solving a broad set of problems:

  • Managing available tickets for the event
  • Integrating ticket sales made offline in the club’s box office or on the phone
  • Performing seat allocation (made all the more difficult by the fact that The Frat changes its seating plan routinely)
  • Taking credit card payments securely online (including handling refunds)
  • Designing and generating printable tickets
  • Handling ticket validation at the venue (including pass outs and other considerations)

Getting all that right without derailing the rest of the project was an exciting but difficult problem. The final solution involves generating wholly-custom barcoded PDF tickets for print-at-home use as well as box office ticket sales, and adding a special event box office system to the CMS to facilitate ticket validation at the door.

Mobile First

Many of the user needs we had identified occurred when the customer was already away from home—things like checking the club’s opening hours, or the date of an event.

In recent years, we’ve taken great care to apply responsive design practices when building websites (allowing content to seamlessly reflow to fit differently-sized window and screen sizes), but we wanted to take special care not to simply squeeze all the content down as-is and consider our job complete. Instead, we took a mobile first approach, attacking the interaction design of the site as though the mobile site was a separate, purpose-built site intended to answer questions and make the lives of visitors on mobile devices easier.

This had an impact on every subsequent design (and development) decision, including the sitemap, the photography and (especially) the way we present information like bistro opening hours and promotions (which we decided to present contextually based on the current time of day and day of the week, as described above).

Visual Design (How It Looks)

The Brief

The Frat has a proud Italian heritage, but the club has always prided itself as a great place for anyone to bring their family.

We were instructed to redesign the club’s website to modernise it dramatically and to make sure everyone felt equally invited to enjoy the club’s facilities, Italian or otherwise. It was also vitally important that the new site be as great on mobile as it was on desktop.

After discussions with the leadership team at The Frat it was clear to us that the new site should dramatically increase the amount of photography on the site to allow the site to reflect the club’s great atmosphere, and to therefore decrease the amount of stock photography and custom graphic design required throughout the site.

It also became clear that the club was slowly changing its brand positioning to a more upscale casino-type aesthetic to emphasise its shows and other entertainment options, and wanted the new website to make a confident statement in evolving the club’s visual identity (without actually requiring an identity redesign).

Phew, what a task! Family-friendly, but without undermining its adult entertainment options. A bold new visual identity, but still able to be used side-by-side with historical brand collateral.

Concept 1: Incremental Improvement

Concept 1 was an iterative improvement on the site's existing branding, modernised and made mobile-friendly

As part of that 2007 club branding exercise, we proposed the use of azzurro (light blue) as a hat-tip to Italy national sporting colours, as a way to allow the club to reflect its Italian heritage without needing to lean too heavily on the red, white and green of the Italian flag.

While this first concept was well received by the club for many of its visual elements, their leadership team felt its use of bright white and azzurro palette undersold the club’s nighttime entertainment options and—while modern—didn’t represent a significant enough break from their current visual identity.

Back to the drawing board!

Concept 2: A Clean Slate

Concept 2 used the same content layout but replaced the club’s traditional colours with black and gold

We took a cue from some of the club’s renovations and sophisticated visual identity and some of their specified style references and decided to try an iteration that was an entirely new direction for the club: no red, white and green and no azzurro. Instead, we went all-in (pun very much intended) on the sophisticated, entertainment-centric direction.

This concept was very well received by the club’s management, but there were some concerns that it went too far in the other direction, and could have alienated club members who were familiar with the club’s broader aesthetic.

It was clear that a compromise would have to be reached between the two concepts that balanced the club’s desire for a sophisticated public image to grow its member base with its existing members’ understanding of what the club looked like.

Concept 3: On The Money

Concept 3 took the best of the previous two concepts and presented The Frat as something familiar, yet positioning it for its future growth

The final visual design concept brought back the familiar azzurro, this time as an accent colour used sparingly to highlight important or interactive content. Some elements were carried over from each of the previous concepts to produce something that the club felt was forward-looking enough without alienating their existing (proud) membership base.

There was only one visual design task left to tackle before we could get building!

Photography

We produced a detailed photography brief describing composition and other recommendations to the photographer

One of the main problems that had always plagued the former Frat website was the low quality of its supporting imagery. Designed and maintained on a very tight budget, the site had been designed with heavy use of stock photography throughout, and in the years since it was first delivered to the club that part of the site had been increasingly neglected, with placeholder images used extensively.

The new design sought to change all that, being highly dependent on professional-quality, evocative photography. We knew at the time that this would require a significant additional investment from the club’s management, but we were confident of the results. The Frat competes with other clubs in the Illawarra for business, and most of its unique selling points are best told visually: its facilities had been recently overhauled, its food is anything but standard bistro fare, and its on-site sporting facilities are extensive and popular.

Luckily, The Frat agreed that the quality of the photography on the site would make or break the whole concept, and asked us to formulate a detailed brief for the photographer, defining the desired content, tone and composition we felt best supported the site’s design (along with a copy of the personas we developed during the discovery phase).

In the end, this was perhaps the single highest-value task we performed during the design phase. Filling the site with high-quality, site-specific photography instead of stock photography has helped reduce the need for supporting text content that users were never likely to read. Instead, visitors get an immediate feeling for what makes The Frat such a great place to visit. It’s also ensured that the site has retained its high-quality aesthetic far after handing over the reins of content management to the club’s own staff.


A picture of Kit Grose

About Kit Grose

Kit is the ruggedly handsome User Experience geek whose job it is to ensure the web and application development jobs we produce are useful, usable and enjoyable. His university qualifications are in graphic design, but Kit is just as much at home in front of a screen of code as he is in Photoshop.

Since 2007, Kit has been heavily involved in building usable information systems for the mining and resources industry and he’s a self-confessed typography and ice hockey fanatic.

You can read all of Kit’s posts, and follow Kit on Twitter.