ANATOMY OF A WEBSITE PROJECT Jasper Ditton, Head of Digital

Transcription

1 ANATOMY OF A WEBSITE PROJECT Jasper Ditton, Head of Digital

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

3 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

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

5 #1 - REQUIREMENTS / SCOPING

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

7 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 3 rd 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? 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 3 rd party systems (CRM, automation platforms, feeds, ticketing systems etc.) Requirements document Research plan Analysis of existing website Analysis of website performance (analytics) IA Sitemap IA Calls-to-action / promo hierarchy Technical specification Content hierarchy Wireframes (key pages)

8 #2 - DESIGN

9 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 Phase1: Style-setting Phase 2: Key page design Description Establish online brand parameters based on brand guidelines Design homepage Design 1x sub-page 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

10 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

11 #3 - IMPLEMENTATION

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

13 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

14 #4 - VERIFICATION

15 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)

16 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

17 #5 SITE MAINTENANCE & EVOLUTION

18 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-todate 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

19 SUMMARY

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

21 THANK YOU. ANY QUESTIONS? FOR MORE INFORMATION: