ANATOMY OF A WEBSITE PROJECT Jasper Ditton, Head of Digital | 21.03.14

INTRODUCTION

The 7Ps is a British Army adage for: “Proper Planning and Preparation Prevents P*** Poor Performance.”

This statement can have broad applications but in the context of website development projects, the translation is:

“To ensure the best outcome for a website development project (on time, on budget, as expected), the project needs to be properly scoped and planned.”

This presentation summarises the approach Marketecture uses for the delivery of medium to large website projects – applying a “Waterfall” development methodology.

DEVELOPMENT METHODOLOGIES

There are a number of development methodologies used by marketing agencies – prototyping, SCRUM frameworks, spiral and waterfall. Each have different levels of suitability for different types of projects. Often the scale and complexity will determine which approach is used.

Whilst landing pages and smaller microsites can be delivered well with a “rapid prototyping” approach, this approach won’t always be suitable for larger projects.

This presentation focuses on the waterfall development methodology

Marketecture uses for medium to large website development projects

THE WATERFALL MODEL The waterfall model is a cascading development process wherein a project progresses from one stage to another with a formal approval process For example, design doesn’t start until requirements have been established and the project has been fully scoped.

All projects require a degree of pragmatism and the ability to handle change.

For example, midway through the project, there may be a change in the CRM platform a site needs to integrate with. The impact and response will depend on when the change happens - if the project is in the design phase, then the planning for the implementation will be adjusted. If the functionality has already been built (i.e. in verification stage), a “mini waterfall” to integrate the new functionality may be required, after which the original plan will continue.

#1 - REQUIREMENTS / SCOPING

STAGE #1 – REQUIREMENTS / SCOPING

The first stage of any website development project is to gather the requirements, often referred to as the scoping phase.

The purpose of this stage is to prepare a good blueprint/ plan for the project to ensure the website:

• Meets its delivery goals – on time, on budget

• Meets its marketing goals – delivers customer leads, builds audience engagement or performs well against other metrics

• Meets its customer goals – enables existing or new customers to achieve their goals when visiting the website

The following pages summarise activities and deliverables that may be involved in this stage of development.

ACTIVITIES & DELIVERABLES Activity Description Deliverables

Strategy • Establish the requirements of the website, its drivers and key requirements

• Discuss functionality required on the website and any required interaction with 3rd party systems (e.g. CRM, automation platforms)

• Identify further areas which need to be investigated to ensure the website meets its goals

• If the website is a replacement site, how can use of the existing website inform the project? What website analytics are available?

• Requirements document • Research plan • Analysis of existing website • Analysis of website

performance (analytics)

Planning • Map out information architecture (IA) • Map out content requirements

and page-level content hierarchy • Produce technical specification – how the

site is going to be built: platform, components, interactions with 3rd party systems (CRM, automation platforms, feeds, ticketing systems etc.)

• IA – Sitemap • IA – Calls-to-action /

promo hierarchy • Technical specification • Content hierarchy • Wireframes (key pages)

#2 - DESIGN

STAGE #2 – DESIGN

The next stage is to design the layout, interactivity, usability, look and feel of the website producing the graphical assets that will be used by the development team.

This stage is normally split into three core activities:

Design activity Description

Phase1: Style-setting

• Establish online brand parameters based on brand guidelines • Design homepage • Design 1x sub-page

Phase 2: Key page design

• Design key pages (as identified in the sitemap)

Phase 3: Remaining required pages

• Any other pages required for development – for example, the template for individual news or blog items

ACTIVITIES & DELIVERABLES

Activity Description Deliverables

Design • Style-setting • Key page design • All pages required by the

development team • If the website is to be built with a

multi-device responsive layout, then variants of all these designs for different device breakpoints may be required or alternative style guidance (to be applied during development)

• During the design stage, as the website interface is developed, the user journey, interactivity and page organisation defined in the wireframes will often need to be updated

• Visuals - may be presented as JPGs or online via Invision preview platform

• Multi-device site variants – desktop / tablet / mobile if applicable

#3 - IMPLEMENTATION

STAGE #3 – IMPLEMENTATION / DEVELOPMENT

The third “implementation”, “build” or “development” stage is when the website is constructed based on the approved designs (which supersede the wireframes) and technical specification.

Ideally, a significant percentage of the text and graphical content would be added during this stage to ensure that the designs and page layouts work with “real world” content.

When a content management system (CMS) is used, Marketecture will configure this with the latest stable platform core and any supporting modules to achieve the specified functionality – for example, any contact form handlers.

ACTIVITIES

Activity Description

CMS • Set up core platform in development area • Install supporting modules / plugins

Website / CMS-theming • Develop content types • Set up site structure in CMS / framework in accordance with

sitemap and information architecture planning • All HTML coding and CSS (cascading style sheets) built to

W3C standards

Content population • Add page and news text and supporting imagery

#4 - VERIFICATION

STAGE #4 – VERIFICATION

A vital part of any website project is thorough testing for both functionality and the online interface. Marketecture’s quality assurance (QA) process includes:

• Requirements comparison – does the website achieve the goals established at the start of the project?

• Visual comparison – does the website accurately match the brand and user interface established in the design phase?

• Functionality testing – are all search facilities, forms and online tools bug free?

• Cross-browser testing – Given the variation for support of international standards, does the site appear as it should in the latest browsers? For older browsers that may not support certain features, is there “graceful degradation”? (i.e. the website automatically displays an acceptable alternative)

STAGE #4 – VERIFICATION

Once we have completed our internal QA process, we upload the website for user acceptance testing (UAT) for our clients to preview the website before it goes live.

We use a password protected area so it will not be indexed by search engines or viewed by competitors/ staff until it is ready to go live.

Activity Description

Project management • Requirements comparison • Visual comparison

Technical testing • Functionality testing • Cross-browser testing

#5 – SITE MAINTENANCE & EVOLUTION

STAGE #5 – SITE MAINTENANCE & EVOLUTION

After a successful verification stage, we deploy the website to the live environment, once all approvals are completed by project stakeholders. Following go-live, if the website is based on a CMS, then maintenance of this platform is vital to ensure it is kept up-to-date with security patches and upgrades.

We provide a number of options to help you to achieve this:

• Quoted development – for larger “phase 2” additions

• Pre-pay support packages – for ad-hoc changes after deployment

• CMS maintenance retainers – to separate platform maintenance from ad-hoc changes and planned development

SUMMARY

SUMMARY

The waterfall model provides an organised, systematic approach to website development that minimises risks in the development of medium to large sized website development projects.

In addition to the range of maintenance services mentioned in the previous section, Marketecture can also provide search engine optimisation (SEO), price-per-click (PPC) and content marketing services to ensure you see the maximum ROI from your website development project in line with changing SEO context (algorithm updates) etc.

THANK YOU. ANY QUESTIONS?

www.marketecture.co.uk

FOR MORE INFORMATION: www.marketecture.co.uk