How we design user journeys at Zabisco - with a bit of inspiration from F1, McLaren and the highway code - a visual language to describe a journey and the experience together.

1. user experience agency

2. Hello!
Hammad Khan
Founder & Principal UX Consultant
hammad@zabisco.com
0203 1511 330

3. Architect
User Experience Design – what can we learn from Formula 1

5. • Understanding Users - the key to
engineering a great experience
• It sounds obvious right?
But 8 out of 10 times, we design
the the solution first and then try
to get users to relate to it
– aka Solutioneering
• Britain is a nation of great
engineering pedigree and
success (see other great British
engineering success stories -
Dyson and Rolls Royce)
• We must build on this strength
in digital projects too..
Meet McLarens ‘users’ – two F1 world champions in Jenson & Lewis, plus two
dedicated test and development drivers

6. • Knowing who your users are is
only the FIRST step. We need to
know all about them and how
we can use that to design a
better fit.
• All the ologies come into play:
- Sociology
- Physiology
- Psychology
• We can use the traits of our
users to identify how to get the
most from them in a way that
suits them.
They drive the McLaren MP4-27 - designed to fit Jenson & Lewis perfectly.
Everything from their seat, steering wheel and set-up – personalised.

7. • In the digital world, we’re
restricted by a plethora of
factors, including:
- Browsers & Devices
- Bandwidth
- Firewalls, SSL
- W3C
- Privacy Laws & Guidance
- Accessibility Laws & Guidance
- Search Optimisation
• Yet despite this, the best
designers and engineers find
ways to innovate, break the
mould and get users engaged.
Google, Facebook, Amazon – all
face the same restrictions we do.
F1 cars have to meet strict criteria from the FIA governing body
(Scrutineering) – ensuring a level playing field, safety for drivers and
spectators and avoiding deception.

8. • If your users know what to
expect on their journey, they can
use their instincts to feel their
way around subconsciously – just
like a race driver who doesn’t
think through the corners – they
hit the apex in milliseconds
because it’s intuitive to them.
• Make the journey fun, exciting
and with things to keep them
interested. But remember what
their goal is – to win the race and
so don’t detract them from that
in the process. Give them
momentum, not distraction.
A perfect journey for Jenson and Lewis to take in the MP4-27
– The Spa-Francochamps race track in Belgium.
Pretty much the best bit of asphalt in the world.

9. • Nothing can beat getting in front
of your users and watching them
use your product and take your
journey – just like the McLaren
pit wall, when you see if from
your own eyes, up close, you can
see how to improve things.
• Effective user testing typically
includes recording what’s
happening so you can play it
back or show it to others.
• Having a two-way dialogue is
important too – let the users tell
you what is happening in real-
time and in their own words (we
call this ‘think aloud’)
Everybody from the team principal, Martin Witmarsh, to the drivers race
engineers monitor what’s happening

10. • Just like at the MTC, we need to
make full use of the Analytics we
have available to us – make sure
they are in line with the user
journeys!
• Bridging the gap between data
and design is a growing trend in
User Experience Design and can
be the USP between brands in
understanding what is working
and what isn’t.
• Think of your analysts as your
Mission Control and your front of
house sales/marketing as your
pit crew.
Mission Control at the McLaren Technology Centre (MTC) in Woking, Surrey
– analysing car and track data and helping the pit crew make key descisions

11. • Things can and do go wrong, so
rather than waiting for users to
hit the wall – plan for it and/or
soften the blow.
• In F1, they can change
Tyres, Noses and adjust the Wing
during the race – so they have
spares ready. They can’t change
the engine on the fly or add
more fuel due to the rules – so
they don’t waste resources.
• What can go wrong on your User
journeys? Errors, Low
stock, Timeouts – having a fix
ready is easy if you map out the
likely scenarios.
When tweaks to the car are needed, or if anything goes wrong, the McLaren
pit crew are on standby to sort it out pronto and get Jenson & Lewis back on
their way, without delay.

12. • F1 is a team sport and the best
teams work well together in all
departments to make sure the
team succeeds.
• An individual win is great for
personal glory and PR, but it’s
the constructors championship
where the money is – McLaren
need to top this table to get the
best return on their investment
and to do that, their users need
to have every chance to succeed
as individuals. It’s a symbiotic
relationship; just like in your
business!
Jenson and Lewis are no strangers to the podium – regularly winning races
thanks to a well designed race experience from start-to-finish. Good times 

13. • Expect to see more kinetic
energy power systems in road
cars in the future – thanks to the
development of KERS in F1.
• When something is not a good
use of technology, it will get
relegated to history
(Frames, Pop-ups, etc)
Winning innovations in F1 eventually trickle down to road cars

14. • In NASCAR, the drivers go round
in circles – so there isn’t much
for them to do other than crash
into each other and get into
trouble. It’s fun to watch, but
pretty monotonous too.
• The cars are pretty much the
same too – hence why they call it
stock car racing.
• The only thing spectators are
interested in is seeing a car
crash. Great entertainment, but
not a reflection of a good user-
centric design and experience.
Not all journeys are perfected like in F1 – not even in motor racing.
Even the famous Daytona track is basically just an oval!

15. • If you’ve ever sat in on a User
testing session, you’ve probably
wanted to shout instructions at
your Users, but you can’t and if
you did, they’d still go wrong –
because if it doesn’t make sense
to them, it won’t come naturally.
• It’s easy to go off course in Rally
too, because the tracks are
designed to challenge and deter
you, not help you get to the end
in one piece. A rally track is the
equivalent to fighting your way
through pop-up
windows, banner ads and other
media that is just getting in your
way.
In a Rally car, you have a navigator by your side to shout instructions at you in
real-time – LEFT LEFT LEFT. We can’t do this to our website or app users of
course and they probably wouldn’t appreciate it if we could!

16. • A race track has no physical entry
or exit – it’s a perpetual cycle
until the winning goal is reached.
• Our journeys are usually from
A-B, sometimes via C and D and
avoiding E. It’s complicated and
changes depending on 100’s of
influencing factors.
• A road network is built and
evolved over time and adapts to
the demands of the public. It
can’t be rebuilt from scratch to
suit current needs or demands –
we have to work with what we
have - Motorways, A-
roads, residential streets, car
parks etc.
This is probably closer to the journeys we are used to – and it’s a lot like the
journeys our users are facing online too. Traffic, delays, frustration…

17. • Just because we spend lots of
money on a project, develop
some cool technology or bring in
the masses through marketing –
doesn’t mean the User journey is
any good.
• Sometimes it’s hard to change
direction when so much is
committed already – Bernie
Ecclestone and the FIA keep
going back to Herman Tilke to
design tracks, even though
drivers and spectators don’t like
them. It’s no surprise these
tracks are not doing so great
(Korea, Valencia etc – all being
dropped despite being new!)
Many modern F1 tracks designed by Herman Tilke look fantastic and have the
latest tech and comfort - but are renowned to be terrible for the actual users –
Drivers!

18. • Just like a good race track, we
can design the journey to suit
our needs and the needs of our
users.
• It’s a lot easier to sketch out the
ideal user journey and tweak it
to perfection than to build the
road/track and change it later.
• We can ask for input from
users, engineers and even the
people funding the development
– getting to a workable
compromise for all before
committing too much or to late.
Spa-Francochamps isn’t a natural phenomenon – it was designed – by people
who understood what the drivers would be engaged by

19. • Putting a signpost in front of the
user isn’t the answer to every
problem on the journey – the
more time we are having to
interpret navigation or figure out
what to do, the more likely we
are to get frustrated or give up.
• A poorly planned journey has a
dramatic, negative effect on our
experience – so even if we reach
our goal, we make take a
different route next time – and
that may mean avoiding your
journey!
Our journey should be intuitive, but giving users some help and signposts is a
good idea – but they need to be effective; unlike the one above!

20. • Motorways – The quickest route
from A to B
• A-Roads – intuitive signposts to
help you navigate a route for
yourself
• B-roads – slower routes, with
more to explore and safer to stop
and change direction.
• Most countries have a similar
highway code system and
iconography, so its easy to adapt
your design tookit to use the
visual language to suit the
people on your project – the
stakeholders, engineers, designer
s and users.
The symbology of the highway code – a great visual language for describing
both the journey AND the experience together. We’ve used and refined this
methodology in UXD over the last 10 years and it works VERY well indeed.

21. • Ideally, you can get input from
real users to help you guide this
planning. When that isn’t
possible (for whatever
reason, but usually time, money
and logistics in organising
it), gain insight from people in
your team who are close to the
users – sales teams, service
desks, etc.
Cognitive thinking – map out the steps and thoughts of your users and stitch
them together using the highway code toolkit.

22. • An easy way to start is to have all
your Motorway journeys at the
top, running left—to-right. Then
your A-roads, then your B-roads.
This helps you to understand
priorities as well as look
vertically through the linear
journeys to identify lateral
movement – join your journeys
together at these points as this is
an early insight into actual user-
behaviour!
Merge all your journeys together and find any cross-overs; streamline it and
you have your sitemap, information architecture or blueprint ready for
engineering – a natural conclusion of the steps before, rather than contrived!

23. • Make sure you know what parts
of your interface are serving
which parts of your journey – are
they in-sync with your priorities
and your users traits?
• When you track the usage of
your product/system, you can
keep an eye out for how effective
your motorways are – are people
getting lost on the B-Roads? Or
perhaps the motorways are so
effective, users are missing out
on good content/experiences in
the B-Roads, so use A-Roads to
help them find it – IF they don’t
mind a detour of course!
Even in the design/engineering stages, you can continue to use this visual
language to ensure the user experiences you want are not lost.

24. Thank You
You can contact me about all things
UX, Formula 1 or Zabisco
hammad@zabisco.com
07966 029298

25. Digital User Experience Team
London & Nottingham Tom – Head of Design
Shean – UX Architect Mariza – UX Architect
Hammad – The Boss
Natalie - Planner
Naseem – Tech Lead
Wallis – UX Designer
Jon – IX Designer
Duncan – Studio Manager
Marcus – Creative Services Director

26. • Focus Groups • Personas • Wireframes • Usability Testing • Responsive Web
• Card Sorting • User Journeys • Prototypes • Online Surveys • PHP / Drupal
• Ethnography • Business Process • Creative Concepts • Data Analysis • Mobile
• Interviews • Workflows • Infographics • A/B Testing • Styleguides
• Analytics • UX Architecture • Motion Graphics • IA Testing • Specifications
What we do