UX – So much more than just the UI

11 minutes read

Quite a few times in the past I’ve come across the misconception that UX is really only concerned with the UI (user interface) of a website, application or product. The conversation usually goes something like, “We pretty much know what the <insert website / application / product where applicable> will do, we just need a UX designer to work on the UI”. UX is almost seen as interchangeable with UI. A UI designer is the same as a UX designer (wrong), and the UX really equals the UI (wrong, wrong and wrong).

I’m going to use the exciting world of car parking to demonstrate how that really couldn’t be further from the truth, and that as far as UX and good UX design is concerned, the UI is really only one piece of the UX puzzle. So, let’s delve in to the exciting, rock and roll world of car parking!!!

Paying for parking – a necessary evil

I live just outside Cambridge in the UK. Cambridge, the ancient city that it is has always been more of a friend to the pedestrian and bicycle than the motor car. It’s fair to say that car parking in the city is not only rather limited, but also very expensive. To get around this parking problem the council rather helpfully run a number of Park and Ride services. You drive to a large car park just outside the city (the park bit), buy a bus ticket and then jump on a bus (the ride bit) which whisks you into the centre of Cambridge in no time. Simple, well at least it used to be…

Now, you might wonder what all this has to do with UX. Well, the council in its infinite wisdom has recently introduced a parking charge. Whereas before parking was free (you just paid for the bus), you now have to pay to park as well. Unfortunately the process they have introduced has a number of flaws, leading to significantly larger queues for the ticket machines, and a rather poor overall user experience.

Here is how the Cambridge Park and Ride car parks now work

1. You arrive at the Park and Ride car park and park your car
2. You walk to the car park bus stop
3. You join a large queue of people waiting to buy a parking and bus ticket (see above image)
4. You wait…
5. You wait some more…
6. You finally arrive at the poorly designed ticket machines and read the ridiculously long list of instructions (see below image)
7. You are asked to enter your car’s registration number (which in the UK is something like BD51 SMR)
8. You ask someone to hold your place in the queue whilst you pop back to your car to make a note of the registration number
9. You get back to the ticket machine and enter your car’s registration number
10. You verify that the photo shown on the small screen is indeed your car (the system uses fancy software to read your car registration number on entry to the car park) and pay for your ticket
11. You receive multiple tickets and receipts (fortunately you don’t have to display a car parking ticket in your car window)
12. You get on the bus before the angry mob can get you

As you can probably see from a user experience perspective there are a number of flaws with this process.

1. Its overly complex

Firstly it’s an overly complex process. This is highlighted by the fact that the instructions for doing something as simple as paying for parking are so ridiculously long.

2. The ticket machines are very poorly designed

As you can see from the above image the ticket machines have not exactly been designed with users in mind. Buttons have to be crudely mapped to the screen as it’s not a touchscreen. There is a strange little A-Z keyboard for entering letters. The text and keys are fantastically small and difficult to read and bizarrely there appear to be two identical slots where a ticket might come out of (just to keep you guessing).

3. You need to know your car registration number

This is in my opinion the greatest flaw with the process. I’m sure there are lots of people that know their car registration number by heart, but I’m certainly not one of them, and I’d wager that a lot of the general public wouldn’t either. In the UK car registration numbers are a seemingly random collection of letters and numbers, such as BD51 SMR (not my car registration number I hasten to add). Certainly not something that lends itself to easy recall. I’m also curious to know what happens with foreign number plates. Does the machine simply explode if someone tries to enter a French or German number plate? There are also likely to be lots of tourists using the car park with a hire car. Do you think that they will know their car registration number off the top of their head?

4. It goes against the standard car parking mental model

A mental model is like an internal model that people use to help make sense of something. Unfortunately the rather unusual Park and Ride process goes against the standard parking payment mental model. There are no parking machines to get a ticket from (to be displayed in your car) and you don’t get a ticket on entry to be used to exit the car park. To all intents and purposes it looks like parking is free, as no tickets are on display in cars and there is no barrier blocking your exit. I wonder how many people will jump on a bus (you can pay directly on the bus) without realising that you have to pay for parking!

5. English is the only supported language

Cambridge is a very popular city with tourists and whilst I’m sure a lot will speak good English, it seems a bit short sighted to not support other common languages. What about French, Italian, German, Spanish and Chinese speakers, to name but a few?

6. There is very little feedback

It’s pretty important that users know that their parking payment has been successful because if it hasn’t, they’ll be receiving a nice parking bill in the post. Unfortunately the feedback provided by the system is on the minimal side. You receive a receipt but with little information contained on it (I’m guessing this should be retain in case of any dispute) and because there is no exit barrier you don’t receive that positive feedback on leaving the car park that you’re good to go.

7. The payment system is unclear

If I’m in a rush and want to quickly jump on a bus (you can still pay on the bus, but not for parking) it’s not clear if I can then pay for parking on my return. Everyone assumes that you have to pay on arrival, which is partly why the queue is invariably so large.

8. Mobile payment methods are poorly supported

As you might just about be able to make out, hidden at the bottom of the humongous instructions board is the news that you can also pay online or via a text message. Unfortunately it’s very unclear how the text message payment works (will I get billed from my phone provider?) and the website isn’t mobile optimised, so using it on a smart phone is somewhat of a challenge! Epic fail I’m afraid.

9. There is no explanation for the new charge

As any parent will tell you, if you explain the reason for something, children (and people in general) are more likely to willingly do it. “You need to eat your breakfast otherwise you’ll be too tired to play” is likely to prove more successful than simply, “EAT YOUR BREAKFAST!”. Unfortunately the council has taken the second approach. There is no information as to why this new parking charge has been introduced and no explanation for why I as a Park and Ride customer should suddenly be paying about 50% more for exactly the same service.

Improving the UI

Now I’ve hopefully established that from a user’s perspective, the new Park and Ride experience is really rather poor. So let’s imagine that a big wig at the council decides to bring in a SWOT UX team to sort things out. Hopefully that SWOT UX Team would carry out some usability testing, would observe people as they go through the parking process and would generally drill into the user experience. Fantastic, but as I’ve already mentioned lots of people still seem to think that UX begins and ends with the UI, so what can we do about the UI? Well we could:

• Introduce a touchscreen with clearer buttons and bigger text
• Use an onscreen QWERTY keyboard rather than a strange A-Z keyboard
• Introduce support for multiple languages
• Simplify the ticket machines, for example by reducing the number of slots

This would all hopefully improve things. The time it takes to pay for parking should go down, as would the queues, but we’d still have a flawed process and ultimately be providing a poor user experience. OK, so what if we were to improve the process?

Improving the process

If we look at the Park and Ride ticket process two significant improvements that we could make are:

1. Simplify the task of selecting the car to be paid for
2. Support payment on exit, not just arrival

Why do I need to know my car registration anyway?

In the current process the car registration number is entered to identify a car. Car registration numbers are great for computers, but not so good for people. If I point at a bunch of cars and ask you, “Which car is yours?” you don’t reply, “BD51 SMR”. No, you say something like, “It’s the Red Audi”, or “It’s the Silver Mazda 6 estate”. We generally use colour, make and model to identify our car, so why not do the same for the Park and Ride process? The system knows the car registration number, and using this information and the DVLA database it can find out the make, model and colour for that car. The car identification process could therefore be something like:

1. Select the make of your car
2. Select the colour of your car (if there are lots of cars of that make)
3. Select the model of your car (if there are lots of cars of that colour and make)
4. Select the photo of your car

Much simpler, and without having to go anywhere near the car registration number.

Why can’t I pay on leaving?

With no bus to catch car park users are likely to be less pressed for time on leaving the car park than on initially arriving. Why not therefore allow users to pay for their parking on returning to the car park, rather than on arrival? The current system might, or might not allow this, it simply isn’t clear and I wouldn’t want to risk a parking fine finding out!

Improving the overall experience

As you’re hopefully starting to see, UX and UX design is so much more than the UI, or indeed the process that someone goes through. UX encompasses the entire user’s experience, and a good UX designer should be taking a holistic view of the entire end-to-end experience. If we take this more holistic view, there are a number of improvements we can make to the overall experience:

1. Simplify the process

Rather than having people identify their car, why not simply have them pay on exiting the car park? The system knows how long the car has been parked for (as the car registration number is read on entry and exit) so can charge the correct amount on exit. Having an exit barrier that is raised on payment would also provide feedback that parking has been successfully paid and is much more in line with people’s mental model of how a charging car park generally operates.

2. Allow flexible payment

Rather than requiring upfront payment (or at least appearing like upfront payment is required), why not let users pay on returning to the car park, or indeed having just parked? For example, someone could catch the bus and then pay online (or using a handy mobile app) whilst on the bus.

3. Encourage online payment

If you incentivise users to pay online, such as by offering a cheaper price you can speed up the process. If we have payment on exit those that have paid online wouldn’t even need to pay at that point, as the system would recognise their online payment and allow them to exit.

Ironically a ‘pay as you go’ option is available for the current Park and Ride system. However it’s not publicised (it’s certainly not mentioned in the instructions) and you have to really hunt around online to find it. You simply register online, enter your payment details, enter your car details (hoping that you got the car registration right) and then enable ‘pay as you go’ for a given car park (this last step is very unclear). By encouraging people to register for ‘pay as you go’, and by making the sign up process as simple and as user friendly as possible, you can make the service much simpler for those users.

4. Provide better feedback

An exit barrier and display would provide better feedback because users would know that because the barrier is letting them through, they have successfully paid for their parking. Most airport car parks do this. You get feedback to know that your parking has been settled and that you’re free to go.

5. Support mobile payment

It’s really a no brainer that an online payment service should be mobile friendly, as this will be the primary channel for paying online on the day. Ideally there should not only be a mobile website, but also a mobile app that can allow regular Park and Ride users (which most users are likely to be) to easily and quickly pay for their parking and perhaps even their bus ride (a bit like a digital flight boarding pass).

6. Communicate the rationale for introducing a parking charge

You have a captive audience whilst people are queuing to use one of the ticket machines, so why not use this opportunity to explain the rationale for introducing the new parking charge? You could even sneak in some relevant advertising whilst you’re at it (well someone has to pay for these things!)?

7. Let users know how long they will be waiting for

We all hate not knowing how long we’ll be waiting for something. This is why Theme parks show an estimated queuing time and the London Underground shows the number of minutes to the next train. By showing an estimated queuing time and the number of minutes to the next Park and Ride bus we can hopefully put people’s mind more at ease.

8. Introduce a bit of queue management

Have you ever been to a post office or bank that has an automated voice telling you which counter is now free? They are there to speed up the queuing process and a similar tactic could be applied here. There could be visual and audible clues to indicate the next available ticket machine.

9. Change the payment model

Finally does the council even need to introduce a parking fee in the first place? Why not simply raise the bus fee? A new parking fee hardly encourages people to park and cycle (which used to be free), rather than park and ride.

UX is so much more than UI

As you hopefully can see UX, and good UX design involves so much more than just the UI. A good UX designer should be taking a holistic view of the entire user experience and should hopefully be involved from the very start to help flesh out the user journey, to identify the user requirements of a product or service and to generally guide and design the overall user experience. The next time that someone tells you that UX is just about the UI, or that you only need to bring in a UX designer to design the UI, put them on the straight and narrow. Otherwise, you’ll simply be doing UX a massive disservice.

See also

• The Difference Between UX and UI Design- A Layman’s Guide (CareerFoundry)
• The Gap between UI and UX Design – Know the Difference (Onextrapixel)
• UX designer vs UI designer infographic (abDevLabs)