module 12 - planning and managing web projects

© IDM 2008

Module 12: Planning and managing website development

Rob Manning MIDM DipIDM

Group Account Director

[email protected]

Jacob Bailey

© IDM 2008

Learning outcome• Understand the technologies and user-centred design processes needed for successful websites

.

Competencies developed• To review the relevance of new web design innovations and standards• To review contracts for website creation and enhancement• Select and effectively manage a web design agency

Topics

• The user-centred design web process and project plan• Wireframes - testing and implementing web site designs• Planning & briefing web projects - internal stakeholders and selecting / briefing external partners

• Web technologies and standards - XHMTL, CSS, XML feeds, AJAX, video streaming & rich media

• Selecting content management systems (CMS) and commerce systems• Information architecture - planning customer journeys• Budgeting for web projects

© IDM 2008

The user-centred design web process and project plan

Audience profiling

Website specification

Navigation Customer journey mapping

Competitor research

Agency briefWireframe

developmentTest site creation

User Acceptance

Testing

DDA Compliancy

UsabilityServer load

testing

Full Creative design

Final UATLive

environment Launch

Planning

Design

Testing

Delivery

© IDM 2008

Wire Frames – testing and implementing web site designs

© IDM 2008

Usability testing

Running a series of test scenarios with an ‘average’ group of customers.

•Identify 90%+ of potential usability issues before you launch

•Gather real data and feedback to increase efficiency of design•Develop insight into potential behaviour

© IDM 2008

User Acceptance Testing (UAT)

Final test once design is implemented by Subject Matter Expert or user

•Requirements sign off•Test script sign off•Bugs/crashes/issues

© IDM 2008

Where does testing fit?

Insights

Clickstream

Multiple Outcomes Analysis

Experiment and Testing

Voice of customer

Competitor Intelligence

© IDM 2008

Planning and briefing web projects – Internal stakeholders

Communicate:

• Objectives

• KPIs• Budgets

• Timescales

• Ongoing progress reports

Output:

• Buy in/approval

• Business requirements

• Involvement of right people

• Easier implementation

© IDM 2008

Planning and briefing web projects – Selecting/briefing external partners

© IDM 2008

Web technologies

HTML – Hypertext Markup Language

XML FEEDS – Extensible Markup Language

XHTML – Extensible Hypertext Markup Language

CSS – Cascading Style Sheets

AJAX – Asymetric Javascript and XHTML

RSS FEEDS – Really Simple Syndication

VIDEO STREAMING

RICH MEDIA

© IDM 2008

XML feeds

© IDM 2008

AJAX

© IDM 2008

RSS feeds

© IDM 2008

Rich media

© IDM 2008

Web Standards

DDA – Disability Discrimination Act

WAI – Web Accessibility Index

W3C – World Wide Web Consortium

© IDM 2008

Selecting content management systems (CMS) and commerce systems

© IDM 2008

Information architecture - planning customer journeys

© IDM 2008

Budgeting for web projects

• Traditional/historic spend– Top down– Bottom up

• Priority Based

• Activity Based

© IDM 2008

Budgeting for web projects

Planning

Design

Testing

Delivery

© IDM 2008

Budgeting for web projects – Planning

• Consultancy and research

• Specification development

• Technology research

• Analysis of historic web analysis and target audience

© IDM 2008

Budgeting for web projects – Design

• Creation of wireframes

• Creation and hosting of wireframes

• Development of core site (CMS/programming)

© IDM 2008

Budgeting for web projects – Testing

• Specification of testing programme

• Usability testing

• User Acceptance Testing

• Contingency for additional testing

© IDM 2008

Budgeting for web projects – Delivery

• Final design and development

• Hosting and launch

• On going maintenance

• Continued programme of testing

© IDM 2008

Example budget for web project

For corporate website with CMS

Planning stage = £5000 - £10000

Design stage = £15000 - £30000

Testing Stage = £15000 - £20000

Delivery (launch)= £5000 - £10000

Delivery (ongoing) = £12000 per year

© IDM 2008

ICI Dulux – World of Colour

© IDM 2008

The customer insights

• I want a quick and easy to use ‘one stop shop’ where I can find everything that I need to know about colour trends, colour application in the home and product information.

• I want an interesting, interactive, inspiring, easy to use, fun online environment that is refreshed regularly.

• I want a place where I can interact with like minded people, and discuss related topics other people.

• I want a place that helps me visualise my ideas and then recommends exactly what I need to create them.

Conclusion:• The current website tools are good, but customers find them complicated and

difficult to use. There needs to be better integration between MP and CSS.

© IDM 2008

The challenge

• Our target audience is bombarded with online visual stimulus everyday of the week.

• If websites are not easy to use and engaging it only takes one click to leave the site.

• A successful website needs to standout from the crowd by offering something unique in its approach. We need a USP! It must be something more than useful and usable.

• The site must address the diversity of individual users wants and needs.• Cutting edge technology soon becomes mainstream and we no longer have a

unique set of online colour visualisation tools.

© IDM 2008

The objective

• Position ICI as the leading online colour authority.• Lock in customers through online colour help. Everything we do must link

directly to product purchase and stockists of product.• Create a unique, stylish, interactive colour area that customers find intuitive and

competitors want to copy.• Integrate CSS and MP to create a seamless customer journey.• Everything we do must be simple, easy to use and customer focused.• Create a ‘desirable’ online experience unique to the diverse group of people

using the site.

© IDM 2008

Concept Statement Dulux ‘World of Colour’

• Existing colour visualisation websites are complex and often difficult to navigate. It would be great if there was a website that could make this easier and straight forward to get the result you want without getting confused.

• Dulux has a vast range of different colours and will provide you with expertly chosen schemes to suit your interiors decorating needs.

• Dulux world of colour is a ‘one stop shop’ of all things colour related in the home. It allows you to visualise your room colours with a few easy clicks of the mouse or if you want to create a more accurate representation of your room, upload digital photos or email an expert for advise or talk to like minded people, this is all available to do simply online within a few clicks.

• The ‘world of colour’ microsite will be created once and shared many times across the business. The unique approach to colour visualisation and expert interior advice will provide us with the edge over our competitors and make our site the first choice for consumers.

© IDM 2008

The business benefits

• Develop once and share many times.• Increase brand awareness and affinity.• Establish brand loyalty. • Drive sales through a direct link to product information, local stockists and

accurate shopping list generation.• Be the ‘leaders’ not the ‘followers’ in online colour visualisation.• Reinforce our brand values online as: stylish, passionate about interior design,

the home and all things ‘colour’. • Collect a database of email addresses of users that we can communicate to on

a local level.

© IDM 2008

Microsite landing page

Paint my room online Decorate my

colour space

Inspire me!

What tools do I need to get decorating?

Talk to like minded people

Where can I buy the products?

I want to be on the VIP list

Who’s who…

The scientific bit

Microsite content

© IDM 2008

How do you get to the Microsite?

• Main country website• Link to Microsite through icon • Microsite landing page

Main country website

User clicks link into Microsite

Landing page of Microsite

© IDM 2008

Information architecture

Landing page

Paint my room online NGMP

Inspire me! Customise my colour spaceWhere can I buy product?The scientific bit Who’s whoI want to be on the VIP listTools for the job

Standard room visualisation Personalised room visualisation Upload a digital image

© IDM 2008

Personalise my colour space(Landing page)

• Customise the Microsite landing page look and feel, to be exactly how you want it.

• Ability to change the landing page layout.• Ability to change background colours, fonts, menu items that are displayed.• There is a standard setting for users that don’t want to customise the Microsite.• There are set ‘themes’ that relate to the Colour Future Trends that can be applied to

the Microsite.• Ability to add personal photos, widgets, and pictures.

• Good example: igoogle

© IDM 2008

NGMP (Out of scope)

• MP Room visualiser (simple route with drag and drop functionality)

• Paint your own picture

© IDM 2008

NGMP Detailed visualisation

• Personalised area unique to the individual using the site.• Users must be logged into ‘My Account’ to use this area.

Ability to:• design room settings using real measurements and requirements (NGMP)• create a gallery area to display personalised work• comment on other peoples work in the gallery section • upload you own photos and customise painting sections• create personalised colour schemes• create a personalised scrap book to hold images and pictures that inspire

• Good example: • www.designmyroom.com• www.mydeco.com

http://www.designmyroom.com/

© IDM 2008

My Account

Personalised area with access to:

• exclusive content–VIP colour area for members only.• previous rooms created • inspiration collected e.g. scrapbook• link through to comment on other peoples work in the gallery area etc • select RSS information feeds to customise the area• Greeted with a a personalised message • Section titles are named ‘Louise’s Gallery’, ‘Louise’s rooms’ etc

• Good example: www.housetohome.co.uk

© IDM 2008

Inspire Me!

• See the latest colour trends and inspiration from around the world. Including ‘What’s hot and what’s not’

• Colours futures brought to life online (not just replication of the book content).

• Things we love…• ‘’What is hot what is not’’• Links to the Designer profiles and content.• Inspirational room sets and colour palettes

© IDM 2008

Interactive Community

• Join in the interactive forum – (this would need to be monitored).• Read designer blogs – (one resource that could be translated).• Ask an Expert - Forums, Blogs, Postings (centrally appointed resource or

intelligent system that responds to key words).• Handy hints and tips. Blog postings from the Experts on topical areas.• Post a comment within The gallery, on other peoples rooms and photos.• ‘What’s hot and what’s not’ online voting mechanic, with instant results

displayed.• Watch or download Podcasts • Vodcasts of key trends brought to life.

© IDM 2008

Good exampleswww.topshop.com

www.BMW.comwww.boots.com/expert

www.designmyroom.com

http://www.topshop.com/

http://www.bmw.com/

http://www.boots.com/expert

© IDM 2008

Tools for the jobPractical advice

• Decorating tips and step-by-step guides.• Product information – benefits and advice.• Tricky decorating problems solved.• Interior decorating hints and tips.• Painting tools explained• Designer tips from the top• Link to ‘Ask an Expert’. • Products showcase. Constant link on all pages to a display of the

products available in that country.• Stockist locator. Constant link on all pages to a display of the store

locations in that country. This code be similar to a post code look up.• Paint calculator – present as a link from all the visualisation areas. This

accurately calculates how may pots of each colour paint you need. What equipment is recommended etc. Shopping list is printed out for the customer to take into store.

© IDM 2008

Where can I buy the products?

• Interactive location maps of stockists.• Postcode look up.• Products showcase/ Product catalogue.

Constant link on all pages to a display of the products available in that country.

© IDM 2008

I want to be on the VIP list

• Exclusive content for users who sign up.

• Be the first to hear about new colour launches.

• Invitation to exclusive store evenings.• Loyalty scheme for high end users.• Discounts• Vouchers• Promotions

http://www.oli.co.uk/

© IDM 2008

Good exampleswww.ikea.co.uk

www.boots.com/advantagecardwww.tesco.com/clubcard

http://www.ikea.co.uk/

http://www.boots.com/advantagecard

http://www.tesco.com/clubcard

© IDM 2008

Who’s who…

• Meet the team• Find out about the people responsible for creating the colour names.• Find out about the innovations and how they become a reality.• Read about how important people are to our organisation.• Designer profiles. • Read about the people behind the colour futures trends?• Good examples:

www.habitat.co.uk

www.oli.co.uk

www.ikea.co.uk

http://www.habitat.co.uk/


© IDM 2008

The scientific bit

• The science behind colour• Colour wheel brought to life• Harmonising/ contrasting/ toning explained

© IDM 2008

Look and feel

• A completely different look and feel to the rest of the main site, so the customer feels that they are within a different area.

• Fun, stylish, cotemporary and different.• Feminisation of the microsite, to look and feel softer and more aesthetically

appealing. • White space is still an important part of the design to highlight the main Dulux colours. • Engaging and innovative presentation of information and colours. • Simple logical interface design that appeals to the style conscious interiors market.• You can access the microsite from the main Country website, but it will also have its

own URL.

© IDM 2008

16 Cell Matrix

Principle

Venture

Capital

Commerce

With BT OnePlan

With BT onAnother Plan

Existing VA customer

With the competition

S1

S2

S3

S4

S5

S6

S7

S8

S9

S10

S11

S12

S13

S14

S15

S16

© IDM 2008

User JourneysIS Webpages, Landing page, buttons and appropriate text

Ver 2.0

Customer Segment Segment One: For customer on BT

OnePlan Segment Two: For customer on

some other BT tariff

Segment Three: For customers with other

suppliers (with the COMPETITION)

Segment Four: For customers who don't know or just want access to VA services

First Page/Landing page 1. I am a BT Business OnePlan

customer

2. I am NOT a BT Business OnePlan customer but use BT

services

3. I'm interested in becoming a BT Customer

(i.e. convince me!!!) 4. Our services

Secondary page

1a. I have JUST signed a BT

Business OnePlan contract

1b. I am on existing BT OnePlan contract Path 1

For marketing to a sub-segment of a

'risk' group Not applicable 4a. I am existing Value

Add User

4b. Not sure what Value Add user

and what this site about?

Path 1a Path 1b Path 2a Path 2b (hidden) Path 3 Path 4a Path 4b

Text/information on the webpage

Congratulate them for signing the BT OnePlan and get them engaged on

VA journey

Determine whether they have any VA products, if not get them going with BT OneBill, BTBA, etc

Get them going onto the VA

story

Hidden/landing page. Remind them of the benefits being

with BT

Page (text); Share with them the 'Why BT Story' plus Value

Add Story (combined)

Welcome back to VA. Help them work out what they have and promote

the next one

Promote the benefits of VA to

their business

Our Objectives Take BT One Bill

and BTBA

Work out what they have in terms of VA

and promote the next one

Take BT One Bill and BTBA

Take the BT Business OnePlan challenge (defence)

Take the BT Business OnePlan challenge

(acquisition) Take the next stage of the

VA journey

Register for BT OnePlan, sign up

BTBA, etc

RAG Profile Yes Yes No Yes Yes, if passed No No

Desktop Profile Manager Yes Yes

© IDM 2008

Build on for communicationsPART A GETTING THEM GOING ON THE SITE

Segment 1a Just signed up to BT OnePlan by a sales specialistSteps Current state Next stage Action Promotion How Time/Duration Delay Frequency Eshot no: Variants

1a.1May or may not be enthusiastic

about going to the website Capture registrationGet regular feed of new customers and encourage to visit & register

Get all your BTOP components Either via SG/IS platform

As soon as customer signs contract 1 week 3x 1 2

1a.2 Visited site but did not register Entice them to registerGet regular feed of new customers and encourage to visit & register

Get all your BTOP components Either via SG/IS platform 1 week 3x 2 2

1a.3Registered on the site but did not

complete the full detailsEncourage full

registration Get people to complete registration Get protected online BTIS 2 days 3x 3 2

1a.4Registration fully completed but did not request any of the VA products

At the minimum get them to request BTOB and

BTBAGet people to activate and download

their VA productsGet all your BTOP

components BTIS 2 days 3x 4 2

Segment 1b Existing BTB OnePlan customerSteps Current state Next stage Action Promotion How Time/Duration Delay Frequency Eshot no: Variants

1b.1Not aware they BTOP has got a

whole heap betterGet them to visit the site

and registerGet regular feed of new customers and encourage to visit & register

Get all your BTOP components Either via SG/IS platform

As soon as customer signs contract 1 week 3x 5 1

1b.2 Visited site but did not register Entice them to registerGet regular feed of new customers and encourage to visit & register

Get all your BTOP components Either via SG/IS platform 1 week 3x 2 2

Segment 2 I am a BT customer but not on BTOPSteps Current state Next stage Action Promotion How Time/Duration Delay Frequency Eshot no: Variants

2.1

May be at risk customer and has been promoted BTOP but has not

yet signed up.Encourage them to visit

the IS Website

Get them to contact BT for a review on their current telephone bill to see how much could be saved by using

BT VA products.Take the OnePlan

Challenge Either via SG/IS platformAs soon as customer

signs contract 1 week 3x 5 1

Segment 3 Legacy VA userSteps Current state Next stage Action Promotion How Time/Duration Delay Frequency Eshot no: Variants

3.1 Existing VA customer - dorment Entice them to reactivate

their VA products

Get them to visit the BTIS site and register to get up to date on their

products plus

Register online to gain a level of

protection through your personalised

status screen. VA Registration Process

on BTBIS 1 week 3x 3 1

3.2Existing VA customer - Active but

not on OnePlan

Encorage them to go online and register

through the VA registration process

Get them to register so they can benefit from our personalised status

screen and desktop updater.

Register online to gain a level of

protection through your personalised

status screen / Desktop updater. BTBIS 2 days 3x 3 2

Segment 4 I am not a BT customerSteps Current state Next stage Action Promotion How Time/Duration Delay Frequency Eshot no: Variants

3.1 Not with BTEncourage them to visit

the IS Website

Get them to contact BT for a review on their current telephone bill to see how much could be saved by using

BT VA products.Take the OnePlan

Challenge BTIS N/A N/A x2