Formation - Website Development Process

[ WEBSITE DEVELOPMENT PROCESS ]

formationmedia.co.uk

P R I VAT E & CO N F I D E N T I A L

contents

formationmedia.co.uk

Contents

2

Typical website project schedule

4

What we need from you to get started

5

Client Brief

6

Initial detailed client brief

6

UX & Design

8-9

User Experience (UX) review, schematic & mapping

6

Brand analysis & development

7

Example website schematic

7

Design of initial visuals: homepage artwork and user interface (UI)

8

Example brand analysis & development

9

Example pattern library

9

Prototype: design of page templates, 'block elements' and pattern library Development

10 11 - 12

Code & web development of homepage including setup of front & back end Inner pages templates & 'block element' development Testing of base templates and revisions to website from testing Website population inc. news posts & general page content Sitewide testing & improvement (user, browser, responsiveness) and revisions to website from testing Approval, training and going live!

Creative Retainer

11 12 12

12

12 12 13

2

digital engineers we make things, happen

3

formationmedia.co.uk

Typical website project schedule TIMELINE

CONTENT/DELIVERABLE

INVOLVED

DEPARTMENT

1 week

Initial detailed client brief

Client / Formation

All

UX Review

Formation

UX & Design

Schematic & mapping

Formation

UX & Design

Brand analysis and development

Formation

UX & Design

Design of initial visuals: homepage artwork and

Formation

UX & Design

Review period 1

Client / Formation

Accounts

1 week

Client Amends

Formation

UX & Design, Accounts

1 week

Prototype: design of page templates, 'block

Formation

UX & Design

Review period 2

Client / Formation

Accounts

1 week

Client Amends

Formation

UX & Design, Accounts

1 week

Approval

Client / Formation

Accounts

Formation

Development

Formation

Accounts

Formation

Development

Testing of base templates

Formation

UX & Testing

Revisions to website from testing

Formation

Development

Website population inc. news posts & general

Formation

Development

Formation

UX & Testing,

UX & DESIGN 1 week

1 week

user interface (UI)

elements' and pattern library

BUILD & TESTING 2 weeks

Code & web development of homepage including setup of front and back end Homepage build sent to client for progress review

4-6 weeks

Inner pages templates & 'block element' development

1 week

2 weeks

page content 1 week

Sitewide testing & improvement (user, browser, responsiveness)

1 week

Development

Revisions to website from testing

Formation

Development

Sent to client for approval

Client / Formation

Accounts

Content Management System Training

Client / Formation

Development

CMS admins & switchover

Formation

Development

Client acceptance & Website Commissioned

Client / Formation

Development,

LIVE

“Live�

Accounts

4

digital engineers we make things, happen

A smooth process What we need from you to get started on the build...

Existing Content Management System (CMS) login details Username and password. An example of a CMS is WordPress, Magento and Drupal.

Existing domain registrar details A domain is the name of your website, for example, formationmedia.co.uk.

An example of a domain registrar is GoDaddy, LCN and names.co.uk.

If we are hosting your new website, these details will allow us to point the domain directly to our servers, so we can host your website.

Existing hosting details If we are working on or editing your website, we require your hosting login credentials. This allows us to create a copy of your website so we can work on it without changing the live site. Also, we will create a backup of your website to avoid losing any of your websites information.

5

formationmedia.co.uk

Client Brief, UX & Design Initial detailed client brief We want to know about you and your company from the inside out, to help achieve your company's goals. We work with you to Identify the main aims of website and create appropriate and attainable goals. The objectives become the backbone of the project, driving the research and decision making.

Your website is one of your primary communication streams with your customers. By aiming at specific user personas, defining their behaviour and goals ensures they receive an optimised user experience and see engaging, relevant content.

What kind of tone? Target audience? Sectors?

Brand?.

User Experience (UX) review, schematic & mapping A UX-driven approach: we focus on your

Please supply all content to for your website

customers and tap in to their goals. We do not

now! Our team create an intuitively structured

enforce personal preference - we focus on

architechture of information, to be easily

customer loyalty and conversion rates.

navigable on your website. By having all of the information now, we design around this and

Based on budget, objectives, and usability, we

create a better structure!

select website features that ensure the greatest return on investment.

Flow: Crafting the ideal flow the user takes by mapping out flowcharts, that makes it as easy as

Schematic - a clear structure of the pages on

possible for them to get to their end goal.

your website and their relationships (example on the next page). The current site schematic

Wireframe: All of the UX analysis, schematics

will be reviewed against the user profiles and

and flow charts are used to produce a drawn

website objectives to identify holes or need for

wireframed website. The wireframes act as a

improvement. From this a new schematic will

plan to the entire experience and layout, and are

be proposed that will enhance the journey and

then taken to the next stage: the design of the

better achieve the goals.

website interface.

6

digital engineers we make things, happen

Example website wireframe

Brand analysis & development We delve into the heart of your band and develop a beautiful interface, style and typeface that best utilises the core values of your company. we craft key messaging and imagery will have the biggest impact on the user.

A new or modernised logo and company image may support your newly defined direction of the business, complimenting the style of the website.

example website schematic

7

formationmedia.co.uk

UX & Design Design of initial visuals: homepage artwork and user interface (UI) Using the wireframes and UX research, a user focused design will be created, starting with initial design visuals of the homepage - allowing you to get a feel for the style of the website.

Your website may require new photography, video or animation that engages the user and adds to the aesthetic of your product.

A UX Progress log of research and findings that have driven the actions taken to create your product is compiled and implemented within the design.

Once approved and you are happy with the design, we will progress to the next stage and begin the design of the inner page designs of the website.

Annotated homepage design with UX actions

'MORE' Popout menu

Main navigation

To show two tiers of navigation, based on hierarchical importance.

Most important and visited pages quick, sitewide access for the user.

Blue underline marker highlights the page in which the user is on.

Main Slider 'Top Tabs' of information - the primary level of importance within the slider.

Showing key information and full screen imagery, utilising the excellent photography. There is also an oppurtunity to use video within the slider if there is any!

Sliding animation to each banner using the arrows, with the number marker also animating on the right.

'Scroll' action at the bottom of the image lets the user know there is more content below.

The information displayed on the home page is mirrored from the navigation and creates a structured relationship in the way the information is displayed so the user always feels like they know where they are.

All imagery and information displayed on the entire website is easily changed within the back end.

Latest news The latest article is displayed within the larger tile. Again, chunking the information allows the user to quickly scan and click to delve depper into anything of interest.

Large, featured images because of the high quality photography. Ability to also play video upon hover.

Newsletter signup & alerts in the relevant section of the homepage below the news.

Explore 'Middle Tabs' of information - the secondary level of importance.

Card design allowing the user to quickly scan across the information and explore the pages they would like more details about.

There will be an animation around the button / arrow upon hover.

Social Latest tweets displayed, showing the PCC's willingness to communicate on different platforms to the public. Prompting the user to follow the PCC on twitter and keep up to date.

Hover animation on the social cards.

digital engineers we make things, happen

Example brand analysis & development

[ WEBSITE SCHEMATIC, UX & DESIGN ] P R I VAT E & CO N F I D E N T I A L

brand toolkit Initial brand toolkit exploration An exploration into the West Midlands Police & Crime Commissioner brand.

A more detailed, full website UX toolkit to follow with all elements of the website, including pattern libraries of buttons, text / headings, cards, forms, page templates etc.

Primary brand colour

Logo

Dark Blue

Removal of line before the text of the logo - it does nothing but distract the eye and unbalance the logo.

Secondary brand colour Light blue

Call to action / button colour Yellow acts as a third colour, contrasting against the purple and blue as a clear action point. All call to actions to have an element of yellow, building a relationship with the user across the site as a signal for navigating.

Background colour 1 Additional nuetral colour added to the pallet of the website

Background colour 2 Additional nuetral colour added to the pallet of the website

Text link colour Derivided from the secondary brand colour, a clearer and more obvious blue used as a navigational link within text.

Example pattern library

formationmedia.co.uk

UX & Design Prototype: design of page templates, 'block elements' and pattern library An interactive prototype is made, whereby you can see and use the website and it's different page templates in context before build (in a limited capacity).

A full design pattern library will define all styles for the project, from the buttons to what happens when a user interacts with a dropdown menu.

An extremely efficient and future-proofed way of designing a website is by designing block elements that can be used to build pages within the Content Management System (CMS). We will design a multitude of different page block elements for you to use, depending on project budget.

The aim of this is so you can create beautifully

It is best to make amends to the design

designed new pages on the back end of the website,

at this point of the project, before

without the need for a designer and developer.

moving into the development build!

10

digital engineers we make things, happen

Development Code & web development of homepage including setup of front & back end We will begin the initial setup by creating a server environment and database, installing your chosen CMS and relevant plugins. Our in-house team use the latest technologies and software to ensure your website is built to the highest standards whilst preserving accessibility and engagement.

Performance is carefully monitored and peak loading speeds assured through compression and cache management.

Once the homepage has been developed and built, we will send you a testing website link for you to view the progress, and get a sneak peak into the full website with some of it's animations such as homepage sliders, carousels or menu popouts. This is a private link, is not indexed on google and cannot be viewed by anyone else.

Your site will be tested across all browsers and devices throughout the build project to confirm the experience is shared amongst all users, no matter the device. We’ll kickstart your site with some initial SEO work to ensure the site starts climbing the ranks and is ready to interact with marketing campaigns and continuous development projects.

Amends to the design at this point of the project are difficult for the development team to make and will incurr additional charges.

11

formationmedia.co.uk

Development, Testing & Going Live Inner pages templates & 'block element' development

Sitewide testing & improvement (user, browser, responsiveness) and revisions to website from testing

We will continue the build of the website once the home page is approved - including

Our in-house testers now test the website in full,

development of the different page templates,

from a users perspective, across a multiple of

which may include a contact page or news blog

browsers and devices (iPhone, iPad etc).

posts page. We will also code and develop the page builder 'block elements' at this stage,

The testers go from page to page, scrutinising

which you will use across your website for new,

all elements of the website - finding and

generic pages.

recording issues to go back into development.

This is a quality control stage, with our testers requiring a high standard of user experience and

Testing of base templates and revisions to website from testing

functionality.

Our in-house testers now try and find issues

Approval, training and going live!

with the website templates and page bulder block elements across different browsers. These

There may be some minor amends on the

problems are then rectified by the development

website from you, in which we will complete.

team before content population can begin!

From here, we will take you on an educational tour of the back end of your website, providing

Website population inc. news posts & general page content

CMS training on how to edit your website, which

We will add the content onto the website, in a

homepage, changing the structure of the menu

structured architecture as proposed by our UX

navigation etc.

may include: adding a page, adding a news post, editing the slider, editing the content on the

team. This is when your website really starts to

Upon acceptance from you, and we have

come to life, with the pages being created with

received the payment in full, we will then put

imagery and copy! Depending on what was

your new website live!

agreed at quote stage, we will populate all of the relevant pages - which may include your historical news archive page.

12

digital engineers we make things, happen

The digital marketing agency that is #PROVEN Upsell creative marketing retainer here...

Lorem ipsum dolor sit amet, consectetur

ullamcorper magna fermentum non. Nam

adipiscing elit. Morbi varius turpis eu ante

at molestie sem. Duis tincidunt massa sem,

lobortis pulvinar. Cras et sapien ullamcorper,

eu tincidunt ante euismod a. Ut rhoncus

pharetra mauris ac, mattis quam. Phasellus

sem et gravida aliquet. Quisque quis tortor

viverra sed dolor id malesuada. Nullam

pellentesque, volutpat nibh sed, pellentesque

tristique lorem mattis nibh aliquam commodo.

ex. Phasellus sodales risus et erat lobortis

Cras aliquet ex et odio ultricies, ac suscipit

tempus. Suspendisse sed velit a mi ultricies.

ex molestie. Sed faucibus nisi sapien, non

13

All content in this document is private and confidential and copyright of Š Formation Media Ltd. 2019

01926 298 777

info@formationmedia.co.uk

formationmedia.co.uk

Unit 2, St. George’s House, Cape Road, Warwick, CV34 5DJ

WINNER

100% UK based website development

vetted