Module 12 - Planning and Managing Web Projects

Module 12: Planning and managing website development Rob Manning MIDM DipIDM Group Account Director [email_address] Jacob Bailey

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

The user-centred design web process and project plan Audience profiling Website specification Navigation Customer journey mapping Competitor research Agency brief Wireframe development Test site creation User Acceptance Testing DDA Compliancy Usability Server load testing Full Creative design Final UAT Live environment Launch Planning Design Testing Delivery

Wire Frames – testing and implementing web site designs

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

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

Where does testing fit? Insights Clickstream Multiple Outcomes Analysis Experiment and Testing Voice of customer Competitor Intelligence

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

Planning and briefing web projects – Selecting/briefing external partners

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

XML feeds

AJAX

RSS feeds

Rich media

Web Standards

DDA – Disability Discrimination Act

WAI – Web Accessibility Index

W3C – World Wide Web Consortium

Selecting content management systems (CMS) and commerce systems

Information architecture - planning customer journeys

Traditional/historic spend

Top down

Bottom up

Priority Based

Activity Based

Planning

Design

Testing

Delivery

Budgeting for web projects – Planning

Consultancy and research

Specification development

Technology research

Analysis of historic web analysis and target audience

Budgeting for web projects – Design

Creation of wireframes

Creation and hosting of wireframes

Development of core site (CMS/programming)

Budgeting for web projects – Testing

Specification of testing programme

Usability testing

User Acceptance Testing

Contingency for additional testing

Budgeting for web projects – Delivery

Final design and development

Hosting and launch

On going maintenance

Continued programme of testing

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

ICI Dulux – World of Colour

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.

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.

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.

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.

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.

Microsite content 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

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

Information architecture Landing page Paint my room online NGMP Inspire me! Customise my colour space Where can I buy product? The scientific bit Who’s who I want to be on the VIP list Tools for the job Standard room visualisation Personalised room visualisation Upload a digital image

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

NGMP (Out of scope)

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

Paint your own picture

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

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

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

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.

Good examples www.topshop.com www.BMW.com www.boots.com/expert www.designmyroom.com

Tools for the job Practical 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.

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.

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

Good examples www.ikea.co.uk www.boots.com/advantagecard www.tesco.com/clubcard

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

Good examples www.habitat.co.uk www.oli.co.uk www.ikea.co.uk

The scientific bit

The science behind colour

Colour wheel brought to life

Harmonising/ contrasting/ toning explained

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.

Good examples www.topshop.com www.katemosstopshop.com webdesignerwall

BT Intelligent Solutions

16 Cell Matrix Principle Venture Capital Commerce With BT OnePlan With BT on Another Plan Existing VA customer With the competition S1 S2 S3 S4 S5 S6 S7 S8 S9 S10 S11 S12 S13 S14 S15 S16

User Journeys IS 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

Web Design

Build on for communications PART A GETTING THEM GOING ON THE SITE Segment 1a Just signed up to BT OnePlan by a sales specialist Steps Current state Next stage Action Promotion How Time/Duration Delay Frequency Eshot no: Variants 1a.1 May or may not be enthusiastic about going to the website Capture registration Get 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 register Get 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.3 Registered on the site but did not complete the full details Encourage full registration Get people to complete registration Get protected online BTIS 2 days 3x 3 2 1a.4 Registration fully completed but did not request any of the VA products At the minimum get them to request BTOB and BTBA Get people to activate and download their VA products Get all your BTOP components BTIS 2 days 3x 4 2 Segment 1b Existing BTB OnePlan customer Steps Current state Next stage Action Promotion How Time/Duration Delay Frequency Eshot no: Variants 1b.1 Not aware they BTOP has got a whole heap better Get them to visit the site and register Get 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 register Get 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 BTOP Steps 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 platform As soon as customer signs contract 1 week 3x 5 1 Segment 3 Legacy VA user Steps 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.2 Existing 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 customer Steps Current state Next stage Action Promotion How Time/Duration Delay Frequency Eshot no: Variants 3.1 Not with BT 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 BTIS N/A N/A x2

Ignition NBS

Specification

User Journeys

Wire Frames

Web Design

Ignition NBS