The other panelists were Damian Wild of Incisive Media, Kasper de Graaf of AIG London, and Graeme Palmer of Abacus e-media.

Post-event

Stephen Brook reported on my talk in MediaGuardian’s Organgrinder blog, and to his credit links back to this page.

Introduction

This talk is fairly high level, and talks interchangeably about brand and design, also extending design thinking into areas that may not be considered design. Comments [in brackets] were drafted by not made.

What is brand online?

Brand become critical the more mature a market. The online market is still immature. Thus design is more critical.

Not about logos, colours, texture, typography, images and stock. About new challenges:

• A wide and deep medium with a temporal dimension
• Syndication and multi-platform (see comments by Anita Hague, FT.com, earlier in this session)
• Reader interaction with your publication
• Creation of a service with many touchpoints
• Publishing moving to including curating and hosting

We need to think in terms of the experience: media use has more potential, power and touchpoints, but is necessarily more complex. Experience is key: are we creating successful and satisfying experiences for our users (or the people formerly known as readers, listeners and viewers). Some examples:

Non-Web material

AlwaysOn newsletter: bold typography and readable type [Image: AlwaysOnEmail]

NESTA newsletter: creating and fun use of an icon [Image: NESTA_HoldtheDateEmail]

Streetcar: strong use of imagery and engaging editorial [Image: StreetcarLifeNewsletter.pdf]

Typography and images

Daylife covers: use images large in a way that online newspapers and periodicals don’t. Also has lovely typography. [Image: DaylifeCover]

London Mayoral election special on The First Post: good typography (albeit not using systems fonts) and bold use of graphical imagery. [Image: FirstPostLondon

Election]

Management Today home page: too great focus on traditional brand elements at the expense of the text [Image: ManagementTodayPoorDesign]

Interaction design and visualisation

Confirmation screens: clear explanations of what has happened [Image: FlickrGoodInfoonInvites.jpg]

Form design: realtime and in context feedback using familiar forms on what is happening and what the options are [Image: PownceGoodFormHelp.jpg]

Textual visualisation: using typography to convey information in New York Times [Image: NYT_TagCloud.jpg]

Making use of space: effective and engaging use of space in Technology Review piece on US Presidential candidates’ views on technology [Image: TechReviewGoodGraphicalUI]

Information design: familiar from print but seen to rarely online [Image: LeMondeSocialNetworkDataviz.png]

Interactive graphic: using the dynamic character of the Web to convey information compactly [Image: TR_SocialNetGrowthDataviz.png]

Approach

Business

Design needs to be commissioned in the context of clear objectives, including the business case, and this will constrain what can be done. [Ask: what would success look like?]

Audiences

[Approach varies according to audiences and type of publication]

Need to identify explicit and latent needs of users: use research methods such as ethnography (see earlier comments by Anita Hague, FT.com, on ‘digital ethnography’), usability lab observation and testing, log analysis. But can’t be wholly user driven, and in future will need to be more experience/expertise driven.

Need to design for editing, ie: for your writers, editors, subs and designers (your most dedicated users)

And for non-human users (such as search engines), [and meta and system design issues]

Process

[Image: flow diagram from What is Web Design?] [Image: posted on request]

Stages of the product development process include:

• Stakeholder and other research
• Restating the brief
• Research with potential users
• Ideation (developing multiple ideas and developing each idea)
• Sketching [Image: FordDirect home page sketch]
• Prototyping [Image: FordDirect home page visualisation]
• Usability testing
• Iterative building, testing and tweaking
• Post launch evaluation

[Don’t forget collaboration: the idea of the project ‘war room’ wih materials on view and to hand.]

New kinds of material

Reader-created content and commentary

BusinessWeek: handles for names, and comments hidden in a frame [Image: BW_ReadersComments.jpg]

SezWho: blog tool to show ‘hinterland’ of a commenter so they can be evaluated and possibly followed in future [Image: CommentsSezWho]

Financial Times: allows posts on one’s own blog to appear in the context of its blog posts [Image: FT_TechBlogTrackback.jpg]

IT Conversations: uses Technorati to show who is linking to show (in this case) [Image: ITC_WhoIsLinkingToThis.jpg]

Wall Street Journal: shows most blogged about articles [Image: WSJ_MostBloggedAbout.jpg]

The Economist debate: has pictures of protagonists, good information design, temporal structure [Image: EconomistDebate]

Design for…

Immediate and long term finding: what people miss in the short term they may find and value in the long term

Complex interactions: possibilities will only increase so the simplicity of interactions needs to be pushed

Multiple modes of navigation: from menus, etc, to editing a URL to navigate

Adaptation: don’t close down possible uses of your material, facilitate reader manipulation of material. Email is used for to-do lists, spreadsheets for address books, and shopping baskets for organising things. What new uses might your readers find for your site?

Use in multiple environments: from the PC Web browser to the smart phone to the interactive television, the office to the living room to the bus stop. Including simple reduced interfaces, eg: social network tools on a phone [Image: PalmTwitterBrowser.jpg] and anticipate printing of articles, eg: URLs made explicit in printable version of an artile [Image: WSJ_ExpandedArticleLinks.jpg]

[Give users context (rhetoric of arrival) when they arrive in the middle of a site]

Rating/evaluating material for sharing with others

Representing personalisation and user recommendation

Generally poorly done. The ubiquitous ‘Digg’ rating is one of the least worst example.

Common mistakes

[Copying design solution from another format, eg: the blog-structured page]

[Failing to make clear the ‘offer’ and benefit from engaging in an activity, to design the ‘rhetoric of departure’, ie: what will happen next, eg: social bookmarking tools]

[Not editorialisation to make the most of screen ‘real estate’: a designer should think about this, eg: BBC email titles ‘Your daily e-mail from the BBC’] [Image: BBC_DailyE-mail mailbox overview].

Ignoring ‘edge cases’, ie: the outcomes on which you aren’t focused but which will happen:

• Channel 4 4oD: what does this dialogue mean to anyone? [Image: 4oD_DRM_Problem.png]
• Sky Sports: didn’t anticipate a data feed failing [Image: SkySportsXML_DoesntExist]
• Twitter 404 error page: thought about and ‘sweet’ if a a bit West Coast [Image: TwitterSomethingWrong]
• Egg service unavailable page: clearly written and includes a call to action (‘phone us’) [Image: EggGoodErrorPage]
• Streetcar server error: plain English and doesn’t tell the user they made an error [Image: StreetcarNonTechyError.jpg]

[Also need to think about customer service as a whole, across all touchpoints]

Biggger/invisible issues: 3x2 tips for a successful redesign

Don’t assume you understand your readers: do real research (see earlier session chair David Worsfeld’s comments on disconnect between us as readers and us as editors/publishers/etc.)

Design comes before technology: design it right and you will save money on technology purchase and implementation, and avoid demoralisation

Avoid fads: rather than get obsessed with social networking, understand social trends so you can anticipate new developments and get ahead of your competitors

[Re-design your publishing system to support Web and print, eg: including of multiple versions, extra images, time-based media, links and related stories. But don’t assume that multi-platform is a design/technology issue: shape your content to your context]

Design forward: to anticipate new (technical) developments that can be exploited in future without need for a significant re-design, eg: inclusion of video, full reader profiling and rating

Do print re-design at same time: to avoiding constraining the on- or offline element and ease design and brand development

Future trends

Print-Web integration and new readers/platforms, eg: Amazon Kindle (which went on sale in the UK today), the iPhone, Sony e-reader, which will allow us to read in our context rather than be stuck to the PC [Image: AmazonKindleandNewspaper]

Better readers/screens/e-paper and devices will lead to renewed need for communication, editorial and graphic design. [Image: 04-28timesreader.jpg] On the future need from communication designers A graphic lesson for digital design, Nico Macdonald [draft] 2005.

[Design and brand experience will get easier as patterns develop for creating good experience]

Discussion

Notes on remarks posted on request

Reference

Spy: Talks: Newspaper Design Day, 2006 (St Bride Library)