Designing & Developing a National Micro-site Campaign - Vostron


Designing & Developing a National Micro-site Campaign

Vostron is a specialist ISP (Internet Service Provider) in the south of England.

They help their clients to operate more efficiently by providing exceptional support for both people and technology – keeping their client’s channels of communication open over highly managed services.

As part of the UK’s government initiative to improve UK businesses broadband speeds, Vostron has partnered with City Fibre to bring gigabit connectivity to businesses across the UK.

Designing & Developing a National Micro-site Campaign
View The Vostron Website

Defining The Project

Vostron has been a partner of mine since 2017.

After successfully collaborating on marketing campaigns over the years, it was an easy decision to again partner on the national campaign.

The campaign targeted three major cities, including –

  • Coventry
  • Edinburgh
  • Portsmouth

Each city would require its own webpage with content focused on the city to increase the personalisation of the marketing material promoted.

As well as promoting the benefits of the CityFibre scheme, Vostron wanted to give power to its customers.

Placed throughout the pages are strong calls to action. Including postcode search components allowing prospective customers to verify they were eligible for the scheme without the need to contact Vostron staff directly.

The design of the pages needed to be on-brand with the Vostron colours used throughout, with appropriate imagery and vector illustrations to complement the text copy.

A strong focus would need to be on the responsiveness of the site to ensure no customers were excluded and to ensure usability is consistently solid across any device used to access the sites.

The Solution

The final solution is a flexible WordPress theme that allows for the construction of landing pages focused on the City Fibre scheme and its relation to Vostron’s products and services.

The webpages use current and up-to-date design trends, with a strong focus on flexible content that administrators of the project may update without coding knowledge.

Parent landing pages show bespoke content to users based on their location (e.g. City Fibre is coming to Fareham) with bespoke map illustrations that were converted to interactive code components, outlining the postcodes supported by the campaign.

Bespoke 3D illustrations, combined with video and imagery representing key areas for potential business helped bring a focus to each city.

Development of user interaction elements (hover over to interact with graphic) brought the pages to life and gave opportunities to engage users.

All pages were built mobile first, with both mobile and desktop designs supplied before the development of the landing pages.

A strong call to action was included at the end of all pages, as well as several subtle calls to action placed throughout the page to encourage customers to explore Vostron’s services and products.

User Interface Designs

As with any of my projects, it is first important to define the problem we are solving and who we are solving the problem for.

Understanding the end user helps create informed designs that focus on helping them complete their tasks, and creates a positive user experience with the brand.

To help create a user profile on who will be using the website, primary and secondary research was carried out, exploring the consistencies that were found amongst Vostron’s current customer base using Google Analytics.

Front-end Development

After the page designs were confirmed by Vostron, I set about turning the high-fidelity mockups into live webpages.

I was able to carry through a pixel-perfect match in developing superb front-end interfaces that highlighted the attention to detail, working across all user’s devices and modern web browsers.

All pages were developed in a pattern library which helped document components for other developers to reference and use later in the project lifecycle.

The front-end development tech stack includes CSS/SCSS, HTML and JavaScript, taking advantage of all possible front-end capabilities, including –

  • Query Caching
  • Lazy-loading Content
  • Code Minification
  • Code Splitting based on Page Template

Combining these advantages results in a extremly optimized website that will rank highly on Google and other search engines. Not to mention a positive experience by delivering a quick, responsive and easy to use website for all users.

All pages were coded using the latest semantics in HTML5 elements, with CSS minified and auto prefixed for all major web browsers, and any JavaScript processed using Babel to make use of the cleanest syntax available.

Back-end Development

No website application is complete without a strong back-end system.

The existing primary website for Vostron is built on WordPress, for that reason, I knew it’d be familiar for site administrators to continue the choice and implementing WordPress in the new pages.

With over five years of experience in WordPress development, I was able to embed the new campaign pages into the existing Vostron website.

This allowed us to bring modern page designs to a legacy system, without creating new subdomains or migrating content.

With tight security and data encryption, the website stores and handles site content within a tightly locked database.

All pages are backed up periodically off-site to provide a rollback solution should the site encounter any issues.

As Vostron is a long-standing client, I have set up automatic monitoring of the sites health status and will respond within hours should any issues arise.

WordPress CMS

It’s important for any team running a business to have complete control over their products and services.

What their content says is a reflection of their message, values and influences the perception of them to their customers.

Using WordPress to manage content for their website, Vostron is able to update just about any part of their website’s text, imagery, colours as well as build and edit new pages without the need to contact a developer.

The control is given by using WordPress as a content management system (CMS), meaning that Vostron is in charge of handling any content for the website.

The WordPress system itself is again bespoke and the editing experience is tailored specifically to Vostron.

Using the new Gutenberg editor, managers of the site can add custom ‘blocks’ that I have created which allow for consistent designs with flexibility over the content rendered in the final application.

Site Optimisation and Support

When a website or micro-site campaign is launched, that is only the beginning of any businesses new journey, and more often than not that means they’ll need ongoing support and optimizations to their product in the future.

Before launching, we reviewed how well the website performed with web analyses tools such as network request waterfall models, SEO auditing, and focused user group testing to get first-hand feedback from users’ on their understanding of the product.

The new webpages include bug monitoring software to manage any exceptions the system comes across, flagging cross-browser bugs and back-end service errors.

This level of insight allows for any development updates to target these issues and improve the experience for any future users.

The micro-sites have now launched with positive feedback, and we are now discussing future phases of the campaign.

It was a pleasure to work with the Vostron team again and I look forward to any future projects that we have to collaborate and innovate on together.

Dan Smith

Marketing Manager

"Simply put, Jack has been an incredible find for Vostron. He has exceeded our expectations at every turn – whether that be in the quality of work produced, the eagerness and desire to help, or the ability to contact the team at any time of the day. I cannot praise, Jack enough for how professional or how talented he is. I would recommend Jack to everyone without a shadow of a doubt."

Continue Viewing My Case Studies 📚

Tell Me About Your Project

Get in Touch