Design Is Boring

There is a right way to do things and a wrong way to do things.

 

I lied – the above statement is not at all true. Yes, there are certain things we know we shouldn’t do, or we should avoid when designing experiences but to say that there’s a golden bullet is completely wrong.

There are guiding principles and ‘best practice’ approaches that we’re led to believe is the correct thing to do, but does that mean we should treat these as rules?

Absolutely not. If that was the case, then how do we advance the industry? How would humanity move forward if this approach was always taken? In the well-weathered and referenced words of Henry Ford:

 

“If I had asked people what they wanted, they would have said faster horses”

 

So why would this be the case? It’s because the car didn’t exist at the time and no one else had the foresight or confidence to think beyond what they already knew.

This is also the danger with competitor research and analysis. I’ve lost count of the number of times I hear “I like what this business does so we want to do that”. This raises several questions; “Do you want to be your competitor? And if that’s the case, what differentiates you as a business? Why would anyone buy from you over your competitor?”.

In some instances, there’s a genuine answer to this based on price or faster delivery, but there’s a limit to how far this can go. It’s impossible to compete infinitely on price and certainly huge logistic challenges to promise things like next day delivery.

 

 Best Practice Should be your Foundation, not your Goal

This isn’t a post to completely disregard the proven approaches and methodologies. This is a post highlighting the fact this should be your starting point. The whole idea of starting these best practices is to create something that ‘works’.

But creating something that ‘works’ doesn’t provide a memorable experience. Just creating something that ‘works’ doesn’t build brand loyalty. Building something that just ‘works’ is emotionless and non-descript. In the words of Charlie Chaplin:

 

“To those who can hear me, I say, do not despair. The misery that is now upon us is but the passing of greed, the bitterness of men who fear the way of human progress.  Don't give yourselves to these unnatural men! Machine men with machine minds and machine hearts! You, the people, have the power to make this life free and beautiful, to make this life a wonderful adventure. Let us use that power. Let us all unite!”

Please note that the above quote has been shortened for succinctness

 

 Where Process Makes Sense

There are instances much like the checkout process where having something that ‘just works’ is a good thing. Once the user has got to this level of their journey, it’s about a transaction.

In essence, it’s a process, so recognisable patterns and best practice makes it much easier to complete that process. In many instances you don’t even need a checkout anymore – you can simply use PayPal or mobile payments to complete that transaction without having to engage any further.

 

Where Process Doesn’t Work

On the flip side, the browsing of products is a much more emotive experience. If your shopping experience is the same as everyone else, how will they remember you? Why would they come back? The same rules apply in physical retail experiences and can be seen all over the place

 

 

Apple is a classic example of this. The grey storefront with towering glass panels and a giant Apple logo front and centre is a staple look of their stores.

 

 

And the inside the stores themselves are just as striking. The minimal look, drawing all attention and lack of checkouts is a staple to their physical retail spaces. Even the uniform alignment of the tables is carefully considered to create smooth flowing footfall around their stores.

The same can be said about Victoria’s Secret and their bold pink and black statement so they capture the attention of passing footfall. It’s recognition. The association of a statement look or mark with a brand.

 

What’s in a Colour?

The same risks of identity can also be applied to colour psychology. There’s a very particular reason that so many of the largest social media accounts like Facebook, Twitter and LinkedIn use blue as a brand colour.

Blue is associated with trust and stability – something that all social media platforms can never be short of. The same can be applied to many other brands such as IBM, Intel, American Express, Salesforce and Visa. All these brands are dealing with sensitive or private information and need to do whatever they can to build trust and confidence in their users.

When you apply the same colour theory to other industries such as fashion, you have very similar issues. You could arguably say that the clothes and apparel should make the brands stand out, or the larger brands relying on reputation.

However, at a face-value brand level, so many high-end websites look the same. Standard patterns, excessive use of black to portray ‘luxury’, small typeface to draw attention to the clothes and away from the price. This is an example of brands following one of two approaches; we should do this because we aspire to be an elite label, or this is what we’ve always done.

Neither of these is a measure of success and unless brands begin accepting experimentation, it’s going to remain this way for a while. The issue with this is that this removes multiple levels of visual hierarchy making and all levels of identity. Suddenly, these brands are merely competing and relying on status, more than that of having their own identity.

 

 

The use of colour doesn’t only apply to the brand, but also the UI in which they sell their products as shown here:

 

 

All the images here are from each of these brands (that’s right, they’re not the same site), but they all start to look the same. All use black and white in excess and lack a visual hierarchy or identity. That could switch around the logos on any of these sites and you wouldn’t know the difference.

So now we’ve moved from a conversation of ‘best practice’ to a conversation of ‘commonality’ in UI, but both are interlinked.

 

Take a Piece of Advice from Apple and ‘Think Different’

So, let’s hope brands open themselves to more creative execution and innovation and avoiding getting sucked into a copy and paste future of faceless, legacy-reliant brands.

Brands, be proud of who you are and what you stand for. Be seen and be noticed. After all, a world without innovation and identity is a world that’s going nowhere.


What is Aspire? (and why you need it)

Making the best-uary, of your estuary

“I have a dream…and that dream evolves based on new data and learnings”

Just to clarify in case my attempt at creating a clever headline has confused anyone. Much like rivers flowing into a single point, I’m referring to aligning multiple workstreams and projects into a single vision.

As businesses increasingly compete and challenge each other to reach the top of their respective markets, one of the challenges faced is throwing things at the fan and seeing what sticks. This type of action can have great results but ultimately results in a completely disjointed experience on their website.

These are some of the reasons why, at Eclipse, we offer a programme we call Aspire.

 

What is Aspire?

We all love to dream. We all have our own interpretations of what ‘great’ or ‘next-level’ looks like. This ultimately creates extensive discussions and debates on who is right and who is wrong (hint: neither answer is correct until proven).

The cause of debate is generally around where time, effort and budget should be spent. But let’s wait a moment…let’s take a step back – what is the objective? Is this aimed at a short-term gain or long-term sustainability of the business? Whatever the answer may be, projects often head off in different directions and create a disjointed experience.

Think about it. I’m sure you can remember multiple times when you’ve been on a website and one part of the site feels significantly better/different than the other. “Meh” you may be thinking…as long as it works. This view, I can absolutely tell you, is short-term thinking and can seriously damage your long-term objectives.

This can lead to a stage when you feel you really need to invest heavily in an unplanned redesign of the whole website, or you turn users away as the journey no longer makes sense. You may not even realise it till late on as visitor numbers have gradually (or sharply) declined and you’re not sure why.

Our Aspire programme is about going beyond the short-term. Aspire is about removing all the barriers of today, be that technology, process, budget or limitations to create the best experience you can envisage for your customers.

Aspire is about making you stand out in the market as being the “best of the best”…the “Top Gun!” (apologies Tony Scott). Most importantly, Aspire is about aligning all experiments, changes or parallel workstreams within teams or organisations to ensure everything and everyone is driving towards achieving the same vision.

Whether you’re a single team running multiple channels of experimentation, or multiple teams operating individually, Aspire is here to help you align your workstreams to create consistency from both a UX (User Experience), UI (User Interface) and CX (Customer Experience) perspective.

 

How often should you run Aspire programme?

This is a really important question to ask. Aspire creates this long-term vision, but this is a constantly evolving thing.

As you learn more about how your customers are interacting with your website, and you as a business, this vision will evolve. This can be due to new technology hitting the market, change of circumstance or even changes in the political and public landscape (particularly relevant over the last year).

We monitor this through behavioural analysis using data and predictive patterns. “X has just been announced – how can we mitigate the impact now, so it doesn’t affect us going forward” is just one example of how that may emerge.

 

Cheesy analogy time…

A post like this wouldn’t be the same without a cheesy analogy, so here we go. Think carefully about how you align business objectives. I’ll compare Aspire to rockets and fireworks.

The short-term way of thinking can be seen as a firework. All these channels shooting off in all directions. All are exciting, all are great and can end up providing a beautiful array of colour and success, however, ultimately fade away and come floating down to earth as ash.

Aspire on the other hand is comparable to a rocket. Aspire is your launchpad, that looks beyond the initial excitement of colour and wonderment, to a longer-term future that shoots you into orbit and allows you to stay there.

The Aspire approach can be run as an individual programme, but we aim to use this thinking in everything we do. We consider the pros and cons based on your individual business objectives and goals.

So, if you’d like to have a chat about how this can work for you, give us a call and we’d be more than happy to see how we can help.


Couple working in coffee shop

The Continuing Evolution of Digital Design

Design as a whole has gone through rapid transition since the internet first came around. It’s really easy to look back and laugh at, what used to be, a playground of expression and opportunity for new sales channels without any real guidelines or understanding of users, but it was a different time. Internet speeds were much, much slower. People were still pushing the boundries of what was possible (and still are), but they were also much tighter boundries. So we thought we’d take a look back and see how a couple of the online giants did things back then, how they do it now and how design generally will likely change in the future. We will keep this pretty high level otherwise we may as well release a book.

GOOGLE

Google Beta screenshot

Everyone knows who Google are and what their core service is for now, but do you remember when Google first appeared? Firstly let’s pay attention to the fact there are so many links on the main search page in a bizarre array of turquoise boxes. We couldn’t imagine such noise on the Google homepage now, but back then, remember not many people even knew who they were so this was partly education for new users – some of which would have had very little exposure to the internet before. Clearly they’ve tried hard to further highlight the search bar with an additional grey fill behind the search bar, just in case you didn’t see it. Clearly they still had a playful side back then as they always had the ‘I’m feeling lucky’ button, but realistically it doesn’t add any value other than encouraging people to search and discover more of the internet.

Also note the serif typeface – yes people still use serif fonts now and you can create some beautiful experiences with serif typography, but the selection is much larger now and screen resolutions are significantly better, but back then you didn’t have much choice. Accessibility wasn’t really ‘a mainstream thing’ when Google came about so elements like the contrast between between the link colour and the background wouldn’t have been considered anywhere near to the extent we do today.

When we look back, we should also look at their logo. The emergence of drop shadows, colour and embossing – look at all this cool stuff – let’s use it all. But to recap, as much as we can look back and laugh or cringe, this was all new technology. This was stuff no-one had seen before so it was in some ways, educating the world as to what we can do. And that’s still happening today.

If we look at Google today however, they don’t even need to establish their brand clearly – everyone knows who they are and what they do. In fact, in June 2006 ‘Google’ was added to the Oxford English Dictionary. It’s true – Google it. They don’t even use consistent site branding, instead opting for abstract representations (Google Doodles) of which there are plenty. This is to both further demonstrate their creative muscle and encourage users to actually search for something they may not have considered searching. Other than that however, the page hasn’t actually changed all that much. The search bar is still the hero on the page, but you don’t need to be told what to do anymore – you just do it. Additional links have been down-weighted to the footer and other services hidden in a menu. Developments such as the integration of voice search have made an appearance and now they have user accounts that store huge amounts of data to provide more personalised experiences to users.

Google homepage 2021
Google homepage 2021
Google Doodles
Google 2020

They still have the ‘I’m feeling lucky’ button which I believe is purely for nostalgic reasons. If people come to this page, they’re coming to search for something in particular – they don’t need their hand held in the process. The key difference is the education of how. Users no longer need to be told how to do the basics and the rate of learning is almost second nature too many users. It’s on this basis, that companies will inject more of their own personality and unique experiences in to their sites. Their dominance in the space is evidenced by the fact they don’t even need to show their brand anymore – their Google Doodles have become almost as synonymous as the core logo itself.

AMAZON

The behemoths of online shopping. Love it or hate it, the journey they’ve been on means they can do pretty much anything they like to their site and users will still use it. Much like Google is that dominant force in online search (although Microsoft, Apple and many others are trying to change that), they are the ‘go-to’ marketplace for many online shoppers. They are so dominant, the largest of businesses also sell via their platform due to the sheer number of users visiting their site every day. So let’s see how it’s evolved over time. As before, we’ll focus on the homepage as we could release a series of novels if we went in to too much detail.

The snapshot above is from 1999 and it looks as though the hyperlinks are partying together like it to. What started out as predominantly an online bookshop, has tried desperately hard to highlight they sell other stuff too. Links to music, clothes, software, DVD’s (anyone remember those?) were all on show to entice people into their site, but a clear lack of hierarchy makes it painfully difficult to navigate or understand what to do. Suddenly we are seeing different font weights and sizes which are starting to introduce hierarchy, but structurally it’s all over the place. The times when pages were built with tables were still rife across the internet. But wait – remember users weren’t really familiar with navigation like we are today. We see tabs, burger menus, mega menus and the like – these are second nature to us now, but back then the mainstream may have been just getting used to this. Again – as much as we can look back and cringe, Amazon were also taking the user on an educational journey. Look at all this stuff – you don’t need to leave the house to shop. The whole idea of being able to see physical products on a web page was novel, but the ability to find the products was key. Unlike Google, back then Amazon didn’t really make much of search and it was tucked away in the corner.

The use of gifs, flashes and product images starting to test your 700kbps internet connection but at the time Amazon hadn’t really understood the importance of search as much as Google. And why would they? It wasn’t their primary business, at least it ‘wasn’t’.

Now let’s look at Amazon today.

90s screenshot of Amazon
Amazon 2020

Suddenly Search is clear and prominent right at the top of the page. They realise now that their product catalogue is so large, it would be insane to try and highlight everything to users. People want ‘stuff’, so let’s have them tell us what they’re looking for and we’ll find it. Using the analogy to their origins in books, it’s a bit like asking the librarian if they have a particular novel in. Too much choice needs some assistance. People aren’t patient – they just want to be told how to find what they want in as little time as possible. There are just as many (in fact more) links as there were 10 years ago, but now there are graphics, rich imagery, clean typography and stripped back navigation. But then that brings us to something that Amazon do particularly well – upsell, cross-sell and personalisation. Just to clarify, I’m not a big fan of Amazon. I truly believe if Amazon was created today, it would look and behave completely different. Product names are painfully worded for the search reasons and the gargantuan level of information is daunting and often hard to read. However, they have such an abundance of traffic and data, they have the luxury of running hundreds of experiments at a time, learning more and more about users every second and customising experiences to get users to spend more money faster. Go on to the site now – you’re probably seeing several experiments running at the same time.

Now we’re seeing suggested categories and products, bright vibrant offers, gift ideas, seasonal deals – the list goes on. Users know that an image will usually link to the product. We also have user generated content in the form of reviews and own images – day to day these experiences are both used and expected as a way to buy with confidence. This goes even further when you’re logged in to your account. The level of personalisation is immense from browsing history, to order status and suggested products based on your search history. There are flaws in this however – once you’ve bought a product, you don’t need 100 suggestions of the an alternative product that does the same thing.

Amazon 2020
Amazon Desktop
Amazon screenshot on Tablet
Amazon Tablet
Amazon iPhone screenshot

Then we obviously have the abundance of resolutions across mobile, tablet and desktop. Much more considered thought is now put in to how sites are designed. We wrote a piece a while ago about how users buying behaviours have changed as smartphones hit the mainstream. Desktop shopping came down, mobile shopping went up. With the current climate they are now at around 50% in terms of traffic split as more people work from home. It’s common practice now to create a responsive site that optimises the experience of mobile users. In Amazons case, they’ve done this well, but also have their own native app that ensures you can stay logged in all the time. Spending money has never actually been easier and people have built trust in these retail platforms to do that.

But to recap, as much as we can look back and laugh or cringe, this was all new technology. This was stuff no-one had seen before so it was in some ways, educating the world as to what we can do. And that’s still happening today, but expectations are higher than ever and they’ll continue to rise in the future and we can’t wait to see what’s coming next and push the boundries of the possible. The internet used to be a tool for research and very quicky, became a $3.5 trillion tool for commerce by 2019 and is expected to grow year on year.

THE FUTURE

So what about the future? It’s an old reference that’s been used for years, but the UI in Minority Report was a mind blowing example of how people saw the future of digital interfaces. But let’s be real about this – we spend hours in front of screens every day. There’s no way we’re going to spend this time flailing our arms round to move files or design. Having said that, maybe you have arms of steel, but I believe you would get very tired of it very quickly. So it’s more about evolving UI in to more delightful experiences – I’m sure there will be many more iterations of the examples mentioned above. Creating more immersive experiences and taking advantage of newer technologies such as Augmented Reality, AI and new hardware such as Lidar that is now becoming more and more mainstream with consumer hardware brands.

Online will continue to grow – especially in the current climate and if you’re relying on riding it out or copying a competitor, you will be taking a significant risk. Having your own identity. Making your online sales process as painless as possible. Delighting users with the latest and greatest technology. These are all things that will help build your base and increase loyalty, so don’t leave it too late – your competitors are acting now and you should be too.

SO WHAT ABOUT DESIGN?

Design is obviously a very personal area for everyone. We have our likes, we have our dislikes, there are trends and there are bends (I needed a rhyming word, but I’m referring to slight deviations of trends). When we look at the examples above we can see people were still finding their way, but information was still the king of the swing. Now however, with new technologies, faster speeds, better hardware and higher expectations, simply accessing the information is not enough. The overall experience will have a significant impact on users perceptions of your business, so it needs very careful consideration.

One of the classic references is that of the abundance of skeumorphism. This was the art of making user interfaces look like real world objects. A clock looked like a real clock. A dial looked like something you’d see on a console. This came around with the release of the original iPhone and allowed designs to flex some serious creative muscle. Painstakingly crafting highly detailed icons and textures to the finest degree. At the time, it was great – it was beautiful. However this came to an end as users became more familiar with using these digital interfaces. Suddenly there was no real need to visualise so explicitly what a note file was.

Skeumorphic example
Image source dtelepathy.com

Then came the flat design revolution. Flat design came in and it came in with a bang. Big, bold colours in giant blocks. Regimented grid systems, no shadows or gradients. Just big, solid colour. The problem was that this definitely more of a trend. Suddenly everyones site looked the same and compromised on usability. Nothing really stood out and the overall experience is what I would refer to as ‘beige’. Don’t get me wrong, there were a few out there that did it well, but they were few and far between and I’m kind of glad to see this one fading away. 

Even Apple went all-in on flat for a while in what was quite a uncharacteristically poor design choice in their main OS UI. This ultimately ended up in a very frustrating experience where there was a significant lack of visual hierarchy and hidden menus, that ultimately made the software harder to use. This was evident across lots of websites, but I’ve called this OS example out given it was such a big slip up on a large scale.

iOS settings
Image source vandelaydesign.com

As people came to this realisation, the creative minds of Google came along and introduced the world to material design. This basically took flat design, put some hierarchy and tonality around the use of colour, gradients and depth in the form of shadows (hooray). But this wasn’t like the Google shadows of old which were harsh and jarring in the UI – this was softer and easier to comprehend. Suddenly the reintroduction of depth rose from the ashes of flat design (pun intended). This too, became hugely popular and still is, but designers are now tailoring designs and lending styles together to create an identity of their own.

Material design screenshot
Image source design.google

And this brings me on to an emerging trend – neumorphism. I would personally describe this as a hybrid between neomorphism and material design. Inputs and controls are using the realistic gradients and soft shadows of skeumorphism, but with the control of execution of material design. So it’s not exactly like the real thing, but it does look like something tangible you can interact with in a more simplistic way – designed for digital interfaces.

Neumorphic example
Image courtesy of bashooka.com

As of late, a hybrid has been utilised in the latest iOS adding more depth to the UI and bringing a hint of skeumorphism, neumorphism and transparency, which has now been rolled out to their desktop OS. Personally, I like the return of more life-like and 3D elements that have been introduced but there are some parts of the UI that are arguably less accessible than before. This is a new deployment however, so I expect to see this refined and iterated on in updates over the coming months.

Before you run off and start creating everything like this however, I would err on the side of caution. This is still relatively new and it hasn’t really been refined as a style yet. In examples I’ve seen, some controls are so blended in, they suddenly become almost invisible and unusable. So this still has some way to go to be established as a good approach. Yes – we can create these beautiful UI’s and subdued environments, but we must make sure it’s used in the right way with the bold colour use of material design and the softness of neumorphism. I actually see this as an opportunity to further introduce another level of hierarchy and identity in to UI, if done in the right way.


Man on mobile phone

From Gimmick, To Practical

Over the years we’ve seen several attempts to utilise built-in sensors to hardware to improve the user experience, but this hasn’t often been particularly useful – more of a gimmick. In some instances, there are examples with Smart TVs where hand gestures were tried and occasionally it made sense – you’re sitting several feet away from the screen and you’ve lost your remote down the side of the sofa.

For example, you could take simple actions things like swiping across the screen to change channels one at a time, but realistically how many people do that? There are hundreds (thousands even) of channels and the ones you want to watch are rarely next to each other, so unless you want a 20-minute workout to find your channel, you’re best off just finding the remote!

We then come on to smaller devices such as phones and tablets. Companies have delved into this space before and there are apps available that make gesture controls available, but I still wonder how useful these are. The likes of contactless gestures for example feel somewhat limited in usefulness when the device is in your hand. As a result, I thought I’d look more closely at how you can better utilise built-in sensors and settings of modern hardware to provide a better, more practical user experience in a GUI.

 

Utilising the Proximity Sensors

Proximity sensors are commonly used in devices now for actions such as sleep/wake of the device, making the screen inactive when you put it to your ear. This is to avoid accidental input when on the phone when on a call. However, how could this technology be better used to enhance the user experience?

Well, let’s just start by clarifying I’m not going to talk about swipeable carousels or contactless scrolling. One of the challenges on these smaller devices is balancing the hierarchy of information, providing clear CTAs and ergonomics.

In the world of e-commerce, for example, one of the core things any business wants you to do is add to the basket and checkout easily. However, throw in your upsells/cross-sells and special offers and the list goes on, and it’s easy to dilute the visibility of your key CTA. As a result, if you could make use of the proximity sensor so that the closer your finger was to the screen, you could resize elements (such as the ‘buy’ CTA) to draw attention to them and make it easier for a user to checkout.

The other practical use was in reference to ergonomics. There are typically some hard-to-reach areas which also happen to be common positioning for functions such as the menu and search.

Companies have experimented before in this space by having the ability to pull the top of the browser down closer to the main touch area, based on a combination of taps. The alternative approach to this however is to sense the proximity to the top of the screen and bring the functions in the top corners closer to avoid the user having to adjust their grip to reach.

 

 

The same thing applies to exit intent. Many websites utilise exit intent capture forms based on the positioning of the cursor on a desktop computer but utilising a similar function with the proximity to the ‘back’ button, for example, could serve a similar purpose.

While I’m talking about this, I should stress I’m not saying you would put all of these into one UI. After all, it would be easy to over-complicate the experience and ultimately make your site more confusing, but all could be relevant considerations based on your user stories.

With all this talk of using proximity sensors, however, you start to wonder how you could utilise some of these actions on a desktop too. One simple example would be increasing GUI elements such as CTAs based on the proximity of the cursor. This would provide more fluid awareness of UI elements than that of rollover states.

 

Ambient light sensors

Another sensor built-in to devices is the ambient light sensor. The purpose of this is to adjust the brightness and tone of the screen based on environmental lighting. This reduces glare and eyestrain of the user for a smoother experience. But what if you could read that lighting sensor and actually adjust the UI itself? Some simple CSS work would allow you to optimise your GUI and actually highlight elements in a much clearer way based on the intensity of the ambient lighting.

 

Dark mode

Dark mode is popular with many people now for the same reasons highlighted above regarding eye strain and glare. The other reason, however, is that people just think it looks cool. So, if you could identify a device was in dark mode, it may be worth creating a dark mode for your website. This would provide a seamless transition between OS and website and provide a more consistent experience for those users, encouraging them to spend longer on your site.

 

Camera

Before I get into this last one, I should call out this one is just a bit of fun – there are all sorts of question marks around security and performance, but what if you could use the camera to understand the user’s emotion whilst on your site? You could adjust the UI and tone of voice based on a user’s expression. Maybe you pick up frustration or confusion and you can proactively offer help on-screen. We use facial expression analysis with our biometric lab, but being able to present information, help or UI changes based on a user’s expression would give another level of hyper-personalisation.

 

As technology gets better and expectations rise, we’re always looking for new ways to improve the user experience. Where constant innovation is important for all of us and sometimes it’s just about a bit of fun, we should also look to see how these innovations can be put to more practical use.


What is the Difference between Qualitative and Quantitative Data?

When it comes to analysing the data, there are two types to look into – qualitative and quantitive data. When researching user habits on digital platforms, understanding the difference between the two can really help you get the most out of your data no matter how convoluted.

Quantitive

Quantitive data is the data that is statistical, well structured and defined making it great for data analysis. It is usually gathered from surveys and experiments that yield statistical data. Being so structured and close-ended, you can draw well backed up facts and patterns from the data. Quantitive data will tell you how many people viewed your site, how long they stayed on a page, your bounce rates, page clicks and anything that can be analysed with numbers.

Heatmaps and click maps provide a great visual on how your users are using your website. If you’re tracking eye-movements as we do at Eclipse, you can see how long users looked at a certain section of the site, and what parts of the sites got the most activity and attention. With this data, red indicating high attention areas, you can make decisions on how to structure webpages to make key points of interest more click-worthy.

What it does not tell you, is why the users may have paid more attention to a certain page, and this is where qualitative data comes in handy.

Qualitative

Qualitative data is the ‘why’ behind user behaviours and their motivations. It is not based on the numbers or statistics and is the data usually investigated for creating open-ended conversations. Qualitative data is great for putting yourself in the user’s shoes and finding out information like why they decided to abandon checkout or what made them give a lot of attention to one part of the site. These insights can make sense of the quantitative data we have, for example, we may know that users were not interacting with a CTA and now we know that is because it wasn’t obvious to see that the CTA was something on the page that could have been interacted with. With this data, we can now make decisions to make the CTA more actionable.

Qualitative data can be gathered by asking questions and conversing with the users as they are going through the experiment – something that is made really easy for Eclipse with our completely mobile biometric UX lab 😉 ;). This yields more honest and authentic responses from the users as they are having a human to human conversation and you can query them as they are using the site. With our UX lab, we are also able to track emotional responses and see body language from users going through a website journey, allowing us to get really in-depth data.

When collecting data, understanding qualitative and quantitive data is key. Understanding the psychological motivations of user journeys and being able to back up that data with statistics is a huge benefit to doing any kind of data analysis.


What is a user journey map?

The size of the map can vary greatly depending on the number of steps, the subject (e-commerce, SaaS, service etc) and the complexity of the interaction. However, the outcome pays huge dividends in producing better informed solutions and avoiding retrospective design and engineering.

Mapping out a customer’s experience encourages you to consider every aspect of a persona in terms of emotions, thought process and intentions and is just one of the many tools to inform User-Centred-Design. Analysing the map will provide a deeper understanding of pain points and allow you to better understand the reasons for declining performance or other KPIs.

A carefully considered user journey map helps you identify and understand reasons for declining satisfaction scores or business objectives. Focus is put directly on the users actual experience and provides a comparable view vs the intended experience.

COMPONENTS OF A JOURNEY MAP?


PERSONA GOALS

This is a profile that represents a part of your user base which informs the data within the user journey. Each persona will have different considerations, thoughts and interactions and will steer the user journey and is written as a user story. A user story is deliberately succinct and is provided as a single sentence along the lines of “As a [persona], I want to [goal], so that [benefit].

A carefully considered user journey map helps you identify and understand reasons for declining satisfaction scores or business objectives. 

METRICS

This is a profile that represents a part of your user base which informs the data within the user journey. Each persona will have different considerations, thoughts and interactions and will steer the user journey.

EXPERIENCE

The experience section highlights each stage of the journey, along with the positive and negative feelings that persona has throughout each stage. This provides a high level indication of pain points where there may be opportunity. This can help better inform what the user wants or expects to see at that moment in time, as well as the tonality on how things should be communicated.

MORE DATA

We also apply another level of data from analytics, screen recordings and any other tools that may be in place, that you often don’t find in many other user journey maps. This data may could be anything from conversion rates to time on the screen. Where data such as percentages can provide an idea of aggregated behaviour, duration indicates a level of interest, distraction or confusion at that stage.

Cross referencing this with the other data in the user journey map provides another level of clarity of the issues and (this is an important one), the opportunities in their experience. It’s one thing to identify an issue, it’s another to solve it (we’re pretty good at that too).

Aggregated data of persona using all available data sources.

MOTIVATIONS

Motivations are based around the drivers for that persona. A personas motivations can differ quite dramatically and may be based around their character traits. For example (in its most simplistic form), a persona who is particularly busy and impatient and who may be travelling whilst going through the journey, will be motivated by speed and spending as little time as possible. Whereas, a persona who is casually browsing in their free time is more likely open to spending more time and learning more in the process.

There are multiple scenarios and personas for every product or service, which is what makes these journeys so important. In almost all cases, one size most certainly does not fit all. The fluctuation of these motivations as they go through the process will often rise and fall at each stage of the journey.

Motivation fluctuations at each stage.

USER CONSIDERATIONS

This highlights the considerations a user makes, also based on their persona. This will include aspects such as their character traits, marital status or financial circumstances.

For example, making a major purchase will vary from someone on low income vs someone on high income, therefore this persona would be spending far more time thinking about the financial element. This helps inform your design strategy to design an experience that helps the decision making process of that persona.

Potential blockers to conversion.

OPPORTUNITIES

Opportunities are insights gained from mapping. They will help inform your design decisions to optimise the user experience. When you take all this information at each stage, you are able to understand the best way to deliver the right information, at the right time, to the right people. There may be upsell or cross-sell opportunities depending on where they are in the buying process, or maybe at this particular stage of the journey they have no interest in cross-sell and you can identify ways of helping them through the process.

Wherever the user is in the journey, this provides focus on the opportunities at each stage and make design decisions to capitalise on them.

Potential to change in favour of KPI.

WHY USE A JOURNEY MAP?


Mapping out a customer’s experience encourages you to consider every aspect of a persona in terms of emotions, thought process and intentions and is just one of the many tools to inform User-Centred-Design. Analysing the map will provide a deeper understanding of pain points and allow you to better understand the reasons for declining performance or other KPIs.

A carefully considered user journey map helps you identify and understand reasons for declining satisfaction scores or business objectives. Focus is put directly on the users actual experience and provides a comparable view vs the intended experience.

CONCLUSION


Utilising user journey maps in this way allows focus on each stage of the journey and is just one of the many tools in the UX toolkit, but one that is very important. User journey mapping can be a complex process. As highlighted above, adding any additional data and research, you can access to each persona and journey will more provide a platform for more concise decisions and design better solutions.

There’s also no such thing as ‘done’ when it comes to the personas and journey maps either. These should be revisited, reviewed and updated regularly as economic and social climate changes users online behaviours.

The map above is just one simple example a quick overview of what they contain. Hopefully you’ve found this useful and feel inspired to create your own, but drop us a line if you’d like a little help – we’d love to talk to you.