Action for M.E. Home

Action for M.E. came to Cubik requiring a new website to compliment their recent re-brand. The site has multiple objectives with the main calls-to-action pushing for financial support by way of repeat donations via long-term membership, as well as single one-off donations and an online shop. It’s also to act as a source of information and support for sufferers and carers.

Tools used for this project:

• Information architecture designed in Adobe Illustrator
• Look and feel designed in Adobe Photoshop
• XHTML and CSS hand coded in Visual Studio
• Built on the Cubik CMS

Launch site

1. Give them a good brief

Quite often a designer will be supplied with a brain-dump of fanciful ideas (probably verbally) and be expected to deliver the client’s or product owner’s vision first time round. In reality the designer very rarely gets it spot on at the first attempt, hence why the briefing and requirements gathering stage of a project is so important. The format and specific details that a project brief should cover depends on the project, but you should at least be giving your designer information such as the project’s goals, timescales and deliverables.

2. Stop interrupting them

The ability to come up with creative concepts on a regular basis can be very challenging, demanding a lot of thought and concentration. Productivity is more likely to come about from a continuous block of 6 hours rather than 3 blocks of 2 hours, hence I always prefer to block out big lumps of time to work on a specific project. Furthermore, stop summoning your designer into pointless meetings. As expressed in 37 Signals excellent book Rework, “Meetings are toxic”. When meetings are vital (sometimes they are!), try to arrange them sensibly around project time. I try to schedule morning meetings so that I can dedicate afternoons to project work.

3. Quit looking over their shoulder

Designers go through a creative process that comprises multiple iterations before ultimately deciding upon something they’re happy with. Looking over their shoulder and making comments part way through can disrupt that process. Wait for your designer to present their work before providing constructive criticism. If possible, a designer’s screen should not to be facing an entire office where colleagues are likely to comment as walking past.

4. Give them time to go through the creative process

Designers go through a process of indeterminate length in order to explore creative possibilities when putting a design together. This is why design is so difficult to put definitive timescales against. Great design for an expensive project doesn’t necessarily take longer than design for a low-value project, so don’t expect your designer to throw something together in half the time it would ordinarily take.

5. Encourage peer reviews

Designers can be defensive of their work but need to embrace others’ opinions in order to obtain different perspectives on design patterns and visual style. I always advocate feedback from peers once a concept is ready to be presented. A good designer should be adept at receiving criticism, but also be able to defend their design decisions where necessary.

My "artist's impression" of our entry to Flugtag 2011

Our entry to this year’s Red Bull Flugtag, taking place at Roundhay Park, Leeds, has been leaked! The team was proud to learn that of over 2000 applicants, ours was one of the 30 fortunate enough to be accepted. Above is my initial concept, sent as part of the application. It was also necessary to provide a quick summary of our theme for the flying vehicle, written by colleague and accomplished writer @Jamie_McHale.

Turn back the clocks several hundred years; the land is filled with knights, damsels in distress, war-hungry kings, dragons and mythical beasts. The people of Merry Olde England are rejoicing, their renowned hero St. George has slain the dragon which has terrorised the land for decades, managing to capture it in walls of stone and mortar. The peasants cheer, the jesters joke and the king’s power is restored; the trio are rejoicing at the foot of the castle-prison when the dragon awakens in an explosion of red mist, breaks from its incarceration and takes flight once more….

I’m desperately looking forward to our team of engineers bringing the vision to life! Unfortunately I can’t make the event on the 17th July, but have complete faith in the team to do a great job. Good luck Flugtaggers!

More details to follow as the project develops…

Project Governance

Assuming that you’ve already agreed to take on the Web project (and hence a cost has been agreed), the most important factors to consider when kicking off are:

• The client’s intended go-live date
• Who’s involved in the project?
• Who’s managing the project (on your side and on the client’s)?
• Who’s responsible for sign-off and decision making?

Tip: In my experience, unexpected external factors always occur, causing projects to take longer, so schedule in some slack when designing your project plan. Make sure that the people required on the client’s side (such as for sign-off) are available around major milestones. And don’t forget to include enough time for testing!

Functional Specification

It’s obvious that you shouldn’t spec a site without knowing the purpose of it. This goes hand-in-hand with Information Architecture, but knowing whether the site should integrate particular functionality is vital when considering design and cost. Hopefully you’ll already have a rough idea if a cost has been agreed! This also affects what platform you ultimately propose as some of these functions will be built in, some will be available as plugins, whilst others may have to be developed on a bespoke basis. This is by no means a complete list, but here’s what I’d regard as the most common feature requests in projects I’ve worked on:

• Should the client be able to manage the content via a CMS (Content Management System)?
• Is the site a blog, or have a blog as part of it?
• Are forms required? Can they be hard-coded or should the client be able to create and edit forms?
• Is e-commerce required? Define the scope of this, e.g. simple online payments or a shop with multiple products and a basket?
• Does the site require forum functionality?
• Social network integration (e.g. Twitter feeds, Facebook ‘Like’ buttons, etc.)
• Will adverts be displayed on the site? How will these be managed?
• Membership areas or secure content
• Interactive tools such as Google Maps
• Accessibility features

There are standard levels of accessibility defined by the WCAG (Web Content Accessibility Guidelines) for which you can aim, the latest being WCAG 2.0 A, AA or AAA – see http://www.w3.org/TR/WCAG20/ for more info. Remember that these are just check-lists and that evaluating accessibility accurately can only really be achieved with comprehensive user testing.

Features that could assist accessibility are:

• On-page text resizer (many users aren’t aware of how to change the text-size using their browser’s built-in features)
• Alternate colour schemes for users with visual impairment
• Screen-reader friendly versions (if the core version isn’t)
• Mobile device versions (if the core version isn’t responsive)

Tip: Public sector organisations in the UK have very strict requirements on the level of accessibility required by their websites, and may also need to meet standards set out by bodies such as the RNIB or the Shaw Trust. It’s very common for private sector companies not to have thought about accessibility; hence I always suggest aiming for WCAG 2.0 A or AA. Limitations set out in the additional requirements for level AAA are impractical for entire websites – see http://www.w3.org/TR/WCAG20/#conformance-reqs. Note however that WCAG 2.0 AA is fairly limiting regarding colour contrast, so offering alternative high-contrast colour schemes might be worthwhile – see 1.4.3 Contrast (Minimum).

Information Architecture

Content drives design – so considering Information Architecture at an early stage is integral to the design and development of a website.

Asking the following questions will assist in defining Information Architecture deliverables, such as wireframes, process flows, content strategy and Site Maps:

• What’s the organisation’s background?
• What are its goals?
• Who are its competitors?
• How does it want to be seen? What are its values?
• What is the site’s target audience?
• What are the site’s main objectives?

And if there’s an existing site:

• What reasons are there for wanting to redevelop the site?
• What visitors does it currently attract?
• What does it do well?
• What does it do badly?

Wireframes are great because they allow you to focus on how components are positioned on a page, removing the distraction of site aesthetic. These should ultimately define a composition for each page, although this doesn’t mean that tweaks can’t be made at the visual design stage. Process flows are useful when proposing how a user might get to a particular page or use a piece of functionality – these could be visualised in a flow diagram, or a storyboard of low-def wireframes. Site Maps could be simply proposed in a spreadsheet format (I find this preferable as clients can easily make changes), or in a more visually impressive schematic.

Tip: There’s a lot of debate as to whether wireframes and process flows are a valued part of the process; I think it depends on the project and its scale. Small Web projects, with only a few pages and a tight deadline, may not benefit significantly from this step.

Site Aesthetic

Now we can start to talk about the client’s requirements for the site’s aesthetic, which will no doubt be the bit they’re most excited about. This will assist you to put together visual concepts based on the agreed wireframe layouts. Through asking the client various questions, you ultimately need to establish the following:

• Communication – How should the site’s message be portrayed? How should the design make a visitor feel?
• Style – What should be the overall look-and-feel and art direction?
• Colour – How will the site make use of a particular colour scheme?

These items may already be partly defined by the organisation’s brand. Make sure you get hold of hi-res logos and brand guidelines (if they exist), which should include colour palettes, typefaces and guidelines on use of graphical imagery and photography. Any other marketing collateral that may assist in portraying how the brand should be applied online is useful.

Also ask:

• Which websites does the client like the look of?
• Which websites successfully carry a message similar to the client’s?

If the client struggles here, you could try pointing the client in the direction of design showcase sites such as www.bestwebgallery.com and ask them to highlight a handful of sites they like the look of, whether it be in terms of communication, style or colour.

Tip: It’s up to you how you format your questions in order to get the most out of this consultation, but ask the client to provide adjectives (such as corporate, modern, innovative, professional, approachable and friendly) to support their ideas. These should be in line with their organisation’s values and it’s up to you to derive more design-related adjectives in order to visualise their ideas e.g. bright, dark, clean, curvy, square, sketchy, bold, minimalist and so on.

Summary

Systematically going through this process should help you to get a comprehensive design brief, hence greatly influencing the success of your project. In my experience it’s preferential to consult with the client in person, but you could also ask the client to complete a questionnaire to supplement your discussions. However, it’s important to get a good balance between asking enough relevant questions and boring the client with pointless ones.

Lime House School

Lime House School came to me wanting an attractive website that was simple and easy to manage. I proposed a WordPress solution which would enable them to manage a simple site structure, using the post system to promote news items. The plug-ins available for WordPress would also provide functionality such as simple form building. With no visual identity to speak of, I drew inspiration from the school’s badge to create a classical aesthetic style with a modern edge.

Tools used for this project:

• Site designed in Adobe Photoshop
• Illustrations drawn in Adobe Illustrator
• XHTML, CSS and jQuery hand coded in Adobe Dreamweaver
• Built on WordPress

Launch site

Balmaha Marina, Loch Lomond. Acrylic on canvas.

My latest artistic quest was to paint a scene from our recent trip to Loch Lomond. It’s taken from a photo I took, looking out at the Loch from Balmaha boat yard. I chose this scene because I was fascinated by the calmness of the water, which provided an almost artificial looking, greyish mirror image of the sky. The biggest challenge was recreating this, whilst depicting the soft ripples in the foreground.

St Luke's Sheffield Hospice

St Luke’s Sheffield Hospice approached Cubik to redevelop their website, the aim of which is to promote the hospice’s core in-patient service as well as services for out-patients such as the Therapies and Rehabilitation Centre and community nursing.

Tools used for this project:

• Information architecture designed in Adobe Illustrator
• Look and feel designed in Adobe Photoshop
• XHTML, CSS and jQuery hand coded in Visual Studio
• Built on the Cubik CMS

Launch site

Lighthouse on a misty evening. Acrylic on canvas.

Laura’s always had a thing about lighthouses, so after many months of “when will you paint me something?” I set aside a Sunday afternoon to put acrylic to canvas. And I’m happy with the way it turned out – the detail of the lighthouse works well against the broad brush strokes and subtle hues of the backdrop, creating the desired atmospheric effect. I think she was happy with the present.

Progress Housing Group home

Progress Housing Group approached Cubik to redevelop their online presence, including a redesign of the core group website and branded sections for a number of housing association and service subsidiaries.

I led this project from concept through to implementation, involved at the outset to deliver information architecture proposals, process maps and site maps, followed by visual concepts, and finally, implementation. The resulting solution integrates with Progress’ own internal database to allow tenants to sign in and view account details such as rent transactions, repair requests and servicing information.

Tools used for this project:

• Information architecture designed in Adobe Illustrator
• Look and feel designed in Adobe Photoshop
• XHTML, CSS and jQuery hand coded in Visual Studio
• Built on the Cubik CMS

Launch site