Headway UK

A website design by M.I.C

Introduction• As a group we have been asked to create a digital solution for the Portsmouth Branch of

Headway UK. We were made aware that is a smaller charity within a larger charity name that has a lot of responsibilities

• Throughout the client brief it was clear that there was a passion for storytelling and company identity. Storytelling helped us to understand how brain injuries came to pass, and the successful stories of those who had recovered. It was through storytelling that our group were able to understand how this branch became founded in the first place

• For every charity funding is a major issue, this is true for this charity in particular since there has been a loss of external financial support.

• It was also made clear that a positive outlook was desirable for the company, as opposed to a negative and depressing one. A comparison was made between sexy and unsexy charities, RSPCA etc, people may have a natural warming towards particular situations more than others. Since most people are rarely informed about brain injury in detail, whatever we design may need to be informational in order to gain a deeper understanding from potential supporters. Rather than being heavily intellectual and scientific, storytelling might be the key.

A brief overview

Client Briefing: Analysis of original website & Related Websites

Information Architecture & concept development (sketches)

Theoretical research & Methodology development

Graphic & Logo Design

Implementation of Flash & Finalisations

Analysing the Original Site• As a group we decided to analyse the site and

look for areas which could be improved upon.

• Immediately found a problem with the information architecture. A term attributed to Robert Saul Wurman which basically means the re-structuring and organising of information for efficient use.

• Very monotone in colour, may be unclear for the user to understand which information is most important.

Related Websites

• The following websites relate to the issue of brain injury, some of them are also charities

• http://www.biausa.org/• http://www.theheadinjurysite.com/• http://www.bia.net.au/

Information Overload• Today’s digital and information age, has resulted

in an ‘Information Overload’ or ‘Over-choice problem’ which was anticipated many years ago by Alvin Toffler (Friedman, 1977, p.81)

• There are a ‘soaring number of web-based information sources’ and ‘the increasing amount of data’ is something that will ‘overwhelm most information consumers’ (Hu & Chen, 2010, p.445)

• Eppler describes the negative outcome’s of a well known concept labelled as ‘information fatigue’ (Eppler, 2010, p.326)

• Edmunds shares a similar understanding to Eppler but adds the term ‘analysis paralysis’ which helps to add another dimension on how we can see things (Edmunds, 2000, p.17-20).

Information Graphics• A concept which focuses upon presenting information

in a visually graphic way

• David McCandles is one of the pioneers in this field. He states “it feels like we are all suffering from information overload or data-glut but the good news is that there might be an easy solution to that, and that is using our eyes more. Visualising information so that we can see the patterns and the connections that matter and then designing that information so that it makes more sense or that it tells a STORY or allows us to focus only on the information that is important”

• Website: http://www.davidmccandless.com/ • TedTalk:

http://blog.ted.com/2010/08/23/the-beauty-of-data-visualization-david-mccandless-on-ted-com/

Case Study: 10x10

• Website: http://tenbyten.org/10x10.html • A video version of 10x10 whereby clicking onto

pictures would be exchanged for thumbnail pictures of video’s.

• A corresponding textual which is categorised under section names and linked to the images of video thumbnails.

• A visual sitemap, with everything needed on a single page, easy navigation and a clear overview with strong visual support

Concept Development: Video version of 10x10

Social Network Plugins: Video Comments

Storytelling & Company Branding• Ever since the early ages of mankind storytelling has been

the way that communities have shared their wisdom, values, knowledge and cultural norms.

• Long before video games, or experiments with interactive TV, or the explosive growth of the Internet – long, even, before computers had ever been imagined – human beings all over the world devised and participated in interactive storytelling experiences. (Carolyn Handler Miller)

• “A shorthand characterization of “culture” would see it as

involving what different groups of people believe, think and feel.” (Inglis, 2005, p. 11).

• Act 3 was founded by Ben Kaplan and Eric Ratinoff. It specialises in strategic and applied storytelling in order to improve company branding and organisational culture.

• Case study – Pov Rose Media: http://www.pov-rose.com/

Unity through Storytelling Design

• Stories can help to bring people together, through shared experience, we aim to reflect this through our website design

• Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups2.

• Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.

Case Study: &Co• During our research for other interactive inspirations, the &Co website

was suggested by Yao

• Produced and Directed by Thierry Loa.

• Applied the techniques of 3D Animation Storyboarding, Music, Sound and Flash AS coding

• Provides many powerful & unique features: hover dual menu, photo stacks with a never ending scroll, informational flash videos

• Website: http://www.andco.com/ • http://www.youtube.com/watch?v=SGhbaME2Jug

Our Project• Homepage: Inspired by the metaphor of Headway acting as the brain

behind helping other brains, working together like clockwork

• Traversing through the mind of Headway, in a visually explicit & natural way. A way which captures personality, culture, personal stories as well as vital information.

• Incorporates Kolb’s Learning Cycle

Feeling & Watching (Activist) > Watching & Thinking (Reflector)> Thinking & Doing (Theorist)> Doing & Feeling (Pragmatist)

• Our key inspirations were tenbyten and &co’s website.

New Sketch: Vertical Video Menu

Rethinking Homepage Design

Information Architecture

Homepage (Brain Overview)

About Us

Video Menu

News & Events

Video Menu

Stories

Video Menu

Fundraising

Video Menu

Meet the Family

A forum to share meme's

An online community,

comments etc

Homepage: First Draft

Logo Design

Homepage: Final Decision

Additional Features

• The concept of a web 2.0 structure, embracing horizontal interaction, discussions and viral marketing (e.g. Kony2012)

• Facebook & Twitter plug-ins: http://twitter.com/about/resources/widgets/widget_search

• The concept of meme’s. Similar to LolKittys. Raising

awareness for Headway.

• Website: http://icanhascheezburger.com/

Memes & Raising Awareness

Meet the Family!

Meet the family: Upload

Homepage Functionality

Vertical Docking Video Menu

Conclusion

• We enjoyed working together as a team, regular face to face communication, almost weekly, sometimes twice a week

• We also worked together through the internet. Uploaded notes on the wiki (Michael didn’t) but however Michael arranged a more regular method through an internal group email which allowed attached files.