[ 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