It's also worth pointing out that the area next to the location shows the dates and times for pickup

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.
On our last trip to Iceland we hired a car from Avis Car Hire’s UK website airplane ticket and it was a fantastic experience. Their website is by far the best I’ve ever used to book a rental car. Not that that was saying much because they’ve pretty much been stuck ten years in the past.
The design is beautiful but it doesn’t let that beauty get in the way of a great, usable experience. In fact, it contributes to the experience as I will show you but you will probably see what I mean when you try the site out yourself . Visual design is an important part of the design process but it isn’t the only part of course.
Immediately you see a beautiful image of mountains and a road, with the words “Unlock the world” reinforcing their status as a worldwide brand or introducing airplane ticket you to that fact if you weren’t already aware.
Before we move on, let’s examine the wording some more. It’s very short and to the point but it doesn’t just say something bland like “hire a car”. It invites you in to explore the world and Avis are here to help you do just that. Not only that but it’s a clever use of the word “unlock” referring, of course, to unlocking your car; your gateway to the world.
Overlaid on the image representing the vast landscapes of the world, airplane ticket is a prominent search bar. This is the clear call to action and nothing airplane ticket takes much attention away from it. What are you here to do? Hire a car! Avis have made that the focus and I love it.
The search bar is the prominent factor on this page, and so it should be. There are promotions and offers on the homepage but they don’t distract too much from the search as they are placed airplane ticket below, visually indicating they’re secondary. It’s clear the user comes first, ahead of different department wants in this case. Fantastic.
As you can see from the animation above, Auckland has multiple locations where we can hire a car. The good thing about this, as the animation show, is selecting different places causes the map to move between locations. This is the kind of detail that makes the difference between good design and great design. Immediately I can see where there each are relative to each other, without me having to do any extra work.
What’s great about this is how the focus is purely on picking a date. The entire width of the page is dedicated to it, allowing it to show three full months. This is great for those who are travelling for a couple of weeks in the next few months airplane ticket but also those who will need a car for much longer, like us. I imagine airplane ticket it covers at least most, if not all situations. Simple but effective.
It’s also worth pointing out that the area next to the location shows the dates and times for pickup and drop-off as you chose them. These are also clickable so you can change them anytime. My only gripe is they aren’t obviously clickable so it takes a little investigating to discover you can change them.
Selecting times also gets the same treatment even though time can’t really benefit from the extra space like the date selection can. Avis do conveniently display opening times for your chosen location which is a great use of context. I don’t have to hunt around the site for opening hours which is something I may not have even thought about had it not been listed. I’m given the information when I need it. Great decision.
When working with a client of mine, we discovered that splitting a registration form into multiple steps improved the conversion rate. While this isn’t exactly the same, the process of booking a car requires a number of steps but Avis has even split sections into even more steps than a traditional car booking site.
It seems counter intuitive but in this instance, you can see how it helps. One giant form can be intimidating. Splitting it up into easy to manage chunks can be less of a deterrent. Hiring a car certainly has a number of necessary requirements airplane ticket and Avis’ approach gently guides you through the process.
Look at how the cars are displayed. They all have a consistent style and appearance so you can scroll the list and easily compare cars just by looking at them. Clearly some work was done to photograph each car in a certain way or at least the images were edited with a uniform style. Either way, significant care and attention has been taken to make them look consistently good.
Imagine if all the cars were at weird angles or had different lighting. It would certainly be a distraction. With them all facing the same direction, it reduces the visual complexity of the page. Also notice how they point towards the information about the car. This design flows nicely from left to right as a result, guiding the customer in the right direction.
Not only unique to this page but the use of the Avenir Next typeface across the site is fantastic. airplane ticket I know Avenir Next well having worked with it extensively on a previous project so I know how versatile it can be. As you can see here they’ve used it for headings at large font sizes as well as small copy with some being set completely in uppercase and it all looks great. Superb choice and well used.
What this great use of typography does is easily allow you to scan down the list comparing various properties. For example, you can scroll the list fairly quickly and notice the size of each car: small, airplane ticket mid-size, large, etc. The same can be said about the price. Scanning down the list looking at the price is very comfortable.
Personally I admire sites that can use one colour effectively and Avis certainly does. To show you what I mean with a simple example, let’s see what happen when you remove the colour airplane ticket from the size label:
What happens now is the property “merges” airplane ticket in with the colour of the car name and gets slightly lost, especially when scrolling the page in search of a car to choose. You can see this is also a good use of colour despite being the same as the main call-to-action airplane ticket colour. Nothing distracts much from the call-to-action buttons on this page. It’s immediately obvious what you need to click on to take you to the next step once you’ve chosen a car.
The only odd aspect of this page is when you click on the car image itself, it slides to the right and hides the information. I can’t see any benefit to this. It seems pointless but it isn’t an interaction airplane ticket you have to use so you can just ignore it and I’m not going to dwell on it.
Clicking/tapping on the car details link gives you more information about the car, loading the information in a full-screen view over the page. It doesn’t load another page as hitting back immediately takes you back to the car list view.
The car details screen gives you more information about the rental car and does it in a beautiful full-screen layout. You could possible argue that the red floor is too distracting from the main call-to-action but this is only something testing could determine. It certainly looks good, that’s for sure.
As you’re well aware by now, mobile is an extremely important part of web design. The same client I mentioned above recently airplane ticket saw mobile usage overtake desktop usage for the first time a few months ago. That’s over 3 million registered airplane ticket users who are mostly shopping from a mobile device.
There are small changes I would make on mobile without having had much time to think about it. Probably the biggest one would be to keep the back button always visible on the car details airplane ticket page, as when you scroll down, which can be quite far, direct access to a way to go back would be nice. Not a major point though.
Hertz seem more interested airplane ticket in promoting as much as possible to you as soon as you arrive. Picture yourself walking into a shop and someone coming up to you immediately and telling you what they have on offer as soon as you step foot in the door. No shop does that in the real world, why is it ok on a car rental site? It isn’t.
The car listing page doesn’t show the same type of care and attention that Avis gave theirs. They’re trying to squeeze more information into a smaller space. When you give elements room to breathe, you give your users the respect they deserve. The opposite is true too.
They know you’re probably visiting because you want a car/vehicle but they don’t know much beyond that at this stage so why show a promotion for Australia? It’s pointless and a waste of space. If they do want to go to Australia they will chose Australia, then show them the promotion. At that point you know they’re going to Australia and now they will be receptive to the promotion. Use that space more wisely.
Yes, this is really the web site for Enterprise and it’s a mess even beyond the dull visual design and the archaic 800px width of the site. Someone remind me what year this is. I seem to have travelled back in time.
Currently the redesign is only live on the UK site, at least as far as I know. The US site doesn’t airplane ticket have the new design at the time of writing. I have no idea why this is the case but it could be simply because they are testing it on the UK site before rolling out worldwide.
It’s worth nothing that I haven’t done any user testing, nor do I know what affect this is happening on Avis’ website performance since the new design. I’ve contacted them to see if they’re willing to share any performance data but haven’t received a reply at the time of writing. I will update airplane ticket if I get a response from Avis.
Learn why the best designers make the decisions they do to design successful websites people love in this eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.
Learn why the best designers make the decisions they do to design successful websites people love in th