Drawing ...
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.
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:
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
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
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.
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:
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
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
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
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:
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:
Process Slides
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:
Cumulative research process
To get the initial investment from the board we only planned as far as the third MVP they are outlined as follows:
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
Logic States - For Development
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 - Typeography
Style Guide - Iconography
Design System - Components
Wireframes
UI Design - Click to View
UI Design - Click to View
Video
Interaction Demo
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
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.
