In a world where you can find millions of websites that have the information you are looking for, how can you stand out?

There’s a simple way to answer this question and is all about being simple and functional: I am a lazy user, and when I want to check something on the web, I would like to find that specific piece of content in zero time or almost. Well, I am sure I am not the only one… So why don’t design a journey that can deliver this experience? But first of all…

What is a User Journey?
And what is the User Experience Design?

Let’s start from the beginning: what is User Experience Design?
UX (its short version) is a human-first approach to product design and it can be applied both to physical and digital products.
It keeps an eye on the experience of any user from the beginning of the journey to the end, like purchasing an item or filling a form, and because of this understanding of the full experience that a user has, the UX Designer creates User Journeys in order to find any weak or breaking points that a person could encounter while “walking” that path.
This is a User Journey and it delivers products that delight users effectively and emotionally.

Now that we understand a bit better what User Experience and a User Journey is, we can dive into how to design a great journey that keeps in mind this main (and important) thing: the satisfaction of the client with the product.

Tip one: keep the interface simple!

We can’t stress enough when talking about simplicity: keep it simple!
Simplicity is the key, period. Avoid unnecessary elements, be consistent throughout the interface, make it clear and easy to browse.
The main purpose is supposed to be “engagement” and the best way to have it is by using an easy understanding of both structure and natural flows that lead the visitor from the top to the end of the page smoothly, or towards the main goal.

Think about why webpages, desktop and mobile, all have some similar aspects and elements that are constantly repeated, even if some of these pages are covering different businesses, targets and so on. The answer is quite simple: there are well-known paths that visitors and users understand straight away and ask yourself why you should change this and create blockers on your path.

Tip two: consistency…

Following what we have said before, simplicity works well with consistency.
This is an obvious thing do to or at least to keep in mind while creating journeys: most of the time, our journeys are going towards different direction but element used in there (like Call To Actions) are quite often the same. A good practice would be to keep these elements consistent (of course) on all journeys and this way they will be well recognisable elements that users will rely on, knowing that this green CTA, for instance, means “proceed” and the red one “stop”.

The same concept can be applied to icons: cogs, burger menus, three vertical dots, a house… you visualised the icon in your head and associated that icon to a specific action, am I right? This is why we should keep consistency between elements throughout our website or application.

Tip three: use colour and shape the strategic way

Elements like shapes and colours can be really important within the page and the journey because they have the ability to lead visitors towards our goal.

Let’s take the colours as our first example: colours have a specific psychological effect on people, and if we use them accordingly it is possible to create a “natural hierarchy” of elements within the page and suggest the next step or action immediately (remember what we said above regarding CTAs? That’s it: red for stop, green for go!).

There’s a reason why we use green for checkout CTAs or confirmation message: it stands for that the action has been correctly gone through and the website (or anything else that is interaction with the user) has collected this action and is, in fact, working to satisfy this request.

A quick tip here for the other way around: error messages or any other element that indicates it: don’t use red!
Ok, don’t get me wrong here: red IS the colour for showing that an issue occurred. But, let’s be honest, a strong red shape, message or anything else is quite strong to see and it’s perceived as a huge mistake. But, fortunately, this can be easily fixed. Check the image below:

Above, we have some examples of red shades that can (or can not) be used.
A strong red is quite hard to see… Sometimes is ok but it is still strong. I would suggest using a different and darker shade of the same red, that becomes easily digested by anyone. To give some extra strength to our sentence, we can use a background colour as well.

Then we have this orange, tricky one. It can be a proper error message, a suggestion…. you name it! It’s a real jolly within the journey when we need to say something to the user, especially if we have to tell him or her what to do: it’s not imposing anything, just suggesting something

The same concept can be applied to shapes, for balance and organisation.

Tip four: typography

Another good thing to keep in mind when designing your user journey is the way you “say” things.
Inside one page, the user should find titles, subtitles and paragraphs easily and quickly understand where the main topics are.
The goal here is giving to visitors the possibility to skip, if needed, some information in order to allow them to reach the ones they are looking for: let’s say that the explanation about how to change the profile image of your app is not the first paragraph but the second one, a good way to lead people here could be writing “changing your profile image” (quite hard to misunderstand) in a nice and bold character.

Functional text should be quickly identified as well and, most importantly, used on the page or app.
The functional text is a life-saver (sometimes) and having these little helps placed in the right spot will allow the user to proceed on the right way or do the right action instead of leaving him in a weird situation of not knowing what he should do and, eventually, close the app or the browser for running to our competitors with a better journey, and we do not want this right?
So, please, place the functional text next to a tricky step of the journey with an identifiable colour such as a light grey and remember: what is quite obvious for you could not be that self-explanatory for other people.

Above, a simple example of functional text applied to a form. This case is clear what the form field is going to be used for, but sometimes a little help can be useful to have there… And that area can be used for an error message as well.

Tip five: say what is happening!

This tip follows what has been said previously: explaining and let the visitor know what is happening on your page or app.

Let’s say it in a simple way: you need to collect emails for your mailing list, and the new sparkling form is there, easy to use and on top of that is really good looking. Visitors are all landing on that page, they start the journey but your mailing list is still empty… why?
You decide to run a test now to check what is wrong (why we didn’t do that before publishing the form thought is still a mystery) and you discover after several times trying to hit that submit button that you placed an email without @ in the field, and the system (that recognises it) is not telling you bout that, and simply is not allowing you to go through the process. Well…

I think you got the “say what is happening” thing, don’t you?
So, in this case, you should have explained that the email in the field was wrong with an error message and that way, the user knew the error and was prompted to fix it before trying another time to submit his request. Same for anything else like a wrong typo or mandatory fields not filled properly.

Always say what is happening! This way the experience will be much smoother.

Did you enjoy this article? Share it!