1 Handling branding and architecture in content sites.
-
Upload
charles-bryan -
Category
Documents
-
view
216 -
download
0
Transcript of 1 Handling branding and architecture in content sites.
![Page 1: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/1.jpg)
1
Handling branding and architecture in content sites.
![Page 2: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/2.jpg)
2
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
![Page 3: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/3.jpg)
3
Who the hell are you?
Designers? Project managers? Writers? Researchers?
![Page 4: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/4.jpg)
4
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
![Page 5: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/5.jpg)
5
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
![Page 6: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/6.jpg)
6
The Times and Sunday Times (1995-96)
Small team (2 designers, 3 coders, 5 editorial)
No original online content, all re-purposed 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
![Page 7: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/7.jpg)
7
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...
![Page 8: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/8.jpg)
8
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
![Page 9: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/9.jpg)
9
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
off-the-shelf production system was found
therefore - one had to be originated
![Page 10: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/10.jpg)
10
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 no-brainer
Designing the ‘heart’ database: objects and their relationships to be designed,
behaviours to be modeled… designers should be involved in process
![Page 11: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/11.jpg)
11
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….
![Page 12: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/12.jpg)
12
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
![Page 13: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/13.jpg)
13
content furniture tools
helpstories
media copy source layoutinfo(e.g. listof templates)
templates logos
serversideprograms
db
Model of database view of website
![Page 14: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/14.jpg)
14
pages
content
text
‘furniture’ tools
site
media
pics audio video
navigation logos
pics audio video
Model of visitor’s view of website: ‘the user-illusion’*
* Alan Kay et al, Xerox PARC
![Page 15: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/15.jpg)
15
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.
![Page 16: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/16.jpg)
16
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
![Page 17: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/17.jpg)
17
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
![Page 18: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/18.jpg)
18
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...
![Page 19: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/19.jpg)
19
Beyond & then back
![Page 20: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/20.jpg)
20
Beyond & then back
![Page 21: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/21.jpg)
21
Beyond & then back
![Page 22: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/22.jpg)
22
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.
![Page 23: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/23.jpg)
23
Outside forces (1)
![Page 24: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/24.jpg)
24
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
![Page 25: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/25.jpg)
25
Outside forces (2)
![Page 26: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/26.jpg)
26
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…!
![Page 27: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/27.jpg)
27
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
![Page 28: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/28.jpg)
28
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
![Page 29: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/29.jpg)
29
Launch & launch again...
![Page 30: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/30.jpg)
30
Launch & launch again...
![Page 31: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/31.jpg)
31
Launch & launch again… V2.0
![Page 32: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/32.jpg)
32
What is an user-centred design approach?
![Page 33: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/33.jpg)
33
The User-Centered Approach: components
User research ‘Experience-modeling’ or ‘Use Model’ Information Architecture User-testing
![Page 34: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/34.jpg)
34
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. 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.
1. 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. A style or design of an item: My car is last year's model. 4. One serving as an example to be imitated or compared: a model of decorum. 5. One that serves as the subject for an artist, especially a person employed to pose for a
painter, sculptor, or photographer. 6. A person employed to display merchandise, such as clothing or cosmetics. 7. Zoology. An animal whose appearance is copied by a mimic.
![Page 35: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/35.jpg)
35
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.
![Page 36: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/36.jpg)
36
Coming up with user profiles
TEC
H
CREATIVE
A
D
B
C
![Page 37: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/37.jpg)
37
Words to describe each user profile
APractical, functional, does chores, room has to look okay
but not confident in design.
BMore interested in design, less confident on technical
abilities.
CAlways has projects on the go, hobbyist.
DCreates a look, less involved in project execution, most
interested in creative, trends.
![Page 38: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/38.jpg)
38
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
![Page 39: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/39.jpg)
39
How do we use this?
To derive user flows through site to test these flows with imaginary (or preferably,
real) response
![Page 40: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/40.jpg)
40
User flows
![Page 41: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/41.jpg)
41
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
![Page 42: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/42.jpg)
42
‘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
![Page 43: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/43.jpg)
43
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
![Page 44: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/44.jpg)
44
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
![Page 45: 1 Handling branding and architecture in content sites.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e2e5503460f94b1e3da/html5/thumbnails/45.jpg)
45
Questions?
Or have you had enough already...