UX Paradigm - A Look At Visual And Interactive Mastery
User experience (UX) is not something new, if your work or interest is hinged towards design then you would definitely have heard of it. It is however always been somewhat ambiguous - does it include everything and encapsulates the entire design process ? Is it visual design (UI) ? How does one go about it when the information available is so confound. An insightful research done by the Oxford journal points out -
In other words, creating an experience that along with visual cues creates the process of interacting with the website or app, seamless. Sure it sounds all well and good but how does go about implementing it ? Think about the best website experience you could imagine, don't bother, you cant. It's quite difficult conceptualizing a a process that offers the least resistance let alone building it. A lot of us are familiar with the basics - Color consistency & contrast, placing the CTA above the fold, least no of steps to complete conversion etc but UX is so much more than that. In the pursuit to refine my knowledge of user experience design, I decided to go ahead and build a UI/UX design for an app for this blog using the newly launched Adobe Experience Design. The goal was to create an interface that is not just beautiful to look at but also fluid and effortless to use. I was in for a big surprise once i began this side project, starting from scratch, the level of detail that is required to achieve a decent looking interface was nothing short of a revelation to me. Being a design nut however, I constantly found myself going back and forth trying different combinations of colors, styles and patterns until I was convinced it worked. The UI/UX design you see below is not complete since the goal was merely to familiarize and put myself in the shoes of a user experience(UX) designer.
Now just to be clear, this attempt of mine to create the UI/UX for an app is in no way reflective of the title of this article. Mastering this vast and continuously expanding field of UX takes years of experience and a strong grasp of applied cognitive psychology, something that I have only begun to understand.
Speaking of mastering user experience design, let's look at one of my favorite website. This thing is a visual treat to be honest, the amount of thought that is put into this project is phenomenal, from colors & typography to content. There are a few tiny design decisions that I do not agree with but as a user I will let that slide Avis, you deserve it. Yes, the website I am fangirling over is AVIS UK, here's the first impressions you get..
Minimalist header with no clutter, a beautiful night sky in the background with a low opacity search box and a clear call to action. Notice how the bright red colors are used only on the header, CTA and the steps; which in my opinion don't need to be there but its all good, its not distracting away from the call to action. If you do something called the squint test for the homepage which basically requires you to squint your eyes so that you're only able to see basic shapes and colors without any sense of detail, you get an idea where your mind will focus on subconsciously without you even realizing. Needless to say, Avis UK passed the squint test with flying colors. The homepage is well and good except for the fact that the footer is all red, come on Avis that's too much red real estate, black, your secondary color would be a lot easier on the eyes. Moving on, let's schedule our pickup.
You will quickly notice that each location is categorized into one of three icons - Airport, Train Station and Office. These icons are self explanatory, you don't even bother looking at the text on first glance, you brain will automatically prioritize information - Airport -> What Airport and the map in the background is just a cherry on top, moving from one location to the next it gives you a visual perspective how far away they are from one another. Now that to me is UX done right - a combination of assets that provide utility to shave off microseconds of inconvenience. Alright now to the best part, selecting the car.
Right off the bat, a brilliant color classification - bright red background for Avis select series and light grey for the regular models. What I really liked overall is the how they managed to overcome the missing image problem, simple yet ingenious. You will also see a slight hint of material design when you hover over the box, a slight drop shadow illuminates the card that stands out from the rest. If you're just beginning with UX & UI and have trouble differentiating between the two then here's the perfect the example - Notice the images, all pointing in one direction, the color classification, image grid, features and the placement of call to action are all worked out by the UI designer. So what in hell does the UX designer do ? See that price on the top right of each image, what the user is looking at is the total price for the date range he previously selected, 2 days in this case. Typically you would see the rental price for one day and then pull out your phone and calculate the total price of your trip. UI designer provides visual cues to guide you while the UX designer takes those visual cues into consideration and works towards making your life easier.
Alrighty then, what happens when you view car details ?
I have to give Avis props for using these images, I mean look at it, serious effort has been made to photograph each car and edited with a single theme in mind - Yeah, you will only find white and black cars, maintaining the color contrast throughout. Looking at the car details page, WOW - need I say more ? Here's what's happening - You've got a perfect image of a grey/white Mercedes against their signature bright red with a slight dark red blur in the center. It's begging to be noticed and you can't help yourself. Not just that but notice where the car is pointed - Towards the information you came to see. Imagine if it was pointing in the other direction how weird would that be now that you've seen this. Also the top bit with the price and call to action is sticky so it stays in view when you scroll down.
My only quarrel here is that there is no option to sort/filter by car type such as - Mid Size, Large, People Carriers & Estates.
Now one must wonder, if Avis is putting so much effort into their UX, surely their competitors must be right up there ready to grab their piece of market share.
Yeah, not really. This looks bad until you see Avis' middle east website.
Is this a joke? Has anyone updated this website since 2011 ? The variance in capability is mind numbing. I should calm down, maybe their design team is on holiday, for the past 8 years. Seriously though, for such a massive brand name to allow themselves to be associated with this is just embarrassing.
I do understand that there is another website that serves the entire middle east which looks quite decent but this ancient looking website is the first link when you google - Avis Saudi Arabia. Apparently someone at Avis thinks that as long as the website serves the core purpose, its good enough. Well 2017 will change their minds hopefully, they need to catch up though, it's the age of responsive websites and apps. If your brand doesn't strive to become a part of your user's lives and work towards solving their problems then your competitors will. If this behavior from Avis and Budget keeps up, I'm sure an app will popup on AppStore/GooglePlay someday that will allow users to find the best prices, choose their rental service - Avis, Budget etc and book directly from within the app and huge brands like Avis won't have a choice but to partner up with such an app where the bulk of their potential customers have moved on to.