Skip to content

Responsive Website Redesign for McKinlay Kidd

I helped specialist tour operator McKinlay Kidd to overhaul their digital presence and with a responsive website redesign.

McKinlay Kidd Responsive Website Hero

Overview

McKinlay Kidd are an award-winning, specialist tour operator, offering tailor-made holidays in both Scotland and Ireland.

As part of their recent rebranding and product diversification efforts, they needed help transforming their existing websites.

I worked closely with the client to create a new, centralised user experience.

Responsive Website Video Walk-through

Below is a video walkthrough of the McKinlay Kidd responsive website to demonstrate key pieces of functionality when viewed on a desktop/laptop computer.

Objectives

The objectives of the project were to:

  • Improve the overall user experience
  • Better present The Client’s value proposition across the website
  • Migrate existing functionality into a single, unified website
  • Improve findability of content by improving site navigation, search and filtering
  • Introduce personalisation to the website
  • Develop an updated website ‘look and feel’ based on the new Client branding
  • Maintain (and improve) a flexible CMS with a suite of content/functional modules

Responsibilities

I was responsible for the entire project from start-to-finish. I worked closely with the client to refine their brief and then develop a detailed scope of work.

My duties included:

  • Technical scope
  • Project management
  • Managing the relationship with the client
  • UX design
  • UI design
  • Front end development
  • Back end development

Brand strategy and identity were developed by Scottish agency Made Brave, who provided me with the necessary assets and guidelines.

Process

We adopted a lean, iterative process that involved creating, maintaining and feeding back about tasks in Trello.

Project Plan

The project plan, although following a waterfall approach was (relatively) agile and allowed me to undertake tasks in the most efficient way, reducing bottlenecks and any potential downtime.

McKinlay Kidd Project Plan

Daily communication was handled via email and Skype. A weekly status call facilitated any need to sign off on any major milestones.

Content First

Before I could design anything, I needed to understand what content and functionality already existed and how it could be brought together from different sources and housed ‘under one roof’.

McKinlay Kidd Content Audit

I audited the current client websites and logged all pages (along with specific meta info) into a spreadsheet.

Interface Audit

I also carried out an interface audit to analyse the existing UI from a UX and visual design point of view.

McKinlay Kidd Existing Interface Audit

I then developed a new content architecture (in Google Sheets) that would accommodate existing content as well as new requirements.

Sitemap

I then created a sitemap (in Sketch) that acted as a visual aid for the client to understand the site hierarchy, and the relationships between content grouping and journeys through the site.

McKinlay Kidd Proposed Sitemap

CMS Development

As the client had to migrate three site’s worth of content, I chose to develop the CMS prior to any further UX work. This gave the client ahead start on the content migration/creation process.

I was able to do this as I had clearly defined all functionality in the SOW and had an accurate content model from the UX content analysis.

McKinlay Kidd WordPress CMS

The CMS was a heavily customised version of WordPress. In addition, the Advanced Custom Fields Pro plugin enabled me to develop a modular backend, based around reusable content modules rather than pages. Check out Brad Frost’s article on Atomic Design.

HTML Prototype

I then developed a low-fi, HTML prototype to demonstrate functionality and user flow.

In the beginning this took the form of un-styled HTML templates with PHP hooks into the CMS (pulling out real content that the client had created).

As I progressed I integrated the Foundation 6 framework to provide a basic responsive grid.

Wireframes

Once all backend functional modules and HTML templates were complete, I was able to concentrate on how content would be structured within each template.

Although I rarely create wireframes these days, I decided the client would benefit from seeing something a little more tangible than just abstract HTML.

McKinlay Kidd Homepage Wireframe

I developed a set of wireframes for key parts of the UI and for each content template.

McKinlay Kidd Website Header Variations

Using Sketch (and Sketch Mirror) enabled me to easily design and preview my work on multiple devices.

McKinlay Kidd On-device Wireframe Testing

I then rapidly iterated the designs until I reached a point where both the client and I were happy with the final solution.

McKinlay Kidd Mobile Wireframe

User Interface

Once all the brand assets had been completed by Made Brave, I was able to use my wireframe document as a starting point for visual design of the UI.

This saved a lot of time. Instead of having to redraw the assets I reused shared styles and symbols and I was able to rapidly apply the brand to the wireframes.

McKinlay Kidd Homepage Template UI Design

Naturally some functionality and content priorities changed, but by developing key modules as symbols I could make changes quickly that would be replicated across multiple templates.

McKinlay Kidd Responsive Website Holiday Template UI Design

The resultant UI sheet and select templates provided the starting point for front end development.

McKinlay Kidd UI Sheet Design

Front End Development

I developed the front end using a custom installation of Foundation 6, select JavaScript plugins and hand-coded app.scss and app.js components.

My development environment included Sublime Text, Codekit, Tower, MAMP, iTerm and GitLab. I developed on localhost and then mapped a GIT development branch to my staging server and master branch to the live server.

McKinlay Kidd Chrome Developer Tools

The client had access to the staging environment and I would push changes for preview and approval.

Once signed off, the development branch was merged into master and the site was pushed live.

This setup allows me to make ongoing updates to the live site. When a change request comes in, I simply make the amends, push them to development and once the client is happy I simply merge and push to live.

Post Launch

The site was launched at the end of March 2016 and so far has received positive feedback from both the client and customers.

Additional Video Walk-throughs

Below are some additional video walkthroughs to demonstrate various aspects of the McKinlay Kidd website.


Share This Project

If you enjoyed this project, then let others know about it by sharing it.