How To Score 493/500 For A Website: Bluewire Media shares some of its winning methodology

Posted by Angus Russell

A few times a year, Bluewire Media will submit some of our latest websites to the IMA (Interactive Media Awards).

We’ve had much success over the years, with 6 “Best In Class” awards and 5 “Outstanding Achievement” awards. One of our latest entries, however, has scored our best mark yet – The Maura Fay Group’s Corporate Learning website managed to get a final grade of 493/500 or 98.6%.

So, bragging aside, what makes a website score 493/500?

Design: 98/100

The IMA website’s Judging Criteria page has this to say about design.

The design, or appearance, of a site is clearly important in establishing its appeal. We recognize that a well-conceived, well-developed design that serves the purpose of the site and stays on message requires talent and ability.

So how do we ensure that our designs serve the purpose of the site? Well, there’s a lot to it, but the key point is that we do a lot of work before the design phase.

All of our website projects start with what we call a Website Blueprint. The website blueprint phase is where we nut out the plans for the website, this includes (among other things):

• The technical aspects (what functionality will be required),
• The information architecture (or sitemap),
• The content strategy (tone of voice/language to be used, key marketing message, keywords etc), and
• The creative brief.

It’s the creative brief that helps us hit the nail on the head with design. In the creative brief, we start by doing a mini competitor review that identifies the good and bad features of competing websites. We also re-iterate the company’s personality. We then go on to develop some key design considerations which might go something like:

• Large, eye-catching images should play a key role in the design to create colour and set the mood.
• The corporate branding should remain clean and crisp on a white background while letting other page content (usually large images) create the mood of that particular page.
• The overall look and feel should be neat, clean and professional; this can be achieved by:
  • Using sharp(ish) corners and straight lines in the design
  • Designing with a grid layout
  • Utilising plenty of whitespace

The last thing we create is a mood board based on both the company personality and these key considerations. The mood board is used to demonstrate the kind of feel that we are going for and ensures that the final design is in line with the company personality.

In the case of the Maura Fay website, we wanted a professional looking website that still had plenty of personality and flair. We achieved that by using a corporate-style layout with sharpish corners and straight lines, while also using lots of bright colours to inject personality and flair.

Usability: 98/100

Usability is something we’re very big on at Bluewire Media, most of the office crew have read the classic Don’t Make Me Think by Steve Krug and we value the importance of good usability.

Our usability considerations begin in the creative brief, where we outline usability essentials and recommendations. We also pick apart the websites in the competitor review in terms of usability.

Some things we might commonly note about the competing websites are:

• Is the home page crowded? Or does it use whitespace well and limit the number of calls to action?
• The dark background works well for titles, but for longer passages of text it starts to get hard to read.
• Their menu items are structured according to buyer personas (E.g. “For Teachers”, “For Students”, “For Parents”; would that also work well for us?)
• Their menu appears crowded with 10 items, we should limit our main menu to 9 or less, and separate any others into a secondary menu.

During the wireframing process we also have in-depth discussions about the placement of elements, what is more important than what, and whether this, that or the other even deserves to be on a certain page. To ensure we have these ideas bouncing around, we always start with two or more of the project team sitting down with a whole lot of blank paper and just start sketching and discussing the pros and cons of their layouts. It’s a great way to arrive at the result quickly and ensure that the team knows why we did it the way we did.

Once we’ve agreed on the layout for the most important pages, one person will take over and create the rest in a neater way (usually Photoshop) to present to the client.

Content: 100/100

As I mentioned earlier, part of the website blueprint phase is the development of a content strategy.

In the content strategy, we look at:

• The target audience and the language they use,
• The company personality and how they want to come across,
• The key marketing message,
• The keywords that people search for.

From that we can come up with guidelines writing great copy. Some of the other tips we often give are:

• Write in a journalistic style (most important information first),
• Use descriptive headlines (not just for SEO, most people scan websites and good headlines can help entice them to actually read your copy),
• Talk about the problems that you can solve for your audience, rather than how good you think you are (in the copy, there should be more references to your customers than to yourself).

Credit where credit is due here though, in this case it was the staff at Maura Fay who took our guidelines and ran with them to score 100/100 for their copy.

Feature Functionality: 100/100

The Judging Criteria page of the IMA website has this to say about good functionality.

Good functionality should not attract attention to itself; it remains invisible to the user and doesn’t distract from the site’s primary message. In short, functionality is about ensuring the technology and programming on the site work well.

While the Maura Fay website doesn’t have any whiz-bang feature functionality, we do have some processes in place to ensure that any functionality we implement does work correctly. In short, we do rigorous testing.

There are three testing stages in the Bluewire Media methodology:

• Alpha-site testing (internal testing before we launch a beta-site for the client to see)
• Beta-site testing (the most rigorous testing phase, just prior to launching)
• Post-launch testing (ensuring everything still works after launch – running a test for broken links etc)

Our testing process involves each staff member testing the website in a different browser. We use Google Docs to create a form for each tester to complete, which then neatly compiles everyone’s responses in an easy-to-digest way.

Testing usually includes:

• Layout (checking for anything out of place, drop-downs going behind feature slide-shows etc)
• Forms (can’t submit without valid data, error messages are easy to understand, success message is obvious, submits properly to database, sends auto-responder etc)
• Broken/missing links
• Ease of finding information (E.g. for a staff member not involved in the project, “Find information on toucans”)
• Any other functionality will also have it’s own specific testing requirements.

Standards Compliance & Cross-Browser Compatibility: 97/100

I’ve already discussed how we do cross-browser compatibility testing, and there’s really no trick to it, other than You Should Do It!

To make it easier for ourselves though, we usually start developing a website by using the HTML5 Boilerplate. There are heaps of advantages to using it, but in terms of cross-browser compatibility, it offers a great way of targeting buggy browsers (Internet Explorer). Rather than creating specific stylesheets for IE6, IE7 etc (which mean more HTTP requests and slower load times), or CSS hacks (which don’t validate), it checks for the browser version before the <html> tag and adds a class to it. E.g. <html class=”ie6″>. This means that we can include our valid CSS for separate browsers in the same stylesheet by using .ie6 #content {}.

It’s a bit technical to go into any more detail here, but if you want to learn more about it, check out this article by Paul Irish.

Conclusion

Hopefully there are some tips here that you can take home, but what it all boils down to is that the secret to developing great websites is in good planning and thorough testing (who would have thought?).

[sc name=”Steve Krug Link”]