This is the group presentation (MIC - Made in China) for the client Headway UK, which is a national and local charity looking after people with head injuries.

1. Headway UK
A website design by M.I.C

2. 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.

3. 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

4. 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.

5. 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/

6. 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).

7. 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/

8. 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

9. Concept Development: Video version
of 10x10

10. Social Network Plugins: Video
Comments

11. 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/

12. 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.

13. 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

14. 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.

15. New Sketch: Vertical Video Menu

16. Rethinking Homepage Design

17. 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

18. Homepage: First Draft

19. Logo Design

20. Homepage: Final Decision

21. 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_searc
h
• The concept of meme’s. Similar to LolKittys. Raising
awareness for Headway.
• Website: http://icanhascheezburger.com/

22. Memes & Raising Awareness

23. Meet the Family!

24. Meet the family: Upload

25. Homepage Functionality

26. Vertical Docking Video Menu

27. 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.