Monochrome T&W Council Proposal

Monochrome
WEBSITE PARTNERSHIP PROPOSAL
JANUARY 2018

Introduction
We are pleased to respond to you Invitation to Quote with this website design proposal and thank you for
considering us as a future partner.
The purpose of this document is to demonstrate our understanding of the brief, introduce Monochrome and
the team, and detail our methodology to complete the project should we be chosen.
You are looking for a design partner to work closely with your development team to deliver two new websites.
To be successful you need a supplier who will immerse themselves in the Council’s objectives and fully
understands and delivers on the website requirements, contributing ideas and adding value every step of the
way. You will be looking for a partner that will deliver the best User Experience, a responsive design that
engages your audience and makes implementation as straightforward as possible for your development team.
We hope that we are able to demonstrate why we are the right partner for you.
We would be delighted to discuss this proposal in more detail should you have any questions, or would like to
meet the team before making a decision.
Rachel Wilde, Account Director
2

3
ABOUT US

Monochrome
Bold UX. Brilliant Technology. Better Digital Solutions.
We are a design and development partner, creating websites and applications that work harder for your business…
and we’ve been doing it for decades.
4

Background
Founded by Adrian Munn and Jason Brown in the early days of digital, Monochrome remains at the forefront of this rapidly evolving
industry. Our team was one of the first in the UK to build Rich Internet Applications using Adobe Flash and Adobe Flex. Today, that
pioneering spirit is lodged deep in the Monochrome DNA. We continually push the barriers of technology and UI, consulting directly with
Adobe in the UK and Microsoft in the US and UK.
Over the past 18 years we’ve served clients large and small, delivering a wide variety of projects. They range from simple websites to large
scale application deployments. We have clients that have trusted us with their websites and business-critical applications for over a decade
- the quality of our work creates partnerships that last.
It also creates success and, with it, growth. We have recently opened offices in Serbia and Hungary to support the core UK development
team, and give us a wider opportunity to serve clients in mainland Europe.
Over two decades the technology has changed, but our passion remains. Today we continue to drive innovative projects that produce
revolutionary products. We believe that coupling a brilliant UX and creative team with highly skilled developers creates perfect balance: we
know what your users like and we know how to make it work.
Most importantly, we offer honest communication. We’ll explain in the most transparent way what we can bring to our partnership, and what
that can do for your business.
And it really is a partnership. We call ourselves a studio, not an agency, because we work as an extension of your team. We won’t bombard
you with acronyms or buzzwords, or hide behind obscure technology. Instead, we’ll give it to you in black and white.
That’s because we’re Monochrome…
5

Our Services
We have three core and complementary offerings – stunning Websites, sophisticated Apps, and ServiceNow solutions, all tailored to your
specific needs.
WEBSITES APPS SERVICENOW
What We Offer
• The unique combination of our meticulous creatives and pioneering techies creates the perfect balance, we know what users like
and we know how to make it work.
• We’re not old, we’re experienced! We’ve been doing this for nearly two decades, so we bring a huge pool of accumulated
knowledge to everything we do.
• The quality of our work creates partnerships that last. We have worked with some clients for over for over ten years, becoming a
trusted extension of their own team.
• Ultimately, we’re proud, passionate geeks, fascinated by cutting edge technology, meaning we excel in innovative projects that
produce revolutionary products.
• We won’t talk to you in jargon. We won’t blind you with technology. We pride ourselves on open, honest, transparent
communication.
6

7
THE BRIEF

Topline Requirements
As explained in the brief you are looking to redesign two websites: Enterprise Telford (www.enterprise-telford.co.uk) and Estates and
Investment (www.estatesandinvestments.co.uk)
These sites will be developed internally within a CMS but you are looking for a design partner to provide the user interface.
The details regarding the requirements for the sites, as provided in the brief, can be summarised as follows:
Enterprise Telford
• A site to market Telford to potential investors focussing on the Boroughs accessibility, competitive land and property offer, quality of life,
funding, skilled workforce offering and low labour costs
• Must promote the Council’s tailor made business support services, competing with the Government’s Enterprise Zone initiative
• Links to the Marches Growth Hub website for information for businesses on the wider area should be included
• The site needs to feature Live Chat and events calendar and booking system
• The design of the site should follow the Enterprise Telford brand toolkit and guidelines
Estates and Investment
• A site to promote the Council as a leading commercial agent for the sale and lease of land and property to potential investors
• It should also promote the support services available to tenants and investors
• The design needs to follow a refreshed brand aligned more closely with Enterprise Telford
8

Both sites must…
• Include link to the Council’s other key business facing websites
• Have a contemporary design that competes effectively with competitor websites
• Provide clear user journeys within each site and between sites
• Allow easy implementation for the development team within the CMS
• Follow a design that allows most content to be updated and managed within the CMS
• Be fully responsive across all devices
• Include interactive ways to present offering including eBrochures, videos, high quality imagery and interactive content
• Feature Social Media links/widgets (namely Linked and Twitter)
• Capture leads via enquiry forms that link to the Evolutive CRM
• Enable a sitewide search and property search
• Feature a Blog including news and case studies
Timings
Initial concepts must be completed by Wednesday 28th February and full site designs need to be delivered by Friday 16th March 2018.
Budget
The total design budget is £20,000 + VAT.
9

Digging Deeper
Although the brief has provided a topline understanding of requirements we would need to spend some time working together to dig
deeper into the detail getting more information in terms of backgrounds of the two sites, their purpose, audience, considerations, design
vision etc.
The next few pages outline some of the items we would discuss collaboratively in a kick-off session to produce a more detailed brief. This
level of interrogation is the only way we can confidently produce a design that will deliver success.
Audience
The first thing we need to do is get a thorough understanding of the target audience so that we can create audience profiles/personas.
These are useful so that the design team know exactly who they are targeting. We would consider demographics, typical job titles,
technical know how etc so that the two sites can be tailored accordingly. We will continuously revisit these user profiles throughout the
project to ensure a user-centric design.
Goals
Another factor to be taken into consideration is why users come to the site. What are they looking for and what do they want to achieve?
Plus what do we ultimately want them to do e.g. complete a contact form? Once this has been established we can structure and design the
site to allow users to complete both sets of goals.
10

Competitor Sites
The brief mentions being able to compete effectively with competitor
destinations so it would be useful to do a competitor review to see
what you like and don’t like about their sites, where we can take
inspiration etc.
For example we may look at http://www.investwolverhampton.com/
and http://www.investinshropshire.co.uk/ both of which have
elements we may want to replicate.
Design and Branding
We could also consider websites from other sectors that you
like the look and feel of so that we have a clear
understanding of your design expectations.
We will also need to review the brand guidelines so that we
are aware where there is and isn’t flexibility,
11

Information Architecture
The IA is a sitemap of all pages on each website. We will need to establish the IA for both of the sites and a good starting point is their
existing sitemap. As an example the structure of Enterprise Telford is show below. We can look at what works and doesn't work when it
comes to the structure of the sites, what is missing, how pages could be regrouped or renamed etc to improve user journeys.
HOME
Why Telford Land & Property Business Events Newsroom Enquire
An ideal place
Choosing Telford
Starting a business
Your future workforce
Land
Running a business
Sector strengths
Property
Skills support
Business connections
Enquiry Form
Finance and funding
Business networks
The Growth Hub
A place to live
12

Analytics
A good way to inform the above is to review site analytics to see which pages are more popular, content that is not being found etc. Again
this will help inform how we structure the new sites most effectively.
Within the brief you mention that the sites must work across all devices and all sites we produce are responsive. However whether we
approach the design desktop or mobile first depends on how most of the audience view the site. Analytics should be able to tell us the %
of visitors on desktop, tablet and mobile so we know which is priority (we presume this to be desktop).
Search Engine Optimisation
A discussion around SEO is required so that we have a thorough understanding of the search considerations to be taken into account. This
includes key search terms, landing pages etc. This will further inform the site structure and taxonomy decisions and ensure we optimise the
site through the redesign. We would also need any information you have on other key referral sites so we know where traffic is coming
from and can understand the typical user journey before they arrive.
Measures Of Success
Without establishing KPIs at the start of the project we won’t know if it has been a success. These typically include Traffic, Bounce Rate,
Leads etc.
13

Deliverables
To produce a detailed scope of work we will need to define the project deliverables. To determine these we can discuss:
• The number of page templates required to be designed. We imagine this will be around 16 pages in total:
- Enterprise Telford 10 templates (1 x Homepage, 6 x Landing Pages, 1 x Content Page, 1 x Event Page, 1 x News/Blog Article)
- Estates and Investment 6 templates (1 x Homepage, 3 x Landing Pages, 1 x Content Page, 1 x News/Blog Article)
• If tablet/mobile designs are required for every template. Typically we would produce 2 x tablet and 2 x mobile layouts for each site
to demonstrate how the templates collapse and this structure then can be followed for the whole site.
• How the templates should be delivered. At this stage we are assuming layered PSDs to be delivered to your development team
showing the various states such as rollover/hover states.
• The number of rounds of feedback and amends required to get approval (2 rounds of amends included as standard).
• If there will be an opportunity to conduct user testing to validate the UX and design at any stage.
• Whether images and copy are provided. We have presumed that you will provide both of these at this stage.
• Any limitations/restrictions of the CMS that may impact the time needed to produce the designs or amount of change requests.
• How much support/handover is required to the development team and whether any documentation is needed. Based on
experience we would recommend that in addition to the page templates we provide a design style sheet containing all content
formats e.g. buttons, icons, tables, forms, links, error message states etc. We would then have a face to face session with the team
to go through the designs and the style sheet. If we follow this process minimum support will be required during build.
Once we have collaborated on the above we will be in a well informed position to start work following the process described in the next
section.
14

15
OUR APPROACH

Methodology
Our project process has evolved over years of experience and combines the best of common methodologies such as Prince2 and Agile.
We will go through this in detail at our kick-off session and you will be assigned a key contact who will guide you every step of the way.
The key phases are outlined below and covered in more detail on the following pages:
1) Kick-Off
2) Research
3) Concepts
Collaborative session to
produce a detailed brief and
brainstorm initial ideas, scope
of work document including
cost estimate and approval
Thorough analysis of current
sites and any data, competitor
research, audience profiling/
persona development and
project planning
Sketches, design mock-ups
and/or interactive proof of
concept, client review,
feedback and approval for
early buy-in
6) Technical Handover
5) Design
4) IA & UX
Supply of PSDs as well as
design style sheet containing
all content formats, handover
session with dev team and
ongoing liaison if required
Graphics applied to produce
full designs applying
development best practice for
ease of implementation , client
review, feedback and approval
Sitemap and wireframes to
define the site and page
structure, layout key screens
responsively, client review,
feedback and approval
16

1) Kick-Off
Arguably the most important stage in the process this starts with a collaborative session involving all stakeholders on the project. It is an
opportunity for you to meet the team and for us to really interrogate the brief to ensure we have all the information we need to design the
best possible solution for both you as a Council and your users. During this session we will discuss the items that were mentioned in the
previous section, plus anything else that comes up along the way. The intention is for it to be an informal, open discussion so that thoughts
and ideas flow freely.
The output of this session will be a detailed Brief and Scope of Work document (including firm deliverables, costs and timings) for your
review and approval.
2) Research
Before putting pen to paper we will spend some time researching more thoroughly the insights that came from the Kick-Off session. This is
valuable time for the team to really get their heads into the challenge ahead rather than diving straight in. It’s the stage during which we
evolve from being your agency partner, to an extension of your team as our level of understanding rises inline with yours.
The output of this stage varies but is likely to include audience personas, competitor audit, moodboards, summary of data insights etc.
17

3) Concepts
This is when the creativity really starts as we produce design concepts in the form of sketches. The purpose of these sketches is to quickly
demonstrate our initial thinking, ideas of how we may present content, the application of branding etc for early buy-in from stakeholders.
We will produce one concept per site showing how they have their own identities whilst sharing common features to keep them
connected.
Proof of concept output example:
4) IA & UX
Following approval of the initial concepts we would enter the IA & UX phase. The output of the IA will be a detailed sitemap containing all
of the site pages highlighting those that are considered key templates to be wireframed and designed. This will be produced considering
how best to group content, the most important items that need to feature in the top navigation, how we can encourage discovery within
the site etc.
18

Once we have agreed the site structure and key page templates these will be wireframed. Wireframes are a way to define the content and
structure of each page, any functionality, hierarchy of information, calls to action etc. They are pixel perfect black and white templates to
focus us on the objective of each page without being distracted by the design (which will be applied at the next stage). Wireframing is the
only way to ensure the User Experience is considered thoroughly and put first.
Examples of things we we would focus on during the UX stage include:
• Homepage: What content to include on the homepage, how to clearly communicate the messaging in a succinct way, how to keep the
homepage fresh for repeat visitors, what interactive content can immediately engage users, how to clearly signpost the sections within
the site whilst pushing people to get in touch
• Events: How to promote future events, perhaps including images, videos and/or reviews of past events, the best calendar format to use
that allows users to find the right event for them quickly, what users should do if they are interested in an event whether that be to get
in touch for more information or reserve a place via a form
• News: How to present news in an informative engaging way, allowing users to search and filter to find what they are looking for
Wireframes will be produced for all agreed desktop templates, plus a couple of key tablet and mobile templates to demonstrate how the
page structure responds. It is essential that the technical team review and approve all wireframes before we proceed so that any potential
issues can be rectified straight away.
It is also a good stage at which to conduct initial user testing to validate our thinking. We can use a product called InVision
(www.invisionapp.com) to model the UX to test user journeys, setting tasks for completion to see if content is easy to find and sections
have been named logically etc. Some example interactive wireframes that we have produced in this way can be accessed here: https://
invis.io/ZNBFQ60DE
The output of this stage will be a sitemap for each site and the agreed number of wireframes as PSD’s. See examples on the next page.
19

20

5) Design
Once wireframes have been approved they are evolved into engaging designs by
our creative team.
Our focus here will be creating a distinctive, modern look and feel, inline with the
brand guidelines, that you can be proud of. We will consider how best to appeal to
the audience profiles we have created, what will encourage them to interact with the
site and where clever design elements can be applied to make the site extra special.
The design team here are used to working closely with developers and
CMS systems so their technically aware minds will ensure that they don’t
produce anything that will cause problems for your development team.
We will first produce a homepage design for each site for your amends
and approval before moving onto the other pages. Typically we allow two
rounds of amends, one for larger changes to the look and feel and one for
minor tweaks.
On the right you can see an example of how a wireframe is turned into a
design.
The output of this stage will be PSDs for each of the designed pages.
21

6) Technical Handover
As mentioned previously we can agree the requirements for this stage in the in the
scope of work document. However we would recommend that as well as supplying
PSDs we provide a design style sheet that acts as a toolkit for your developers to
use whilst they build the sites. This will include all fonts, colours, buttons, states,
error messages etc that will appear throughout the site.
We also recommend a two - three hour handover session to go through the IA
sitemap, pages, design templates and stylesheet in detail to ensure any questions
are covered in person before development begins.
Of course we will remain on hand throughout development if needed but this will
enable your team to develop as efficiently as possible.
For QA purposes we would also ask that we are invited to test a staging site so that
we can ensure our designs have been implemented as intended before going live.
Following go-live we would typically continue to work with our clients to monitor
and optimise the site and ideally a small budget would be kept aside for such
maintenance support tasks.
22

23
WORKING WITH US

Project Team
You would be assigned a team at the start of the project who would work collaboratively with you throughout the project.
Some of the key team are profiled below.
Adrian Munn - Founder
Adrian founded Monochrome in 1999. He remains
very much involved in client projects, establishing
strong relationships with our customers and
offering a wealth of digital experience, knowledge
and ideas. Adrian focuses on the overall digital
strategy, considering the bigger picture and how
each project helps take clients a step closer to
their end goal.
Dave Marsh - Creative Director
Dave graduated in 2000 with a 1st class honours
degree in digital media and has been designing
websites and software applications ever since. A
Monochrome team member for 4 years, he heads
up the creative team and oversees all projects for
the likes of RBS and Hovis. Dave enjoys getting to
know clients and their users to dream up the
perfect solution.
Rachel Wilde - Account Director
Rachel has over twelve years digital agency
experience in project management and
leadership positions. Having worked at small
independent agencies through to the likes of
Ogilvy she knows agency processes inside out
and what makes a successful project. Previous
clients include Microsoft, BBC and British Airways
delivering UX, design and development projects.
Matt Dayton - UX Designer
Matt has been working at Monochrome for 5
years and is a key part of the UX team. Under
Dave’s direction Matt’s expertise lies in creating
clean, functional, B2B websites. His main
responsibility is to produce wireframes, ensuring
a considered UX and paying great attention to the
small details that make or break websites. Happy
clients include HSBC and Direct Line.
24

Timescales
You have proposed that the project commences the week of 22nd Jan and is completed by Friday 16th March. We have resource available
and raring to get started and would propose working to the following timeline:
• w/c 22nd Jan: Kick-off meeting with all stakeholders, scope of work, final costs and timings approval
• w/c 29th Jan: Initial research and conceptualisation
• w/c 5th Feb: UX and Wireframing for both sites
• w/c 12th Feb: Amends to wireframes and design of homepage concepts
• w/c 19th Feb: Present homepage designs, client review, amends and approval
• *Deliverable Mon 26th Feb: approved homepage designs (key templates)*
• w/c 26th Feb: Remaining page designs for both sites
• w/c 5th March: Present page designs, client review and feedback
• w/c 12th March: Design amends and approval and production of development stylesheet
• *Deliverable Fri 16th March: Full approved designs (all templates)*
• w/c 19th March: Technical handover session (if required)
25

Cost Estimate
Based on our understanding of the requirements and the assumptions outlined within this document we are able to provide the estimate
on the following page. These costs will be finalised during the early stages of the project once the deliverables have been confirmed.
Please note:
• Rates are quoted ex VAT
• The provision of a Project Manager is costed @ 10% of project total
• Costs include two rounds of amends at UX and design stage
• Costs do not include image rights purchases
• Costs do not include copywriting
26

Description
Hours Rate Cost
3 hour Kick off session, including preparation
1x Account Director (5 hours) 1 x Creative Director (5 hours)
Researching, planning, competitor analysis, user profiling etc
1x Account Director (4 hours) 1 x Creative Director (4 hours)
Initial drawn concepts for both sites
1 x Creative Director (8 hours)
IA (Sitemap) for both sites
1 x UX Designer (4 hours)
UX (Wireframes) for both sites (assumes 16 desktop pages, 4 tablet and 4 mobile)
1 x UX Designer (40 hours)
2 x Rounds of amends allowance (12 hours)
Deliverable: 16 x desktop wireframe page templates, 4 x tablet and 4 x mobile wireframe templates as PSD files
Homepage designs for both sites
1 x UX Designer (16 hours)
2 x Rounds of amends allowance (6 hours)
Deliverable: 2 x fully designed homepage as PSD files
Full designs of remaining 14 pages
1 x UX Designer (56 hours)
2 x Rounds of amends allowance (16 hours)
Deliverable: 14 x fully designed page templates, 4 x tablet and 4 x mobile as PSD files
Development Handover
1 x UX Designer (8 hours), 1 x Creative Director (4 hours)
Deliverable: Design stylesheet and handover meeting
10.0 100.0 £1,000.00
8.0 100.0 £800.00
8.0 100.0 £800.00
4.0 90.0 £360.00
52.0 90.0 £4,680.00
22.0 90.0 £1,980.00
72.0 90.0 £6,480.00
12.0 90.0 £1,080.00
Project management (timeline management, client liaison, briefings, feedback etc) charged at approximately 10% 20.0 90.0 £1,800.00
Total (ex VAT) £18,980.00
27

What Our Clients Say
“Premier Foods have worked with Monochrome over a number of years on the design and development of multiple brand websites and,
recently, our Corporate site. The Monochrome team is professional, flexible and fun to work with, and we have seen good results. We also
rely on them for on-going support and technical knowledge and advice for our web delivery infrastructure, which is now more flexible and
cost-efficient. I have no hesitation in recommending their services.”
Nigel Meek, Digital & DevOps, Premier Foods
“We were very impressed with the proactive can do attitude and innovative ideas for the project. Based on what we had this was a vast
improvement and we are very happy with the results. We would certainly recommend Monochrome.”
Ewan Bennie, Head of Partnerships and Campaigns, Department for Business, Energy & Industrial Strategy
“When briefing the team the timelines were tight from the outset, but I have been very happy with their work. The look and feel of the site
is great and very much on-brand and I have also been very pleased with their commitment to delivering this project on time.”
Nancy Sadler, Mr Kipling Senior Brand Manager
*Contact details to obtain personal references are available on request (many companies are not permitted to provide them for marketing purposes)
28

29
CASE STUDIES

Northrop Grumman Sperry Marine provides safe, efficient and reliable Navigation
Solutions for the commercial and defence maritime industry. We have worked
closely with them on a number of projects and most recently they asked for our
help improving their website.
We are in the process of transforming their dated site (shown below) into a
beautiful, engaging, fully responsive site (shown on the right).
30

We have introduced a few features throughout the site that
demonstrate the sort of enhancements that could be added to
either of your sites. One example is the large prominent search
bar on the homepage so that users that know what they want can
find it quickly. This may be something you might like to consider
on either or both of the websites.
Below shows a section of the site that enables the user to have an
interactive 360 degree tour of a ships bridge. If there are similar
assets available for Telford and Wrekin it would be great to have
this feature on the sites so that users can have an interactive tour
of the area.
Whilst the site is not yet live it is a good example of a B2B site that we
have designed with a powerful look and feel, that is both highly
functional and engaging.
31

A long-term partner, Premier Foods, were looking to
revamp their identity through a refresh and redesign
of their corporate website. The aim of this site is to
promote the Premier Foods company in a positive
light, reassure existing investors, encourage new
investors, share news, events etc. Although
operating in a different sector it had similar
requirements to your Enterprise and Investments
sites.
Part of the brief was to design a site that was
responsive and versatile for content editors. The
editorial requirements stated that pages should be
created from a suite of widgets that were to be
designed and implemented for the CMS,
demonstrating our ability and experience designing
within the restrictions of a CMS if required.
32

Monochrome’s solution was to develop the new
website, to high UI standards and web best
practices, for the Kentico CMS. The CMS
implementation was designed around Kentico’s
portal engine to create editable page templates
with “drag and drop” zones for custom widgets.
The site comprised of 16 page templates and 12
custom widgets and was launched in 2 phases to
ensure the new website was developed, tested
and available for a sensitive launch date.
The customer received a highly configurable
website and advanced CMS implementation,
allowing site editors to build the pages as
envisioned using the full set of widgets designed
for the website.
We continue to enjoy a successful working
partnership with Premier Foods, delivering digital
design, consultancy and web development
services.
33

BT engaged us as their design partner for a new publicly available customer portal.
Monochrome worked with BT to model the UX and portal functionality through interactive
wireframes and then worked closely with the BT brand team to provide creative work for the
portal that met guidelines and provided consistency with other public portals in BT’s portfolio.
We were able to deliver:
• A rich UX, intuitive and engaging customer experience through well researched and
established practices in web GUI (Graphical User Interface) design
• A brand conscious and great looking user interface
• A well tested and optimised user interface across a range of devices and browsers
• A robust, scalable and highly maintainable development and final solution
• A highly tested, secure and performance optimised solution
• A highly communicative and enjoyable working relationship
34

35

THANK YOU
www.monochrome.co.uk
36
info@monochrome.co.uk
+44 (0)20 3137 8829