Cultural Networks 2012: Headway UK


Published on

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.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cultural Networks 2012: Headway UK

  1. 1. Headway UKA website design by M.I.C
  2. 2. Introduction• As a group we have been asked to create a digital solution for the Portsmouth Branch of HeadwayUK. We were made aware that is a smaller charity within a larger charity name that has a lot ofresponsibilities• Throughout the client brief it was clear that there was a passion for storytelling and companyidentity. Storytelling helped us to understand how brain injuries came to pass, and the successfulstories of those who had recovered. It was through storytelling that our group were able tounderstand 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 hasbeen a loss of external financial support.• It was also made clear that a positive outlook was desirable for the company, as opposed to anegative and depressing one. A comparison was made between sexy and unsexy charities, RSPCAetc, people may have a natural warming towards particular situations more than others. Since mostpeople are rarely informed about brain injury in detail, whatever we design may need to beinformational in order to gain a deeper understanding from potential supporters. Rather than beingheavily intellectual and scientific, storytelling might be the key.
  3. 3. A brief overviewClient Briefing: Analysis of original website & Related WebsitesInformation Architecture & concept development (sketches)Theoretical research & Methodology developmentGraphic & Logo DesignImplementation of Flash& Finalisations
  4. 4. Analysing the Original Site• As a group we decided to analyse the siteand look for areas which could be improvedupon.• Immediately found a problem with theinformation architecture. A term attributedto Robert Saul Wurman which basicallymeans the re-structuring and organising ofinformation for efficient use.• Very monotone in colour, may be unclearfor the user to understand whichinformation is most important.
  5. 5. Related Websites• The following websites relate to the issue ofbrain injury, some of them are also charities•••
  6. 6. Information Overload• Today’s digital and information age, hasresulted in an ‘Information Overload’ or‘Over-choice problem’ which was anticipatedmany years ago by Alvin Toffler(Friedman, 1977, p.81)• There are a ‘soaring number of web-basedinformation sources’ and ‘the increasingamount of data’ is something that will‘overwhelm most information consumers’(Hu & Chen, 2010, p.445)• Eppler describes the negative outcome’s of awell known concept labelled as ‘informationfatigue’ (Eppler, 2010, p.326)• Edmunds shares a similar understanding toEppler but adds the term ‘analysis paralysis’which helps to add another dimension onhow we can see things(Edmunds, 2000, p.17-20).
  7. 7. Information Graphics• A concept which focuses upon presentinginformation in a visually graphic way• David McCandles is one of the pioneers in thisfield. He states “it feels like we are all sufferingfrom information overload or data-glut but thegood news is that there might be an easysolution to that, and that is using our eyes more.Visualising information so that we can see thepatterns and the connections that matter andthen designing that information so that it makesmore sense or that it tells a STORY or allows us tofocus only on the information that is important”• Website:• TedTalk:
  8. 8. Case Study: 10x10• Website:• A video version of 10x10 whereby clicking ontopictures would be exchanged for thumbnailpictures of video’s.• A corresponding textual which is categorisedunder section names and linked to the images ofvideo thumbnails.• A visual sitemap, with everything needed on asingle page, easy navigation and a clear overviewwith strong visual support
  9. 9. Concept Development: Video versionof 10x10
  10. 10. Social Network Plugins: VideoComments
  11. 11. Storytelling & Company Branding• Ever since the early ages of mankind storytelling hasbeen the way that communities have shared theirwisdom, values, knowledge and cultural norms.• Long before video games, or experiments with interactiveTV, or the explosive growth of the Internet –long, even, before computers had ever been imagined –human beings all over the world devised and participatedin interactive storytelling experiences. (Carolyn HandlerMiller)• “A shorthand characterization of “culture” would see it asinvolving what different groups of people believe, thinkand feel.” (Inglis, 2005, p. 11).• Act 3 was founded by Ben Kaplan and Eric Ratinoff. Itspecialises in strategic and applied storytelling in order toimprove company branding and organisational culture.• Case study – Pov Rose Media:
  12. 12. Unity through Storytelling Design• Stories can help to bring people together, through sharedexperience, we aim to reflect this through our websitedesign• Unity in design is a concept that stems from some of theGestalt theories of visual perception andpsychology, specifically those dealing with how the humanbrain organizes visual information into categories, orgroups2.• Gestalt theory itself is rather lengthy and complex, dealingin various levels of abstraction and generalization, butsome of the basic ideas that come out of this kind ofthinking are more universal.
  13. 13. Case Study: &Co• During our research for other interactive inspirations, the &Cowebsite was suggested by Yao• Produced and Directed by Thierry Loa.• Applied the techniques of 3D AnimationStoryboarding, Music, Sound and Flash AS coding• Provides many powerful & unique features: hover dualmenu, photo stacks with a never ending scroll, informational flashvideos• Website:•
  14. 14. Our Project• Homepage: Inspired by the metaphor of Headway acting as thebrain 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, personalstories as well as vital information.• Incorporates Kolb’s Learning CycleFeeling & Watching (Activist) > Watching & Thinking (Reflector)>Thinking & Doing (Theorist)> Doing & Feeling (Pragmatist)• Our key inspirations were tenbyten and &co’s website.
  15. 15. New Sketch: Vertical Video Menu
  16. 16. Rethinking Homepage Design
  17. 17. Information ArchitectureHomepage (BrainOverview)About UsVideo MenuNews & EventsVideo MenuStoriesVideo MenuFundraisingVideo MenuMeet the FamilyA forum to sharememesAn onlinecommunity, commentsetc
  18. 18. Homepage: First Draft
  19. 19. Logo Design
  20. 20. Homepage: Final Decision
  21. 21. Additional Features• The concept of a web 2.0 structure, embracing horizontalinteraction, discussions and viral marketing (e.g. Kony2012)• Facebook & Twitter plug-ins:• The concept of meme’s. Similar to LolKittys. Raisingawareness for Headway.• Website:
  22. 22. Memes & Raising Awareness
  23. 23. Meet the Family!
  24. 24. Meet the family: Upload
  25. 25. Homepage Functionality
  26. 26. Vertical Docking Video Menu
  27. 27. Conclusion• We enjoyed working together as ateam, regular face to facecommunication, almost weekly, sometimestwice a week• We also worked together through theinternet. Uploaded notes on the wiki (Michaeldidn’t) but however Michael arranged a moreregular method through an internal groupemail which allowed attached files.