new brand media user-centred design approach

making brands online1

THE NEW BRAND MEDIA APPROACH

NEW BRAND MEDIA OWNS THE COPYRIGHT FOR THIS DOCUMENT AND ALL ITS CONTENTS.

THIS PROPOSAL SHOULD BE CONSIDERED PRIVATE AND CONFIDENTIAL AND MAY NOT BE SHARED WITH ANY THIRD PARTY WITHOUT THE PRIOR WRITTEN PERMISSION OF NEW BRAND MEDIA LTD.

v0.1

making brands online


CO

NTE

NTS

PROPOSAL V0.1 1

CONTENTS 2

THE NEW BRAND MEDIA OFFERING: 3

ADVANTAGES OF OUR APPROACH: 6

USER-CENTERED DESIGN 7

CONTENT MANAGEMENT - REDUCED COSTS 8

‘WEB STANDARDS’ - BUSINESS FOCUSSED DESIGN 9

PROJECT EXTRANET - MAXIMUM PROJECT VISIBILITY 10

PROPOSED PROCESS & DELIVERABLES 11

UNDERSTAND, CREATE, EVALUATE 12

‘WHO ARE WE TALKING TO?’ 13

UNDERSTANDING OUR TARGET MARKET 14

USER PROFILES & USER GOALS 15

‘WHAT DO WE WANT TO SAY?’ 17

INFORMATION ARCHITECTURE 18

SITE MAP (SAMPLE DELIVERABLE) 19

WIRE FRAME PROTOTYPE 20

‘HOW DO WE WANT TO SAY IT?’ 21

VISUAL DESIGN BRIEF 22

‘LOOK & FEEL’ DESIGN 23

TEMPLATE PRODUCTION 24

HTML/CSS CODE DEVELOPMENT 25

SEPARATION OF CONTENT & PRESENTATION 26

TECHNICAL ARCHITECTURE 27

FURTHER INFORMATION 28


New Brand Media is a digital agency,set up to maximise our clients’

return on investmentthrough the use of strategic and creative design methodologies


More simply put...

We design web sites that your customers can and want to use


Our approach is the result of a decade of design & development of over 100 web sites for some of the world’s leading brands


For maximum return on investment, our approach focuses on the following advantages:

User-Centred Design Methodology

Content Management - Reduced maintenance costs

W3C ‘Web standards’ - SEO, Accessibility, Usability & Flexibility

Maximum Project Visibility (Project Extranet)


New Brand Media employ user-centered design principles to produce

online experiences that your customers can and want to use.

.

‘USER-CENTERED DESIGN’

The following analysis will be conducted at the very the outset

of the project:

- User Profiles Seek to understand your target users, identify their needs & characteristics.

- User Goals A process of grouping, prioritising and optimising the activities of users.

- User Journeys Flow diagrams are developed that are optimised around the established user goals which form the primary information architecture of the site.

Understanding your users forms a objective reference point

for validating design decisions and can accelerate the

creative process.


One thing certain in business is change.

However the web is a dynamic creature that can respond to change faster

and cheaper than any other medium. This is a good enough reason to

integrate content management into your web project but we have also

found that content management tools can play a valuable role when

considered and engaged at the earliest prototyping phase.

This approach provides:- A visible, evolving content repository from the start of the

project that can be accessed, edited and managed via the web by any

member of the business regardless of location.

- A model of the content and information architecture that can be tested

throughout development.

We will work with you to select a suitable solution that can be deployed

quickly and makes managing your site content easy and cost effective for

your business.

Content Management

CONTENT MANAGEMENT - REDUCED COSTS


CSS

XHTML

WWWCMS

CONTENT

‘WEB STANDARDS’ - BUSINESS FOCUSSED DESIGN

New Brand Media make web sites that work for business. Working with some of the world’s leading brands has developed

an in-depth understanding of the branding, design and technology challenges that face enterprise-level clients today, and

more importantly the exciting opportunities new media is creating for organisations both large and small.

Designing with web standards as recommended by the World Wide Web Consortium (W3C), companies can reduce costs

and gain many strategic advantages. For more information on our web standards please visit our web site.


Project ExtranetA client extranet will be created and made available for your project.

This will be an invaluable online tool for monitoring project status,

accessing and storing project files and recording feedback throughout

development. From anywhere with internet access (including your

blackberry!) you will be able to:

- View Design work 24-7

- Feedback & record comments

- Approve artwork

- Access the project files in real-time

‘MAXIMUM PROJECT VISIBILITY’

Your Extranet (hosted on the New Brand Media servers) will be

your ‘Control Centre’ for marketing. A journalist needs a press

release and a logo? It’ll be there stored there, just send them

the link!


The Process & Deliverables


‘understand, create, evaluate’

3.1 HTML & CSS files

3.2 Database (containing all

site content)

3

wirefra

me / ht

ml pro

totyp

e

2.1 User Profiles

2.1 User Goals

2.1 Site Map

2

infor

mation

arch

itectu

re

1.1 Business Process

Consultation

1.2 CMS Selected & deployed

1.3 Database Development

1

conte

nt man

agem

ent

6

6.1 Consistent visual &

functional user experience

(Browser Tested XHTML/

CSS files)

testin

g

5

5.1 HTML/AJAX/Flash/Java

script & CSS files

deve

lopmen

t

4.1 Look & Feel Concept Options

4.2 4 x Templates Designed

4.3 Web Optimised Graphics 5.4

Content Image Specifications

visua

l des

ign

4

RAPID DEVELOPMENT METHODOLOGY


‘Who are we talking to?’


We will seek to understand the target market and segment your

customers into user profiles. These user profiles will direct the creative

brief and the information architecture for the entire web site.

UNDERSTANDING OUR TARGET MARKET

The following analysis is conducted at the very the outset of the project.

- User Profiles

- User Goals

- User Journeys

SENIOR BRAND MANAGER

.Doc

EXTRANET

CLIENT NAME PROJECT

CLIENT NAME PROJECT FOLDERS COMMENTS

CLIENT NAME

CLIENT NAME

HOME

PDF

PPT

J Porter

Version 0.2

CONTENT AVAILABLE

SUMMARISED DUPLICATETEMPLATED BLOG PAGES

LOCAL WORDPRESS PAGES

NOTES

LEGEND

FORM

CONTACT DETAILS

SEARCH QUERY

POP-UP

user-centred designEXTERNAL URL

KEYWORDS/PHRASES

STRUCTURING & ORIGINATION

CANDIDATEDRIVEN SEARCH

RISK

OPERATIONS & PRODUCT CONTROL

INVESTMENT ANALYTICS

FUND MANAGEMENT & ALTERNATIVE INVESTMENTS

M&A, CORPORATE FINANCE AND

PRIVATE EQUITY

TRADING

SALES

MARKETS

selbyjennings.com - information architecture & keyword strategy

HOME SITE SEARCH RESULTS

site map :

CONTACT US / OFFICES

INDUSTRY WHITE PAPERS

SUBJECT 3 ON KEYWORD




ABOUT US

MARKETSLINKS?

OUR OFFICES

MANAGEMENTPROFILES/THE

BOARD

TRADING JOBS

FRONT OFFICE JOBS

BANKING JOBS

QUANTITATIVE ANALYST JOBS

QUART ANALYST JOBS

QUANT ANALYST

‘JOB SEEKER’Search terms...

EXECUTIVE SEARCH

SEARCH AND SELECTION

SEARCH SELECTION

HEAD HUNTING

HEAD HUNTERS

CITY HEAD HUNTERS

RETAINED SEARCH

CANDIDATE DRIVEN SEARCH

?

FINANCIAL RECRUITMENT

BANKING RECRUITMENT

‘CLIENT’Search terms...

CONTINGENT SEARCH


M&A JOBS

PRIVATE EQUITY JOBS

EQUITY ANALYST JOBS

QUANT JOBS

BANKING JOBS

TRADING JOBS

FRONT OFFICE JOBS

VACANCIES NEWS

INDUSTRYKEYWORD NEWS



CITY HEADHUNTERS

INTERVIEW

HEAD HUNTING


CONTINGENT SEARCH

RETAINEDSEARCH

EXECUTIVE SEARCH & SELECTION

SERVICES

QUANTITATIVE POSITIONS & STRATEGY

CLIENTS

BANKINGCLIENTS

FINANCIALSERVICES CLIENTS

INDUSTRYKEYWORD CLIENTS


TOP LEVEL / PARENTPAGES

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?KEYWORD?

How would a client describe your services when searching in Google?

BLOG & RSS FEED

Possible with minimal effort ‘create’ or blog existing industry papers or articles rich in keywords. It will also insure that we capture current industry buzzwords.

KEEP IT SIMPLE

• Avoid cramming in awkward keywords into the main site navigation. Certain nomenclature has become convention that users are familliar with and understand. • It should also be consise, ‘scannable’ and consistent with subsequent landing page title.

DUPLICATION?

• Could these be broken down into an appropriate heirarchy?

I need a job?

WHITE PAPERS

? RESEARCH ?

?

QUANTITATIVE ANALYITICS

? QUANT ANALYITICS ?

?

‘NON SEEKER’Search terms...

I want credibleinformation

USER GROUP

KEYWORDS / PHRASES

Who can provide

my resource need?

M&A JOBS

PRIVATE EQUITY JOBS

EQUITY ANALYST JOBS

EXAMPLE: USER JOURNEY

EXAMPLE: USER PROFILES DOCUMENT

EXAMPLE: INFORMATION ARCHITECTURE WITH SEARCH ENGINE OPTIMISATION KEYWORD STRATEGY


USER PROFILES & USER GOALS


.Doc

EXTRANET

CLIENT NAME PROJECT


CLIENT NAME

CLIENT NAME

HOME

PDF

PPT

Effective web design comes from a focus on the ‘people‘ who will use

the site, over the technology or corporate structure that produces it.

One of the first things we will do is identify your target customer’s needs

and characteristics so that we can prioritise the site design around their

goals and create a brand they will connect with.

The customer experience will be planned out in flow diagrams (left).


J Porter

Version 0.1

CONTENT AVAILABLE



NOTES

USER JOURNEYS

FORM

CONTACT DETAILS

SEARCH QUERY

POP-UP


KEYWORDS/PHRASES

VENTURE CAPITALISTSMANAGING DIRECTORS

USER PROFILE

GOALS/ NEEDS

MARKETING DIRECTORS

POTENTIAL CLIENTS DAY-TO-DAY BRANDED CLIENTSWhat do they know about my industry?

How do I manage my brand online, What do I do about these blog posts?

How can I get a quick overview of Branded’s credentials?

Where are the big brands? Show me evidence of financial sucess stories.


- Time Starved- Download/Print out an Executive Summary to read when traveling

- Financial credentials (detail?)- Sector Experience?

- Success stories, 'Marketing Directors made famous'

- Download slides to present to Marketing Director- Need expertise not vailable in house?

� ��

� � ��

� � � � � ��

HOME

CONTACT US CALL ME BACK?

CASE STUDIES

EXECUTIVESUMMARY

"The ideal end result is they call us to arrange a face to face credentials meeting"

"Firstly, tell them the stories of how we have done it for others"

PDF

PPT

.Doc

"Secondly, dont say too much. Facts get in the way of a good story"

Which media is appropriate?a) 2min overview presentation Flash?b) Download and Print?c) Download PPT to Present (to Snr.)?

"They will probably spend five minutes at most on the website"

MANAGING DIRECTORS

SAMPLE DELIVERABLE

(User Goals & Journeys)


‘What do we want to say?’


The established user goals will be extrapolated to form the primary

information architecture of the web site. An experienced Information

Architect will direct your site content so that it is:

- Categorised in a way your target audience understands

- Designed to make to their goals easy to achieve

- Consistent, useable and intuitive

- Aligned with your search engine optimisation strategy

INFORMATION ARCHITECTURE


.Doc

EXTRANET

CLIENT NAME PROJECT


CLIENT NAME

CLIENT NAME

HOME

PDF

PPT


J Porter

Version 0.2

CONTENT AVAILABLE



NOTES

LEGEND

FORM

CONTACT DETAILS

SEARCH QUERY

POP-UP


KEYWORDS/PHRASES

STRUCTURING & ORIGINATION


RISK

OPERATIONS & PRODUCT CONTROL

INVESTMENT ANALYTICS

FUND MANAGEMENT & ALTERNATIVE INVESTMENTS

M&A, CORPORATE FINANCE AND

PRIVATE EQUITY

TRADING

SALES

MARKETS

selbyjennings.com - information architecture & keyword strategy

HOME SITE SEARCH RESULTS

site map :

CONTACT US / OFFICES

INDUSTRY WHITE PAPERS





ABOUT US

MARKETSLINKS?

OUR OFFICES

MANAGEMENTPROFILES/THE

BOARD

TRADING JOBS

FRONT OFFICE JOBS

BANKING JOBS


QUART ANALYST JOBS

QUANT ANALYST

‘JOB SEEKER’Search terms...

EXECUTIVE SEARCH

SEARCH AND SELECTION

SEARCH SELECTION

HEAD HUNTING

HEAD HUNTERS

CITY HEAD HUNTERS

RETAINED SEARCH

CANDIDATE DRIVEN SEARCH

?

FINANCIAL RECRUITMENT

BANKING RECRUITMENT

‘CLIENT’Search terms...

CONTINGENT SEARCH


M&A JOBS

PRIVATE EQUITY JOBS

EQUITY ANALYST JOBS

QUANT JOBS

BANKING JOBS

TRADING JOBS

FRONT OFFICE JOBS

VACANCIES NEWS




CITY HEADHUNTERS

INTERVIEW

HEAD HUNTING


CONTINGENT SEARCH

RETAINEDSEARCH

EXECUTIVE SEARCH & SELECTION

SERVICES

QUANTITATIVE POSITIONS & STRATEGY

CLIENTS

BANKINGCLIENTS

FINANCIALSERVICES CLIENTS



TOP LEVEL / PARENTPAGES

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?

KEYWORD?KEYWORD?

How would a client describe your services when searching in Google?

BLOG & RSS FEED

Possible with minimal effort ‘create’ or blog existing industry papers or articles rich in keywords. It will also insure that we capture current industry buzzwords.

KEEP IT SIMPLE

• Avoid cramming in awkward keywords into the main site navigation. Certain nomenclature has become convention that users are familliar with and understand. • It should also be consise, ‘scannable’ and consistent with subsequent landing page title.

DUPLICATION?

• Could these be broken down into an appropriate heirarchy?

I need a job?

WHITE PAPERS

? RESEARCH ?

?

QUANTITATIVE ANALYITICS

? QUANT ANALYITICS ?

?

‘NON SEEKER’Search terms...

I want credibleinformation

USER GROUP

KEYWORDS / PHRASES

Who can provide

my resource need?

M&A JOBS

PRIVATE EQUITY JOBS

EQUITY ANALYST JOBS

SAMPLE DELIVERABLE

(Information Architecture - Site Map)


Once a draft site map has been approved, a prototype or ‘wireframe’ is

developed. A wireframe has no visual branding but provides an early,

prototype web site that we use to collate site content and to test.

Wireframing, before committing to the visual design means we are free

to iterate faster and more cost effectively. This ensures more relevant

specifications for the visual design and a truly optimised user

experience.

Essentially wireframes are draft page layout plans indicating which

content will appear on which page and how the site navigation will work.

They are valuable tools used to ratify numerous factors earlier rather

than later, including:

- What is the content?

- Can the business provide it?

- Where will it appear?

- Where will it come from?

- Is it navigable, clear and useable?

Yes? Then it’s worth investing in the visual design!

WIREFRAME PROTOTYPE


‘How do we want to say it?’


Knowing ‘who we are talking to’ (User Profiles) and ‘what we want to say’

(Information Architecture) means we are in a strong position to start with

the ‘How do we want to say it?’ question - the ‘Visual Design’ or branding.

How will the tonal values of the brand be expressed in the user

experience of the site?

A creative brief will be written to direct the visual design. This captures all

we know about our customers, the navigational requirements of the site

architecture as well as the scope of browsers we have decided to support.


.Doc

EXTRANET

CLIENT NAME PROJECT


CLIENT NAME

CLIENT NAME

HOME

PDF

PPT

‘Who are we talking to?’(User Profiles)

‘What do we want to say?’(Information Architecture)

‘How do we want to say it?’(Visual Design / Creative Brief)

VISUAL DESIGN BRIEF

Web site ‘Look & Feel’ Design


‘Look & Feel’ Design


CLIENT: MCDONALD’S / DISNEY PIXAR

PROJECT: WEB DESIGN

ART DIRECTOR: JONATHAN PORTER Our understanding of our target users and the signed off wireframes will

direct the Visual Design and Branding.

The objective of this stage, is to design and sign-off the look and feel of

the key templates that the site will be made up of. Typically this might

include the home page, a second level page defining the navigation

approach, a form page such as ‘Sign up to our Newsletter’ and a dynamic

content page such as the a Blog or a News page.

‘LOOK & FEEL’ DESIGN & TEMPLATE PRODUCTION

HOME TEMPLATE

CONTENT MANAGEMENT SYSTEM

FORM TEMPLATE BLOG TEMPLATE

CLIENT: NSPCC

PROJECT: WEB DESIGN

ART DIRECTOR: JONATHAN PORTER


New Brand Media work with The World Wide Web Consortium (W3C)

‘Web Standards’ to promote usability, accessibility and search engine

optimisation. Please see following diagram - ‘Web Standards’ Separation

of Content & Presentation and our web site for further information.

Careful selection of a content management system in the prototyping

phase will support the application of the final visual coding know as CSS,

(Cascading Style Sheets). Using a good web-standards based CMS such as

WordPress means the development of the site is already in good shape

and visual coding will be expedited.

HTML/CSS CODE DEVELOPMENT

CSS

XHTML


WEB SERVERDATABASE

CSS

XHTML

PRESENTATION

WWWCMS

CONTENT

SEPARATION OF CONTENT & PRESENTATION


CONTENT MANAGEMENT

WW

WBrands:

CSS

CSS CSS CSSCSS CSS

XHTML

WEB SERVER

DATABASE(S)

YOUR BRAND YOUR BRAND

LOOK AND FEEL 2

SITE 4

LOOK AND FEEL 4

WWW.YOURBRAND.COM WWW.YOURBRAND.BIZ FUTURE DOMAIN 4

SITE 3

LOOK AND FEEL 4

FUTURE DOMAIN 3

SITE 5

LOOK AND FEEL 5

FUTURE DOMAIN 5

LOOK AND FEEL 1

CM

S

CONTENT

Presentation Layer(Consistent Site Structure)

PROPOSED TECHNICAL ARCHITECTURE


Samples of all aforementioned deliverables and previous design

work can be supplied on request or viewed at:

www.newbrandmedia.co.uk/portfolio/

A profile of the assigned Creative Director for this project can be

viewed at:

www.newbrandmedia.co.uk/principals/

Other team profiles can be viewed at:

www.newbrandmedia.co.uk/about/

FURTHER INFORMATION

CLIENT: SELBY JENNINGS

PROJECT: BRAND IDENTITY & WEB DESIGN

AGENCY: NEW BRAND MEDIA

ART DIRECTOR: JONATHAN PORTER

new brand media user-centred design approach

Documents

web project

user profiles user goals

brands online3new brand

design decisions

brands online4more

decade of design development

brands online5our approach

usercentered designthe