No Slide Title
Download
Report
Transcript No Slide Title
Handling branding and
architecture in content sites.
1
Who the hell am i?
Director of Human-Network Interaction at Metrius Europe
A KPMG Consulting company that designs, architects and builds
businesses and business initiatives that take advantage of the network
economy
previously creative director at:
BBC News Online
and designed the launch versions of
The Times/Sunday Times
LineOne
design for biggest news/info sites in Europe since 1995
2
Who the hell are you?
Designers?
Project managers?
Writers?
Researchers?
3
What am I going to talk about?
Experiences in designing content websites
The Times/Sunday Times, LineOne
BBC News Online (MAINLY)
Principles of user-centered design
What is it?
Information architecture and content
brand/content issues
Questions
4
How did I get into what I do…?
Started in REAL architecture (!)
Thesis: architecture is information, information is
architecture (more of which later…)
left in 1995 to work for News Corp sponsored internet
project
pretty soon working on launch team for The Times
5
The Times and Sunday Times (1995-96)
Small team (2 designers, 3 coders, 5
editorial)
No original online content, all repurposed from newspaper’s ATEX feed
Online ‘subs’ adjust content to fit
limited template designs.
Very simple, but very successful…
catches up with Electronic Telegraph in
6 months
6
LineOne (1996-97)
Originally ISP and content offering from
News International & BT
Complex brand and content issues
(how does one reconcile the same days news through the eyes
of The Sun and The Times?!)
Deep offerings in parallel integrated
using complex tech.
A Portal before that became a
buzzword...
7
BBC News Online (97)
Biggest project online to date
over 80 editorial staff 24/7/265
c. 200 -300 original stories a day
launch design - no bells and whistles
‘the story is the star’
How did we do it?
User-centered design
8
Analysis & Abstraction (1)
All these ambitions had to be
implemented
we’d derived a good conceptual “map”
of what we wanted to do… but...
we had 12 weeks from green-light to
launch
Certain things could be locked down
after review of the market, no suitable offthe-shelf production system was found
therefore - one had to be originated
9
Analysis & Abstraction (2)
Building a content production system (CPS)
Estimations of content-data throughput and churn made
conclusion that it’s a solution with a database at it’s heart almost a nobrainer
Designing the ‘heart’
database: objects and their relationships to be designed, behaviours to
be modeled… designers should be involved in process
10
Analysis & Abstraction (3)
The object model:
basic unit of the site: The “Story”
– what should the story do?
– What relationships does it have with other data?
– What governs it’s behaviour?
The good theoretical basis made this stage less painful: less wooly
early on the better….
11
Designing a kit of parts (1)
A CPS design is arrived at that
stores content and it’s inter-relationships in a DB
uses templates to publish content from DB to web
Design for Templates: “Kit of parts”:
what do I mean?
A design for which is:
modular
flexible
extendable
has internal consistency
and, when in use is more than the sum of it’s parts
a system
12
Model of database view of website
db
content
stories
media
copy
help
source
furniture
templates
tools
logos
server
side
programs
layout
info
(e.g. list
of templates)
13
Model of visitor’s view of website: ‘the user-illusion’*
site
pages
content
text
‘furniture’
navigation
media
pics
audio
tools
logos
video
pics
audio
video
* Alan Kay et al, Xerox PARC
14
Designing a kit of parts (2)
Flexibility:
we went for as flexible a model of content production
had to launch quickly, but didn’t want to create a cul-de-sac
Any part of the system as a whole should be able to “slide-out” and be
updated, improved or replaced
The design principles were almost a natural extension of this.
15
Designing a kit of parts (3)
The Design principles were almost a direct expression of the object
model, hopefully:
Clear, simple, elegant and transparent for users navigating the site
Clear, simple, elegant and transparent for journalists managing the site
As a result:
Structure of the site simple and apparent
Interface elements and behaviours should be clear and consistent:
“if something does something once, it should always do the same
something
16
Designing a kit of parts (4)
So, templates necessary for launch at logical bare
minimum:
Index template(distribution, direction)
Story template (destination)
Schematic designs for both were made
17
Beyond & then back
A period of generating variants on the the schematic’s
“chassis”
some amounted to taking the schematic and “dressing it up”
iterations were tested against:
“The Principles” (primitive use model)
Editorial
prospective users in some cases
pragmatic concerns: download, projected server and bandwidth
loads
We kept coming back to designs that were little more than an elegant
expression of the schematic...
18
Beyond & then back
19
Beyond & then back
20
Beyond & then back
21
Outside forces (1)
BBC Brand
a constant... and powerful presence
an advantage - but sometimes a liability too…
well-established perceptions of BBC
graphic identity oriented towards broadcast, not web
little or no previous experience or expectation of what the BBC or
BBC News on the Web should feel like
– tried to explore this with a exercise with editorial staff to
capture defining statements, words, or feelings this
question provokes.
22
Outside forces (1)
23
Outside forces (2)
BBC Re-branding
BBC re-branding project: Lambie-Nairn
BBC brand and graphic identity changed 1st October 1997…. Just before
our launch!
We’d be one of the first BBC “products” to inherit this new brand from
scratch…
Incorporating the re-brand
The new branding key feature was simplicity of expression - something
we kept coming back to in our testing of design prototypes against “The
Principles”
So there was a good fit, and a good opportunity
24
Outside forces (2)
25
Crisis Points…!
Timescale required rapid prototyping and evaluation
modular development system meant that different template sets could
be ‘slid in and out’
Rebranding exercise forced late graphic design change
focus on development of schematic reduced impact
Vocabulary…!
different disciplines working together (first exposure to geeks for a lot of
Journos!)… different languages spoken
we kept a glossary pinned on the wall…!
26
Lesson?
We found that having a worked-through theoretical basis for every aspect
of our design before final implementation invaluable at every point…
especially the bad ones…!
Make sure everyone has the blueprint…
The Information Architecture
27
Launch & launch again...
Vital Statistics...
November 1997 Site Launched
June 1998 Page views exceed 12,000,00
July 1998 Already most popular news site outside US
60,000+ Stories on the site already, 7,000+ Stories viewed every day
Online Survey Scored highly on design and ease-of-use
May 1998… expanded coverage and introduced three new sections
limited redesign to accommodate
… founding principles of site informed this redesign.
Constant Beta
Revisiting of first principles
Make sure they evolve in step with technology and user requirements
1998/99 Extensive User testing (videotaping, use surveys) leads to
version 2.0 design
28
Launch & launch again...
29
Launch & launch again...
30
Launch & launch again… V2.0
31
What is an user-centred design
approach?
32
The User-Centered Approach: components
User research
‘Experience-modeling’ or ‘Use Model’
Information Architecture
User-testing
33
The Use Model: “A thing to think with”
mod·el (m d l) n.
1.
A small object, usually built to scale, that represents in detail another, often larger object.
a.
1.
A preliminary work or construction that serves as a plan from which a final product
is to be made: a clay model ready for casting.
Such a work or construction used in testing or perfecting a final product: a test
model of a solar-powered vehicle.
2. A schematic description of a system, theory, or phenomenon that
accounts for its known or inferred properties and may be used for
further study of its characteristics: a model of generative grammar; a
model of an atom; an economic model.
3.
4.
5.
6.
7.
A style or design of an item: My car is last year's model.
One serving as an example to be imitated or compared: a model of decorum.
One that serves as the subject for an artist, especially a person employed to pose for a painter, sculptor, or
photographer.
A person employed to display merchandise, such as clothing or cosmetics.
Zoology. An animal whose appearance is copied by a mimic.
34
Imagining user experience: example
Quick exercise for project team
Objectives:
identify user-archetypes that describe the target market
think themselves into those users
This is for an e-commerce site, but method is applicable in
nearly all cases.
35
Coming up with user profiles
A
C
B
D
CREATIVE
36
Words to describe each user profile
A
Practical, functional, does chores, room has to look okay but not
confident in design.
B
More interested in design, less confident on technical abilities.
C
Always has projects on the go, hobbyist.
D
Creates a look, less involved in project execution, most
interested in creative, trends.
37
Who are they?
A
Mike, early 40s, depends on wife Louise’s opinion for design. Two kids,
his wife is expecting a third.
B
Jane, early 30s, has partner, busy, relies on friends and other people for
advice.
C
Jack, single, quite confident in abilities and taste. Shops around and
reads lots of magazines, focussing on DIY titles: Better Homes, Changing
Rooms.
D
Lucy, single, in her 50s, out-sources doing, shops around, reads lots of
magazines, style and end result oriented. Reads lots of magazines, broad
lifestyle, Habitat, IKEA, BHS
38
How do we use this?
To derive user flows through site
to test these flows with imaginary (or preferably, real)
response
39
User flows
40
User flows (2)
We can then rationalise the
many user flows we generate
into the best patterns to build
an information architecture for
the whole site built around user
experience
41
‘Brand Experience’
“A brand is a promise”
-- Walter Landor
‘a brand is a promise DELIVERED’ -- Orange
“The experience is the brand”
-- Clement Mok
An ongoing relationship between a customer and a product or service
Built up (or broken down) over time at every point of interaction
between the customer and the provider
Content is a key part of the brand experience, and cannot be divorced
from navigation
42
To sum up
Content is king, and emperor, ruler of the
universe, etc., BUT its context is everything
more often than not, content IS the navigation,
the brand, the user-experience...
consider the user in everything - not just designing
the architecture, but also the writing
43
Some references
Information architecture resources: http://www.jjg.net/
Editorial/ Content online: Steve Outing:
http://www.mediainfo.com/ephome/news/newshtm/stop
/stop.htm
Clement Mok: http://www.clementmok.com/
Tomalak’s realm: http://www.tomalak.org
My stuff, including this presentation:
http://www.blackbeltjones.com/work
http://www.blackbeltjones.com/presentations
44
Questions?
Or have you had enough
already...
45