Drawing ...

Mercury Holidays

From analogue to digital - a complete transformational journey.

About

Mercury holidays a company that specialises in package and tour holidays, satisfying customers since 1979. Their success was attributed to traditional print marketing and catalogues distribution.

The Challenge

Mercury had grown accustomed to year on year growth utilising analogue offline marketing methods, the business had little in the way of technical expertise, the majority of their processes were inefficient requiring optimisation.

The business accepted the IT department within the company as an expense as opposed to a primary sales channel, resulting in low confidence from the business and a lack of digital/technical strategy.

This was due to a number of reasons:

  1. Poor technical architecture resulting in the delivery of a monolithic web application
  2. Lack of processes - mostly directive and reactive
  3. Lack of technical representation at the board level
  4. No utilisation of data or customer experience tools (such as CRMs / BI tools etc)
  5. Lack of Technical, Design, User Experience, Product & Data resources within the business

High-level goals

  1. Raise funds to execute the following:
  2. Establish a highly collaborative cross-functional product team consisting of backend, frontend, product, design and user experience skills.
  3. Implement an agile, lean and customer-focused methodology to complement the product team
  4. Define a product roadmap for the business
  5. Implement a design system
  6. Gather customer insight and establish research processes within the business
  7. To optimise costly business processes
  8. Mentor designers within the business

My role

I was hired as the Head of Product & User Experience with a delivery and strategy focus. At the start of this project, my team consisted of three developers with a PHP background.

Main Tasks

  1. Organising the existing technical team
  2. Product, technical and design strategy
  3. Raising investment from the board
  4. Advising the board and leadership about digital and technology
  5. Hiring researchers, designers, backend developers and front-end developers and product owners
  6. Processes
    1. Agile for development
    2. Lean for product
    3. Design sprints for design
    4. General optimisation in the wider business
  7. Establishing a cumulative research function at the organisation
  8. Product, sprint and MVP planning
  9. Establishing a design system and digital style guide

Organising the existing Technical Team

Having identified a cultural problem within the company my first objective was to establish a better way of working for the existing technical team, firstly moving them from a linear waterfall software delivery function to a more focused kanban function - boasting accountability and focus on specific items of work. I worked with various business stakeholders to create a product backlog and a prioritisation method that would support business objectives.

As the developers had no real experience with agile or modern product development methodologies I facilitated knowledge sharing sessions with the business and the three PHP developers.

Slides from the knowledge sharing sessions

Organising the existing team - agile presentation
Organising the existing team - agile presentation
Organising the existing team - agile presentation
Organising the existing team - agile presentation

Product, technical and design strategy

Firstly, to help support the technical strategy and transformation I recommended Steven Lee (Head of Technology at Shell Ventures) to Mercury.

Upon starting I, Steven, Tom (CEO), Dan (Head of Marketing) and a non-exec board member started planning out the various strategies for the company and an investment plan.

Product Strategy

Following the core principles of lean delivering only the Minimum Viable Product (MVP) for the various products and services offered by the business, ensuring we employ a hypothesis driven approach with a strong focus on technology and customer experience.

This was delivered alongside a product roadmap for the business, outlining when key milestones and objectives would be achieved.

The strategy was defined with the following considerations:

  1. Internationalisation (The ability to translate the site into various languages and currencies)
  2. Theming (Providing the ability to change the style of the website for subbrands or a white-label offering)
  3. Reseller Portal (The ability to allow travel agents to sell and create packages on the fly)
  4. Ancillaries (Opening up new revenue streams for the business such as travel money, airport parking, affiliate schemes etc)

Technical Strategy

Implementing a modern technology stack using google’s programming language known as GoLang for the backend with a strong focus on microservices and well-tested code.

React.js for the frontend to compliment the design strategy, allowing a modularised delivery framework with fewer things to maintain.

Cloud Hosting (AWS / G-Cloud) to allow speedy delivery and scaling to support our microservice architecture.

Automated Testing and Deployment Pipelines - creating a low-touch delivery engine that could test itself and minimise the technical overhead from the product team.

Mercury Holidays Technical Architecture

Mercury Holidays Microservice Architecture

Design Strategy

Establishing a design sprint process that is concurrent to the delivery process, focusing on quick testing and quick iterations.

The creation of a design system that is powered by React Storybook forcing consistency across all the online experiences.

Establishment of a style guide and re-branding/styling the business.

Establishment of a research culture within the organisation, ensuring they stay customer-centric moving forward.

Various research was performed on the state of the market and how Mercury compares to others in the same space.

Slides from research

Design Strategy - Presentation
Design Strategy - Presentation
Design Strategy - Presentation
Design Strategy - Presentation

Raising investment from the board

Once we had our strategy aligned, it was time to present a proposal to the board to allow the company to execute the outlined strategy. This was done as a presentation supported by an executive summary with the high-level objectives outlined, including financials and various other aspirations.

To help support the pitch a MVP prototype was produced.

Rapid prototype for Investment Pitch

Prototype for Investment Plan
Prototype for Investment Plan

Hiring Resources

The existing development team of three PHP developers were given the opportunity to cross-train into GoLang and eventually to be moved into the new product team.

Steven and I were responsible for hiring the product team, which consisted of a technical test (provided by Steven) and an interview with the CEO and myself.

We hired the following resources for the cross-functional product team:

  • 2x React Developers
  • 3x GoLang Backend Developers
  • 1x Product Designer
  • 1x Researcher
  • 1x Product Owner

Processes

Working in various organisations has given me exposure to different ways to deliver software, leading various teams has given me the opportunity to try to implement better ways to deliver software.

The process delivered at Mercury Holidays comprised of three core stages:

  1. Discover
  2. Validate
  3. Build

Process Slides

Process for Mercury Holidays
Process for Mercury Holidays
Process for Mercury Holidays
Process for Mercury Holidays

Establishing a cumulative research function at the organisation

The issue with research that I’ve experienced in the industry is that it’s delivered in various formats, in huge reports, sometimes only focused on the task at hand and that you can’t keep it updated, insightful or actionable.

With this foresight, I implemented an adapted, scalable and measurable research function at Mercury.

It focuses on creating a backlog of insights that are:

  1. Consumable
  2. Weighted
  3. Categorised as an Opportunity or Problem
  4. Impact of the insight (customer experience, brand image etc…)
  5. Fiscally quantified

Cumulative research process

Research Process for Mercury Holidays

Product, sprint and MVP planning

To get the initial investment from the board we only planned as far as the third MVP they are outlined as follows:

  1. The core booking experience for Package Holidays
  2. Self Service experience for managing your booking
  3. The core booking experience for Tour Holidays

These were firstly prototyped and stripped back to scope out the MVP, once the MVP had been scoped we performed design validation in design sprints to ensure that the items to be built we’re usable and met the customer’s needs.

Post-testing requirements we’re gathered from the existing technical team to understand how the technology worked behinds the scenes and requirements from the business to capture their use cases.

Each component was then broken out into various states, with accompanying micro-interactions, interactions, system logic and journey logic.

These items were then loaded into a project management program known as Jira attached to Epics and broken out into user stories.

Once an MVP had been broken out into stories we then estimated and groomed the backlog as a cross-functional product team, which created our sprints.

Hotel Page - MVP

Hotel Page MVP

Logic States - For Development

Website Logic States

Establishing a design system and digital style guide

One of the main problems I’ve experienced in the industry is the inconsistencies in design, this is mainly due to a lack of design strategy as design tends to be an after-thought, or subjective to an individual departments requirements.

Ensuring Mercury as a company didn’t fall into this trap establishing a design system and a digital style guide one of my main objectives.

This tied nicely into React Storybook and became the source of truth for the companies UI components.

Every item in the design system had been validated in a design sprint and had undergone technical evaluations.

Style Guide - Colors

Style Guide Colors

Style Guide - Typeography

Style Guide Typeography

Style Guide - Iconography

Style Guide Iconography

Design System - Components

Design System - Components

The Design

Tools Used

Axure RP Abstract Invision Sketch Principle

Package Holidays Design

Wireframes

Wireframe for Mercury
Wireframe for Mercury
Wireframe for Mercury
Wireframe for Mercury
Wireframe for Mercury
Wireframe for Mercury
Wireframe for Mercury
Wireframe for Mercury

UI Design - Click to View

UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design

Tour Holidays Design

UI Design - Click to View

UI Design
UI Design
UI Design
UI Design
UI Design
UI Design
UI Design

Video
Interaction Demo

Advanced Skill
RRP - Real Rapid Prototyping

If you’ve ever had the opportunity to test a prototype with real customer’s you’ll constantly receive feedback as: “oh I know this product it’s not £100, it’s £300”, “oh, that destination doesn’t exist in Italy, it’s in Spain”, “What is Lorem Ipsum Dolor?”. Which in turn, confuses your participant and set’s a tone for the rest of the test.

Ensuring that this wasn’t the case at Mercury I looked at how we can best use real data in the prototyping phase, this was achieved by a Sketch Plugin known as Data Populator and JSON data to quickly create pages.

The components in the design system have been created with the ability to accept JSON data to showcase real products.

The design system was created to also accept local data and public data via an API, as the business was on a move towards a microservice API exposed architecture this would allow the design to make real API calls for real data at the point of their prototype - they could even pass in parameters to query the returned dataset.

Video
Prototyping Demo

Conclusion

Mercury holidays was a refreshing company to work for, not only did they fully embrace digital transformation (within their means) they also removed all obstacles. Resulting in a successful transformation project.

Trophy Icon

Case Studies

Shell
Embedding customer centricity in an IT lead product

Currencycloud
Business is about people, and those people are users

RS Components
From bricks and mortar - to insights and pixels

M.Video
Western digital acceleration

Contact Xavier

xavier.akram@gmail.com

LinkedIn

Download my C.V.

Available for contracts in October 2019