Four knockout UX examples

Ashleigh Bell
QDivision
Published in
7 min readJul 20, 2017
its old. but it’s good.

We all know what user experience (UX) is, but sometimes it’s hard to express what we like about a particular design. What makes it even harder is that there are so many UX definitions out there. So let’s start from a good definition of user experience design, investigate what qualities make for good user experience and finally see these qualities in action, through examples.

No matter what the definition is, UX is always the process of enhancing user’s satisfaction with a product by improving usability, accessibility and pleasure provided in interacting with the product.

What constitutes “good UX?” It’s particularly difficult to define in a short sentence, however, if we look at a broad overview the product or service should:

  • Make the user’s life easier: this is often said to be the heart of UX and generally how people explain what they do if they’re a UX designer
  • Consistent: this creates security and trust from the user, it’s less distracting
  • Create user’s delight: although this shouldn’t take away from the usability of the product. A happy user is a productive user
  • Goal focused: this can be particularly difficult to do when designing products and services, but we need to ensure that the design is centred around users achieving their tasks

So let’s get into looking at some practical examples.

It’s particularly difficult to decide on a mere four examples to show great UX in practice. Where do you even start? There is a whole galaxy of examples out there. How about an example of a banking app, and e-commerce site and then looking at the merits of Adobe Creative Cloud? You might be asking why these particular categories. Well, in this previous article, we listed some broad categories for a practical understanding to differentiate user experience design and experience design and decided to elaborate on for continuity.

Within e-commerce, a site that is not only beautifully designed but has a simple and easy to use experience is Bellroy. The navigation lets you explore in different ways and the language is straight forward ‘human’ speak if we can call it that. A feature particularly liked is the country identification of the visitor and whether or not they ship to it which is up front and centred at the top. This means that you know beforehand whether you can claim one of their stunning products. Instead of going all the way through to checkout and then finding out they don’t ship to your country. (You’d be surprised how often that happens.)

On the product page, you’re able to search by colours with a simple selection on the left-hand side. They profile their products amazingly with the ability to see what you can actually fit into each item. Users know exactly what they’re getting and can see whether the particular product is suited to their needs. (note that the image below is animated, but the actual site is not, users have to click the image to see what’s inside)

The specific deeper product page houses a beautifully shot video to display the product and its uses. (Going beyond the user experience of the site: on their iPhone wallets, they’ve included a SIM storage and SIM swapping tool pouch — how rad!)

Checking out, the steps are housed on one screen, leaving the user with the understanding of what information they need and not making them jump through a million hoops. Quality!

Bellroy.com what’s inside functionality.

Just as a quick side note, an e-commerce mention must go to Amazon, which has a feature that is particularly useful to the user; Once you’ve made one purchase there is a simple 1-click function that allows you to check out with one click of the button. It uses your previous payment method and default shipping address (which you can change with a simple drop down to any other address you’ve inputted previously.) This makes buying really easy and leads to less abandonment of baskets. Very clever.

Amazon 1-Click checkout

Adobe Creative Cloud obviously houses a multitude of products within it which mostly can all be commended for their user experience. But if we look at Adobe Creative Cloud as a product in itself, we see there is merits to the user experience.

Adobe Creative Cloud app on Mac

As soon as you download one of Adobe’s products, Creative Cloud installs on your computer. It houses any activity done on your apps, whether that’s updates or collaboration comments on any of their tools. It’s got an awesome library feature that allows you to store assets across multiple apps all in one place and they’ve also included the ability to search their stock library as well.

All your adobe apps are just a click away, collaboration is a strong point, you’re able to share files as well as see any comments / changes easily and ensure there’s version control. You also get the latest updates and features which you can set to automatically update. And if you’re a Mac user this all is housed in a tiny little icon in the top menu bar. It’s really unobtrusive, which is particularly liked.

Not being connected to the internet does pose a problem that most of these sections don’t actually work, your apps are still a click away, but the communities, stock images or activity isn’t workable. But to be honest it’s all in the name really — Creative CLOUD — meaning, you need internet, it’s in the cloud.

Lastly, a banking app:

It was intentional to keep this one for last as with the increasing trend of focus on user experience design within the banking sector it becomes quite simple to create a list of about eight to ten banking apps that can be awarded the badge for great user experience design. But there was one example that really stood out and not just for the awesome user experience of their banking app, but actually for the way in which the business is structured and the manner in which they have married the user to the business. Creating not just a user centred banking app, but a user centred business. They’re wired differently to the ‘traditional’ banks and that’s why they’re highly commended. It’s one thing to slightly improve what the guy next door has created, but it’s a completely different thing to actually buck the trends and create something that works in a different way to solve users’ problem.

The banking app is from Simple

Simple banking app — goal setting screens

You’ll see that the UI is super easy on the eyes, and it offers some features that no other bank has. The 3 features that are really stand out are card blocking, safe to spend functionality and the real language search. With the card blocking feature, you can block your card anytime anywhere, but the best part of this feature is the ability to unblock it again. This means that even if you wake up one morning sans bank card, you can’t quite think that it’s been stolen but don’t want to take the chance — simply block it, with no worries about it popping up in your jeans pocket and having to go through the admin of ordering a new one. Just tap the card to unblock, enter your pin and voila! Re-activated.

The safe to spend functionality lets you save towards those goals that always seem just out your reach. Then each day it tells you how much you have to left to spend, making it much easier to stick to your budget. The search function allows you to use real language to search for transactions. For example, you can search for “California Hotels” which will display any hotels purchased in the California area through the zip code attributed to each purchase.

It’s been said that Simple is visually dynamic with solid core functionality. What more would a user want?

Saying all this, we know that the semantics among us would argue that Simple isn’t a bank, but instead a middle man who helps users manage their funds through online and mobile tools, and well they’re right in saying that. And there’s no saying that Simple is perfect and meant for everyone, but for the level of technology, customer service and amazing level of user experience they provide, they’ve taken the spot of the best example of excellent user experience in a banking app.

In short,

Looking at the four examples provided (which is merely scraping the surface) it’s apparent that they all share a couple of excellent UX traits, they’re consistent, goal-focused, easy to use AND provide the user with delight. UX is everywhere, which makes it easy to pick out the good examples and equally so the bad ones. Have a look around you, there’s inspiration everywhere.

Like our ideas? Get the best fresh to your inbox and keep up them on Twitter and LinkedIn.

--

--