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