Ashley Hogarth

Digital Product Consultant

Translink /Jan 2018 - Mar 2019


UX Designer

Design
Discovery
Analytics Research
Competitor Analysis
User Testing
Stakeholder Interviews
Experience Maps
Wireframes
UI Design
Branding

Project Inception and Discovery


Translink's website was a commercial disaster. They spent years with very low sales on their website (accounting for just 1% of total ticket sales) and by 2018 it was looking extremely dated (think ~2009 website). Which meant they wanted to bring their brand forward for the next era of Translink and begin a digital transformation for the organisation and the customers.

Problems to solve:

Increase total sales of online tickets.
Brand evolution, not revolution.

Phase 0 Discovery


Phase 0 consists of learning; what do we know now, what questions do we have, what can this teach us about going forward? Phase 0 contained some key activities;

Analytics Review


The analytics review involved asking questions like: what content is most popular? Where are users being lost in the purchasing journey? What percentage of users make it from start to finish? Where are the biggest drop-offs? But good analytics research, in my opinion, also involves some open exploration to just let the data speak to you.

Heuristics Review


Our professional heuristics review was a combination I created of Ben Shneiderman’s Golden Rules of Interface Design & Jakob Nielsen’s Usability Heuristics.

Market Research & Competitor Analysis


Not only did we look at direct competitors or those in a similar space such as The Trainline or Virgin Atlantic, but we also viewed and discussed with the client best in class technology-user companies like Revolut and what we may take from their digital approach.

Internal Stakeholder Interviews


It’s easy to think that the website just serves those customers clicking and planning journeys, but it actually serves many different parts of the business and it’s important not to forget that. With that in mind we spoke to employees such as those in support roles (like telephone ticket help) and we started to flesh out how the website could support them to reduce load. Furthermore the project also required some convincing (as UX projects often do) of senior stakeholders. It was important we showed our track record of success, approached them gently (revolution gets people’s guard up) and outlined our plan and how they could be part of it.

MMT Digital/Translink Project Kick Off Leading ideation at Discovery Day

External Stakeholders and Proto-personas


We spoke to users! We gathered as much information as we could on as many different types of traveller to begin developing our proto-personas. This was part of guerrilla user research (the fancy term for “hey can I talk to you about your travels today?”), and more formal lab user testing.

Throughout the project our user types became...

Playback


At the end of phase 0 we would setup our “Phase 0 Playback” to outline - “you’ve told us what you want to achieve, here’s what we’ve learned, here’s how we can do it”. This offers the client a chance to see your working, and pivot if they don't like the direction.

Experience Maps


I like the research to culminate in Experience Maps. They act as a nice visual concatenation of the story so far.
Our Experience Maps had 4 distinct tracks;

  1. Steps
  2. Doing
  3. Thinking & Feeling
  4. Experience
  5. Opportunities

We developed the experience maps this way to show the client in 1-3 “here’s the summation of everything we’ve learned and know about the customer” experience and in no.4 here is some (buzzword trigger warning) blue-sky-thinking (told you) about how we solve their problems. Experience maps, in this context acted as a visual summary of Phase 0.

Prototyping and Design


The general approach to the prototyping phase was;
Simplify journey planning - get the user from arriving to knowing a journey in as few moves as possible.
Tickets are complicated (that’s not changing until next year) - so purchasing shouldn’t be.

We developed a first set of wireframes in Axure and proofed it with the client. Always nice when they like your style straight out the gate. My approach for wires is about establishing flow and necessary elements to a screen. Others use wires as a stencil for the UI designer to colour in, which I think is a shame for a variety of reasons.

Initially the wires started very ‘trainline-esque’ but we iterated until it looked like a digital child of the brutalist movement. So barebones you can’t help but be sucked in to engage with the planner.
Client happy, time for some user testing.

Wireframes for translink Wireframes for Journey Planner in Axure

During all of this we are starting to run a UI design process with them, establishing styles they like, styles they don’t, how the colour palette may change, use of images, typography and so on. Shout out to UI Designer Jennifer Cunnane and the incredible work she did to achieve that. I merely acted as a supporting role in screen development once the style guide had been setup.

The biggest design challenge was tickets, the London Underground has Oyster (and contactless payments) - one card and currency for the whole network, you can also buy weekly, monthly and annual passes for the whole network. Translink have the equivalent of tickets that are only allowed on the Victoria Line, or a weekly pass for the District and Northern Line, and a 1000 other combinations of ticket types. Unfortunately due to the powers that be, this project couldn’t happen after the ‘new ticketing system’ (which was essentially Oyster) was implemented. So our approach was to do what we can, show the user the tickets, help them understand how they are different.

User Testing


User testing I was really happy that this project took user testing seriously, often it’s something clients say they want to do but end up cutting out. We tested a few iterations of the product and each time we playback to the client “here’s what we learned and our suggested changes” - thankfully they were always happy to oblige, but no session was more enjoyable than Accessibility Testing.
We tested a selection of different users with different impairments, some visual, some audio, some motor function (Naturally I ruined the reverence by putting my foot in my mouth on several occasions “take a seat over there” to a user in a wheelchair, and “it’s good to see you!” to a blind user, to name a few) and they each taught me so much about how I design and create digital products.

“User testing never fails to surprise you”

My boss, mentor, and friend Gareth Sully said to me “user testing never fails to surprise you” - and I couldn’t agree more. You always get something out of it.

Development & Launch


As the project progressed and development began, iterations and new design continued in an agile delivery manner, lead by MMT’s Mike Dillon (Technical Product Owner, now Head of Engineering) with sizing, daily scrum meetings and other agile delivery ceremonies.

In March 2019 translink.co.uk launched it’s new website to an audience of millions per year and it went on to be shortlisted for a UK/UX award.

It remains a project I am extremely proud of.

Translink Journey Planner Translink Journey Planner Final Product