New Brand Media User-Centred Design Approach

making brands online THE N EW BRA ND M EDI A APPROAC H

v 0.1 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.

1

making brands online

CONTENTS

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

2

making brands online

New Brand Media is a digital agency, set up to maximise our clients’ return on investment through the use of strategic and creative design methodologies

3

making brands online

More simply put...

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

4

making brands online

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

5

making brands online

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)

6

making brands online

‘USER-CENTERED DESIGN’ New Brand Media employ user-centered design principles to produce online experiences that your customers can and want to use. .

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.

7

making brands online

CONTENT MANAGEMENT - REDUCED COSTS Content Management 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.

8

making brands online

‘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.

CMS

WWW

CONTENT

XHTML

CSS

9

making brands online

‘MAXIMUM PROJECT VISIBILITY’ Project Extranet A 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

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!

10

making brands online

The Process & Deliverables

11

making brands online

1

2

3

4

5

te st in g

de ve lo pm en t

vis ua ld es ig n

pr ot ot yp e /h tm l

w ire fra m e

ar ch ite ct ur e in fo rm at io n

co nt en tm an ag em en t

RAPID DEVELOPMENT METHODOLOGY

6

1.1 Business Process

2.1 User Profiles

3.1 HTML & CSS files

4.1 Look & Feel Concept Options

5.1 HTML/AJAX/Flash/Java

6.1 Consistent visual &

Consultation

2.1 User Goals

3.2 Database (containing all

4.2 4 x Templates Designed

script & CSS files

functional user experience

1.2 CMS Selected & deployed

2.1 Site Map

site content)

4.3 Web Optimised Graphics 5.4

(Browser Tested XHTML/

Content Image Specifications

CSS files)

1.3 Database Development

‘understand, create, evaluate’

12

making brands online

‘Who are we talking to?’

13

making brands online

UNDERSTANDING OUR TARGET MARKET EXAMPLE: USER PROFILES DOCUMENT

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.

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

- User Profiles - User Goals - User Journeys

EXAMPLE: INFORMATION ARCHITECTURE WITH SEARCH ENGINE OPTIMISATION KEYWORD STRATEGY

site map : selbyjennings.com - information architecture & keyword strategy USER GROUP KEYWORDS / PHRASES How would a client describe your services when searching in Google?

‘CLIENT’ Search terms...

Who can provide my resource need?

‘JOB SEEKER’

I need a job?

‘NON SEEKER’

I want credible information

Search terms...

Search terms...

M&A JOBS

EXECUTIVE SEARCH

CONTINGENT SEARCH

TRADING JOBS

SEARCH AND SELECTION

RETAINED SEARCH

FRONT OFFICE JOBS

SEARCH SELECTION

CANDIDATE DRIVEN SEARCH

BANKING JOBS

HEAD HUNTING

FINANCIAL RECRUITMENT

QUANTITATIVE ANALYST JOBS

HEAD HUNTERS

BANKING RECRUITMENT

QUART ANALYST JOBS

CITY HEAD HUNTERS

?

QUANT ANALYST

WHITE PAPERS

PRIVATE EQUITY JOBS

? RESEARCH ?

EQUITY ANALYST JOBS

?

QUANTITATIVE ANALYITICS

HOME

? QUANT ANALYITICS ?

SITE SEARCH RESULTS

?

SENIOR BRAND MANAGER TOP LEVEL / PARENT PAGES

ABOUT US

SERVICES

MARKETS

VACANCIES

CLIENTS

NEWS

INDUSTRY WHITE PAPERS

CONTACT US / OFFICES

TRADING OUR OFFICES

CONTINGENT SEARCH

TRADING JOBS

BANKING CLIENTS KEYWORD?

INDUSTRY KEYWORD NEWS KEYWORD?

SUBJECT 1 ON KEYWORD KEYWORD?

INDUSTRY KEYWORD NEWS

SUBJECT 2 ON KEYWORD KEYWORD?

SALES

HOME

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.

MANAGEMENT PROFILES/THE BOARD

MARKETS LINKS? KEYWORD?

EXTRANET

RETAINED SEARCH

FRONT OFFICE JOBS CANDIDATE DRIVEN SEARCH

CANDIDATE DRIVEN SEARCH

HEAD HUNTING

BANKING JOBS STRUCTURING & ORIGINATION

INDUSTRY KEYWORD CLIENTS KEYWORD?

QUANTITATIVE POSITIONS & STRATEGY

QUANTITATIVE ANALYST JOBS

RISK

QUANT JOBS

EXECUTIVE SEARCH & SELECTION

FINANCIAL SERVICES CLIENTS KEYWORD?

INDUSTRY KEYWORD CLIENTS KEYWORD?

KEYWORD? INDUSTRY KEYWORD NEWS KEYWORD?

SUBJECT 3 ON KEYWORD KEYWORD?

CITY HEADHUNTERS INTERVIEW KEYWORD?

SUBJECT 4 ON KEYWORD KEYWORD?

DUPLICATION?

CLIENT NAME

OPERATIONS & PRODUCT CONTROL

• Could these be broken down into an appropriate heirarchy?

PROJECT

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.

M&A JOBS INVESTMENT ANALYTICS

FUND MANAGEMENT & ALTERNATIVE INVESTMENTS

CLIENT NAME

PROJECT FOLDERS

M&A, CORPORATE FINANCE AND PRIVATE EQUITY

COMMENTS

J Porter

PRIVATE EQUITY JOBS

EQUITY ANALYST JOBS

LEGEND CONTENT AVAILABLE

LOCAL WORDPRESS PAGES

POP-UP

KEYWORDS/PHRASES

NOTES

EXTERNAL URL

FORM

Version 0.2 CLIENT NAME

CLIENT NAME

EXAMPLE: USER JOURNEY

CONTACT DETAILS

SUMMARISED DUPLICATE TEMPLATED BLOG PAGES

SEARCH QUERY

user-centred design

PPT .Doc PDF

14

making brands online

USER PROFILES & USER GOALS 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

SENIOR BRAND MANAGER

goals and create a brand they will connect with.

HOME

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

EXTRANET

CLIENT NAME

CLIENT NAME

PROJECT

PROJECT FOLDERS

COMMENTS

CLIENT NAME

CLIENT NAME

PPT .Doc PDF

15

making brands online

DAY-TO-DAY BRANDED CLIENTS

What do they know about my industry?

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

MANAGING DIRECTORS

GOALS/ NEEDS

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

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

MARKETING DIRECTORS

VENTURE CAPITALISTS - Financial credentials (detail?)

- Sector Experience?

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

LE AB ys) ER ne IV ur EL Jo D & E als PL o M er G SA (Us

USER PROFILE

POTENTIAL CLIENTS

- Success stories, 'Marketing Directors made famous'

SENIOR BRAND MANAGER

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

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

MANAGING DIRECTORS

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

HOME

PDF PPT

CASE STUDIES

EXECUTIVE SUMMARY

CONTACT US

CALL ME BACK?

"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.)?

.Doc

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

J Porter

USER JOURNEYS CONTENT AVAILABLE

LOCAL WORDPRESS PAGES

FORM

Version 0.1

CONTACT DETAILS SEARCH QUERY

POP-UP

KEYWORDS/PHRASES

NOTES

EXTERNAL URL

16 SUMMARISED DUPLICATE TEMPLATED BLOG PAGES

making brands online user-centred design

‘What do we want to say?’

17

making brands online

INFORMATION ARCHITECTURE 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: SENIOR BRAND MANAGER

HOME

EXTRANET

CLIENT NAME

CLIENT NAME

-

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

PROJECT

PROJECT FOLDERS

COMMENTS

CLIENT NAME

CLIENT NAME

PPT .Doc PDF

18

making brands online

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

TOP LEVEL / PARENT PAGES

‘CLIENT’ Search terms...

Who can provide my resource need?

‘JOB SEEKER’ Search terms...

M&A JOBS

EXECUTIVE SEARCH

CONTINGENT SEARCH

TRADING JOBS

SEARCH AND SELECTION

RETAINED SEARCH

FRONT OFFICE JOBS

SEARCH SELECTION

CANDIDATE DRIVEN SEARCH

BANKING JOBS

HEAD HUNTING

FINANCIAL RECRUITMENT

QUANTITATIVE ANALYST JOBS

HEAD HUNTERS

BANKING RECRUITMENT

QUART ANALYST JOBS

CITY HEAD HUNTERS

?

QUANT ANALYST

ABOUT US

SERVICES

OUR OFFICES

CONTINGENT SEARCH

I need a job?

PRIVATE EQUITY JOBS EQUITY ANALYST JOBS

MARKETS LINKS? KEYWORD?

HOME

MARKETS

VACANCIES

TRADING JOBS

RETAINED SEARCH

FRONT OFFICE JOBS CANDIDATE DRIVEN SEARCH

CANDIDATE DRIVEN SEARCH

HEAD HUNTING

WHITE PAPERS ? RESEARCH ?

? QUANT ANALYITICS ?

SITE SEARCH RESULTS

CLIENTS

?

NEWS

BANKING CLIENTS KEYWORD?

INDUSTRY KEYWORD NEWS KEYWORD?

FINANCIAL SERVICES CLIENTS KEYWORD?

BANKING JOBS STRUCTURING & ORIGINATION

INDUSTRY KEYWORD CLIENTS KEYWORD?

QUANTITATIVE POSITIONS & STRATEGY

QUANTITATIVE ANALYST JOBS

RISK

QUANT JOBS

INDUSTRY KEYWORD CLIENTS KEYWORD?

EXECUTIVE SEARCH & SELECTION

INDUSTRY KEYWORD NEWS KEYWORD? INDUSTRY KEYWORD NEWS

INDUSTRY WHITE PAPERS

CONTACT US / OFFICES

SUBJECT 1 ON KEYWORD KEYWORD?

SUBJECT 2 ON KEYWORD KEYWORD?

KEYWORD?

SUBJECT 3 ON KEYWORD KEYWORD?

CITY HEADHUNTERS INTERVIEW KEYWORD?

SUBJECT 4 ON KEYWORD KEYWORD?

DUPLICATION? • Could these be broken down into an appropriate heirarchy?

OPERATIONS & PRODUCT CONTROL

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.

M&A JOBS INVESTMENT ANALYTICS

FUND MANAGEMENT & ALTERNATIVE INVESTMENTS M&A, CORPORATE FINANCE AND PRIVATE EQUITY

J Porter

PRIVATE EQUITY JOBS

EQUITY ANALYST JOBS

LEGEND CONTENT AVAILABLE

LOCAL WORDPRESS PAGES

POP-UP

KEYWORDS/PHRASES

NOTES

EXTERNAL URL

FORM

Version 0.2

CONTACT DETAILS SEARCH QUERY

SUMMARISED DUPLICATE TEMPLATED BLOG PAGES

19

user-centred design making brands online

)

• 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.

Search terms...

QUANTITATIVE ANALYITICS

SALES MANAGEMENT PROFILES/THE BOARD

I want credible information

?

TRADING

KEEP IT SIMPLE

‘NON SEEKER’

p LE Ma AB ite ER - S IV re EL ctu D te E chi PL Ar

USER GROUP

M on SA ati rm fo (In

site map : selbyjennings.com - information architecture & keyword strategy

WIREFRAME PROTOTYPE 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!

20

making brands online

‘How do we want to say it?’

21

making brands online

VISUAL DESIGN BRIEF ‘Who are we talking to?’

(User Profiles)

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.

‘What do we want to say?’

(Information Architecture)

‘How do we want to say it?’

(Visual Design / Creative Brief)

SENIOR BRAND MANAGER

Web site ‘Look & Feel’ Design

HOME

EXTRANET

CLIENT NAME

CLIENT NAME

PROJECT

PROJECT FOLDERS

COMMENTS

CLIENT NAME

CLIENT NAME

PPT .Doc PDF

22

making brands online

‘Look & Feel’ Design

23

making brands online

‘LOOK & FEEL’ DESIGN & TEMPLATE PRODUCTION 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.

CLIENT: NSPCC PROJECT: WEB DESIGN ART DIRECTOR: JONATHAN PORTER

HOME TEMPLATE

FORM TEMPLATE

BLOG TEMPLATE

CONTENT MANAGEMENT SYSTEM 24

making brands online

HTML/CSS CODE DEVELOPMENT

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.

XHTML Careful selection of a content management system in the prototyping

CSS

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.

25

making brands online

SEPARATION OF CONTENT & PRESENTATION CMS CONTENT

WWW PRESENTATION

XHTML

CSS

DATABASE

WEB SERVER

26

making brands online

PROPOSED TECHNICAL ARCHITECTURE

WWW

Brands: WWW.YOURBRAND.COM

WWW.YOURBRAND.BIZ

FUTURE DOMAIN 3

FUTURE DOMAIN 4

FUTURE DOMAIN 5

YOUR BRAND

YOUR BRAND

SITE 3

SITE 4

SITE 5

LOOK AND FEEL 1

CSS

LOOK AND FEEL 2

LOOK AND FEEL 4

LOOK AND FEEL 4

Presentation Layer

CSS

CSS

(Consistent Site Structure)

LOOK AND FEEL 5

CSS

CSS

XHTML CSS

CMS

WEB SERVER

CONTENT MANAGEMENT

CONTENT

DATABASE(S)

27

making brands online

FURTHER INFORMATION 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/ CLIENT: SELBY JENNINGS PROJECT: BRAND IDENTITY & WEB DESIGN AGENCY: NEW BRAND MEDIA ART DIRECTOR: JONATHAN PORTER

Other team profiles can be viewed at:

www.newbrandmedia.co.uk/about/

28

making brands online