UX research is delightful. It gives us insights, those sudden little Eureka moments that later, being implemented into apps and websites, resonate with plenty of folks. But research can also be a total bloody nightmare provided that you dig into a ton of raw data with your bare hands.
UX research tools can make your study feel more like a “delight” and less like a “total bloody nightmare”.
Looking for your perfect UX research tool stack? Well, you’ve come to the right place.
Eleken is an agency full of UI/UX designers working for brands of all shapes and sizes. We’ve tried dozens of research apps, and handpicked the ones that are the most helpful, creative, unique, or exceptional. Below you will find the top 8 of our favorite online user research tools –– hopefully, they will be useful for you too.
UX analytics software
Some projects fall into our hands to be designed from scratch, others come for a redesign. For the latter, a design audit process is a must, since we need to figure out what chunks of the current app work smoothly and what are covered with dust. Google Analytics and Hotjar always help us with such insights.
Google Analytics
To improve the overall user experience, at the UX audit step we want to surface as many trouble spots as possible. For these tasks, using Google Analytics for UX is indispensable as ever. It helps to understand how long users stay on a website, what pages they visit and what pages they are missing, what are typical user flows, etc.
Some might argue that Google Analytics for UX designers is overwhelming, but if you know what specific information you need and where to find it within, it is not exactly as unbearable as it seems. You can check it right now — Google has a demo account that you can access and explore the possibilities of this tool.
- Free trial: a full set of basic features is free
- Pricing: a paid version of Google Analytics, known as Google Analytics 360, starts at $150,000 per year
Hotjar
Hotjar, as our designer Maksym calls it, is a “standard in the market of UX analytics”. What does Hotjar do? This tool is all about qualitative data. With its famous heatmaps, Hotjar shows you how users are really experiencing your site without drowning in numbers (this tool teams up perfectly with Google Analytics’ scary quantitative graphs and tables).
Hotjar analytics enables you to look at users’ behavior and to see where they get stuck — those are the UX problem areas that require your attention. You can even run surveys on spot to collect users’ feedback.
- Free trial: Hotjar offers a 15-day trial
- Pricing: starts at $99 per month
UX documentation tools
For designers, the discovery phase of research is the stage of clarifying a lot of things before they start the actual design process. Here are four main questions that usually require attention:
- Do I understand the business and its goals?
- Do I understand the users and their goals?
- Do I understand the market and competition?
- Do I understand the product, its value, and its features?
At this step, the research itself boils down to googling and talking to users and stakeholders, so research tools can hardly help here. However, they can be useful for systematization and visualization of surfaced insights into UX research artifacts.
Notion
Notion is our command center, where we store and constantly update our agency's aggregate wisdom. It is a super-flexible tool that helps to organize project documentation, prepare for interviews with either clients or their product users, accumulate feedback, or simply take notes.
- Free trial: freemium tier limited by 5 team members
- Pricing: for unlimited team members use, pricing starts from $8 per member per month
Google Workspace (Formerly G Suite)
Like any other remote-first company in the world, Eleken uses G-suite products, especially Sheets and Docs, for notes, and for some frameworks.
While most of us have been using Microsoft Office tools for decades to draft everything from school homework to job reports, Google’s web-based toolkit became a total game-changer. You don’t have to download any software or purchase a suite of programs. Simply log in to your Google account from any browser to create a new document, and that’s it.
Needless to mention how convenient is it to access your cloud-based docs online, share and edit them within your team. If you're a personal user of Google, you have probably tried Google Docs, Slides, Forms, etc. They all don’t cost you a dime, which is pretty awesome.
However, if you need over 15 GB of drive space for storage and a custom domain for your email address, you’ll need to pay for a business version called Google Workspace.
- Free trial: free for personal use with basic tools and drive storage of 15 GB
- Pricing: Google Workspace starts at $6 USD per user per month, with extra features and drive storage of 15 GB
Usability testing software
When you’ve just designed anything, you’re a little biased. You need someone to tell you the truth about your results.
Surely you have your team or your customer, your friends, and your mom, but if you want actual users to test your prototype, you may need tools for user testing, like Maze or Lookback.
Maze
Maze is a-mazing remote user testing platform for unmoderated tests. With Maze, you can create and run in-depth usability tests and share them with your testers via a link to get actionable insights. Maze also generates a usability study report instantly so that you can share it with anyone.
It’s handy that the tool integrates directly with Figma, InVision, Marvel, and Sketch, thus, you can import a working prototype directly from the design tool you use. According to our designer Maksym, Maze is his top pick for prototype testing precisely because it works so smoothly with Figma.
Besides unmoderated usability testing, Maze can help with different UX research methods, like card sorting, tree testing, 5-second testing, A/B testing, and more.
- Free trial: there’s a freemium tear for 1 seat and 1 active project
- Pricing: $42 per month for individual designers and $25 per seat per month for teams
Lookback
Lookback is a user experience research platform great for moderated tests, where you're talking to your testers, seeing their reaction to your prototypes, guiding them through the tasks, and getting their feedback in real time.
The tool allows you to broadcast your researches and sync all your customer feedback on a collaborative dashboard to share it with your team and stakeholders. The best part is the ability to add comments right on the seekback while watching and examining the videos.
- Free trial: 14-day free trial
- Pricing: starts at $99 per month
UX research presentation tools
We at Eleken are people who earn a living making brilliant product ideas shine brighter through design. So we’re pretty obsessed with how to present UX research findings in a favorable light.
Our research results can take the form of an empathy map, customer journey map, user flow, value proposition canvas, etc. To create all those visual artifacts nice and quick, sometimes we use Google Slides and Pitch, but most frequently — Miro and Figma.
Miro
There is a lot of magic in the Miro UX tool. If you’re a visual person, like most designers, this app will make the visual parts of your brain shake with delight. We at Eleken love this tool, we even included Miro’s website to the list of our favorite landing pages.
It is a simple and pleasing to the eye collaboration whiteboard that works perfectly as a free-form ideation tool. We use it at the discovery phase of UX research for mood boards, user flows, customer journey maps, UX audit, competitors and feature analysis.
Daria, our UI/UX designer and Miro’s advocate, says she prefers this tool for her research because it’s “cut out for making schemes and models, with an ideal balance between default features and flexibility”.
- Free trial: there’s a freemium option that gives you 3 editable boards
- Pricing: for an unlimited number of boards, prices start at $8 per member per month
Figma
Just recently, Figma enabled switching between different accounts and workspaces, and now, everything about Figma is lovely. Everything.
Since the beginning of (design) time, Photoshop was a universal design tool. About a decade ago, an interface design community packed up their stuff and migrated from Photoshop to Sketch, a product created specifically for collaborative product design teams. Sketch’s preview feature made it easy to showcase prototypes and get feedback. Sketch's autosave feature has given us a sigh of relief.
A bit later Figma arrived to revolutionize the way that design teams collaborate one more time. Figma started very similarly to Sketch, but with one significant difference — the freemium tier. Later, Figma began adding unique killer features, like live collaboration or the before-mentioned feature for switching between different accounts.
Much like Google Docs, Figma allows multiple designers to work with a single document, and it’s probably the main reason why Figma clearly surpasses Sketch now.
We use Figma for UI/UX design, for drawing illustrations and logos, and for almost everything else. Moreover, we use Figma to present the results of UX research. Those presentations may be shown in a prototype view or saved as pdf sequences.
- Free trial: freemium tear for 1 team project
- Pricing: for an unlimited number of projects, the price starts at $12 per editor per month
Wrapping up best tools for UX research
Your best UX research tools are always with you, and for free. That's your ability to think and your ability to talk to users and stakeholders. (Almost) all the rest, called to make your life easier, is available for trial or in a freemium version. So, if you’ve met anything new on our list, why not try now?
For more on UX research in all its glory, read our in-depth post about the UX research process that teaches designers, product owners, and anyone who is not a full-time researcher how to perfectly fit studying activities into your product design context.
Top Stories
Tips for better UX Readability: Dos and Don'ts
Designing the great looking user interfaces is only half the battle for grabbing and keeping users’ attention. Your design must also be readable and legible. You can have the most visually appealing user interface in the world but if users have to struggle to read or understand it, they'll quickly become frustrated and leave.
Eleken designers are passionate about flawless user experiences. That’s why we know a bit about good UX readability and would like to share some tips on how to improve it in this article. But first, let’s briefly recap what we mean by UX readability.
What is UX readability?
In a nutshell, readability in UX answers the question whether your website elements are easy to follow, understand, and clearly recognized by all users.
But when diving into this topic it’s important to understand the difference between readability and legibility. Legibility defines how typeface characters are easy to distinguish and read, or in other words, a visual text clarity . Meanwhile readability refers to the complexity of words in written content.
From a UX designer's standpoint, however, the readability definition is broader and applies to the clarity of both text and graphics on the page, how they work together and look on the page. With better readability, design has the power to keep users engaged or scare them away.
The purpose of UX readability was best caught by Typographica:
The term readability doesn't ask simply “Can you read it?” or “How fast can you read it?” It also asks “Do you want to read it?”
A good UX readability also means that the content of your product is accessible to different groups of users equally. For example, color blindness affects 4.5% of the population and 2.2 billion people live with impaired vision. Every designer realizing the importance of readability should be aware of these issues when creating user interfaces. The ability to distinguish good and bad readability is also an important skill.
How to know if the UI is unreadable?
We strongly advise testing your prototype for readability before moving on to designing the actual product. Usually experienced designers can point out fonts or graphics that look repulsive right away. And sometimes it’s so obvious that anyone can tell that a website readability could be better. For example, take a look at the image below - do you want to read it? I personally have doubts.
You can go through five checkpoints to spot bad readability:
- Size and width of the font. Imbalance in fonts is the first sign of bad readability.
- Height and width of the line. Too long lines, or those that require scrolling, or extra effort lead to bad readability.
- Case type. It’s best to mix capitalized or lower-case letters for better readability.
- Color of the text. Poor color choice or colors that mismatch the background instantly ruin the readability.
- Contrast. High contrast between font and background colors make the text unreadable.
If the readability is poor it makes sense to reconsider the design. Changes depend on the screen size, screen technology, screen contrast, font size, color, and style of the text. Such optimizations can improve readability and user experience in general. But before that, let’s talk about typography.
The crucial role of fonts in readability
Fonts are one of the most important factors influencing readability. Typography is an art of arranging letters of the text in order to make written content readable and visually appealing. It is the whole big field in design so, unfortunately, there’s no single recipe on which fonts to use for great readability.
Some fonts are good for longreads, others are good for titles and headings. Some work better in small or big font sizes, in printed or digital format, and some are just outdated. Skilled designers always keep the subtle balance between modern trends and user needs.
But it’s not just fonts that make your product readable. We have prepared some tips that will help you create a better experience for your users.
10 tips on how you can improve UX readability of your product or website
These are some tips that will definitely help you increase readability and legibility. Ironically enough, we illustrate them with examples of how readable interfaces should NOT look like. Ready?
1. Use fonts wisely. Remember that different fonts work better in different sizes. Avoid too complex fonts or too popular fonts, as they are everywhere and annoy users. For example, once popular gothic fonts or Comic Sans are way out of fashion today and easily spotted by users.
2. Use fonts that are easy to read on your users’ screens. This is especially true for mobile devices, where screens are much smaller than those on desktop computers, and you have a lot less room to present information, so you need to pick a font carefully.
3. Choose colors that are distinct from the background, but avoid too high contrast. Color choice is important since it allows us to highlight certain information while de-emphasizing other things.
4. Keep visual hierarchy. Break up text within each screen with headings and subheadings, as well as pictures and graphics to ease the reading experience.
5. Keep line length short enough so that users don't need to scroll horizontally across the page when reading a line of text (ideally, no more than 70 characters per line).
6. Don't use too many fonts within each screen - stick to one or two at most.
7. Choose a font with both uppercase (capital) and lowercase letters and avoid capitals lock effect.
8. Noisy backgrounds can make even the best font illegible. Be very careful with video backgrounds as they can have the same noisy effect.
For example, check out the image above. It’s a Single Earth website that overall has great readability. But on this webpage, the text accidentally overlapped with the text on the speaker's hoodie creating such a noisy background and decreasing readability.
9. Spacing around text blocks is equally important. Cluttered blocks of content frustrate users. Give them some space to better digest information you are presenting.
10. Keep your users in mind. Take into account their background, reading skills, level of interest, an environment they read in. And don’t forget about accessibility-make sure the designs of your product can be perceived not just through color alone, that text can be read by users with imperfect vision and is accessible to senior users as well as to other groups.
In short, keep things distinct, mind spacing around text, use legible fonts and font sizes and match them with the most suitable backgrounds. You’ll know the readability is good once you see it.
Great UX readability examples
After all those examples of bad readability in the previous paragraph let your eyes rest. Enjoy examples of good user interface readability and get inspired for your own projects.
Refera
Recently our team made a redesign for Refera, a dental management platform. The medical management digital product has quite complex functionality, so readability here is extremely important and helps users navigate the platform.
We used delicate light green shading to highlight the buttons. Text blocks are organized with frames which helps to distinguish interface elements easier.
Eleken designers have chosen Plus Jakarta Sans font for both landing page and the platform. The test hierarchy and separate text blocks create a spacious effect. All these aspects do not overwhelm, but comfort users of the product and provide great readability.
Mindist.io
Young startup Mindist.io has built an app for mindfulness creators. Pay attention to the application’s Start page. To create a more relaxing mood, it has a nature photo in the background. The subtle dimming effect in the picture and well-chosen legible font in bright white provide perfect readability and effortless user experience as a result.
Readable
Readable is an online tool for readability testing that works with Nasa, Netflix, Harvard University and others. No wonder their website readability is flawless. Structured, spacious, and appealing to users, starting from blocks of content to fonts and color choice, hats off to their designers!
Conclusion
In the modern digital era, when written and graphic content are more mixed and users are overwhelmed with the number of interfaces they interact every day, good UX readability is more important than ever.
Readability is just a part of the equation for a successful product. But it’s what your users will see first. Make everything else work in its favor.
Our designers compromise neither readability nor aesthetics. We will help you create readable interfaces and design a product your users will love. Drop us a line and let’s discuss details.
Customer Journey Map Examples to Get Some Fresh Ideas
When you are done with research and already got lost in templates, it is time to see what other customer journey maps look like. Chances are that you want to see some examples before you even started. That is natural.
As a design agency, we create customer journey maps for a wide variety of clients, from dating apps to CRM platforms. What we learned from that is how different those maps are in each individual case.
Why you need to tailor your customer journey map (cjm)
If this is the first cjm you are building ever, you are likely to be tempted to make that eye candy with colored icons, graphs, and pictures. On the other hand, it makes perfect sense to start with a basic customer journey map that would have all the essential information and be a great practical tool for your product. We’ve got few examples of both visually appealing and effective customer journey maps.
There are so many parameters and metrics that you may want to include in your customer journey map. There is no single right way to do this. When you follow all the steps correctly, your cjm will take its own shape. You can insert statistics, research data, quotes, and videos if you find that helpful. The information you include in it and overall look depends on your product and personal vision.
Customer journey map examples
Basic customer journey map
Let’s start with mapping an experience that everyone probably had in their lives: buying shoes.
As you can tell, the customer journey map divides the process of buying into clear stages that include buyer's activities, emotions, problems, user and organizational goals, etc. All the information is clear and easy to read, the graph shows top and down moments of the journey.
Now let’s take a look at what other businesses’ cjms may look like.
Online shopping
Ecommerce is one of those kinds of businesses that would benefit most from creating a customer journey map. Here is an example from research made for Walmart, based on a representative selection of customers (you can clearly see they did great research work with real clients by the number of problematic points shown on the map).
Bigger circles show the issues that are more important to the customer: simple but effective visual solution that helps to draw attention to the most critical points without overcrowding the map with data.
Telecom
Here is a nice and clean telecom provider customer journey map. The stages are similar to the previous product purchase cjm, but this one involves calling and waiting for the installation, which is the most painful moment.
Note how the thoughts and feelings of the persona are located above everything – even the stages of the journey! That is a true sign of a human-centered design approach.
Unlike many others, this map is realistic in showing that the process of choice is not always direct and linear: look at “go back” arrows marking the long process of picking the right provider out of all the offers.
The map has two graphs: one showing emotion throughout the journey, and another showing emotion toward the vendor. Still, the image is clear and not overcrowded with symbols.
Curiously, colors seem to match perfectly the picture of Gwen, the persona. However, low contrast may be hard to read for some people, so be careful with those nice pastel palettes.
Travel
Online travel agencies, booking services, hotels - all these businesses open up wide opportunities for customer journey maps. The moment of purchase here is just a tiny dot in a long story that may be hard to fit into one comprehensive document. The example shows a hotel guest journey shown from both sides: what tools a client uses and the business on each stage. LoungeUp is a guest engagement platform, so for them, the hotel experience is as important as the guest experience.
In the travel and entertainment industry, customer journey maps can grow into something unexpected, as the main product is often a highly intangible thing: emotions, adventures, fun time.
There is a well-known legend of how Airbnb founders were inspired by Disney’s creation of Snow White. It was the first long cartoon at a time, and to draw it consistently, they made a storyboard.
The founders of Airbnb looked up to the movies that showed examples of perfect trips. So, they made a storyboard depicting their clients' experiences. Then Rebecca Sinclair, the Head of User Experience at Airbnb, built an actual customer journey map based on the storyboard. That is when it came clear that the main product was the experience that people have when traveling or hosting, not the moment of booking the place on the website. This insight defined their strategies for years ahead.
If you want to learn more on how Airbnb shaped great user experiences, read our article about design thinking.
There is a lot to learn from this example. When you are working with something less technical and more experience-like, consider adding storyboards. You can even insert colorful photos in the storyboard to give it a flavor of a real trip.
There are more movie-inspired elements that help to bring the elements of storytelling to your customer journey mapping to make it more immersive. Jim Tincher, founder and mapper-in-chief of Heart of the Customer says that pieces of video interviews included in the customer journey map make a lot for empathizing with your clients.
Banking
In such a complex business as banking, a separate customer journey map is needed for all the different services and personas, and the cjm for an individual account holder and cjm for a business account can't be the same.
Take a look at this template. The persona is an individual using an online banking service. For sure, you may want to include way more metrics in your customer journey map, and more details, but the template has all the basic stages: discovery, purchase, usage... And there is one interesting thing about this example: the end-stage is Unsubscribe. This is such a breath of realism in the often idealistic customer journey mapping process.
Health insurance
This customer journey map template for a young family looking for health insurance shows very precise levels of satisfaction and the importance of each touchpoint. You can surely see how users were involved in the process and gave detailed feedback.
Still, this example shows only the beginning of a long (lifelong, hopefully) journey of a health insurance service client. Their journey surely does not end at the moment of purchase. However, if the objective of your customer journey map is to answer a specific question related to the sales funnel, a shortened version would do the job.
Coffee shop
The service industry is highly oriented at the customer experience, as well as hospitality. Let’s take a look at the customer journey map of Starbucks, as an example.
What we see here is a basic customer journey map of a coffee shop guest who is coming to the shop to work. Some ups and downs in the experience, with detailed thoughts and feelings of the client, revealing things familiar to everyone who has ever visited Starbucks. Now, let’s see the second version.
This is a different Starbucks customer journey map, showing three scenarios of coffee shop client interaction. It is an interesting example. This map was built to answer a very concrete question: what are the risks of virus contagion in a coffee shop? So, this student work addresses a real problem, and for that, the minimum information is enough.
Also, the visuals work well here: there is no need to get an icon for every action, but some little sketches make the map look more interesting.
SaaS
Our design agency is focused on SaaS, so these are the cjms that we work with all the time. Check out our article about SaaS customer journey.
This map made for Midigator is a great example of how to make a comprehensive and visually appealing cjm without using pictures, icons, and complicated design. Take a closer look if you need a B2B customer journey map.
It includes department breakdown: for a big company, it is crucial to understand which department is involved in every stage of the customer journey. All the client data points that are relevant to each stage are listed as well. If you feel like you need to include some data that is not on the standard list of cjm elements, feel free to do it. Customizing is essential here.
Note that the journey does not end with the purchase, it goes as far as the Loyalty & Advocacy stage. That is what many people overlook when creating customer journey maps. Here is what Annette Franz, the CEO of CX Journey Inc, said about that:
“There are so many businesses who think that the sale is it. And that the customer experience ends at the sale. But it really is only just beginning.”
Annette Franz
Experience wheel
For SaaS, as well as some other businesses, the circular formula of customer journey map would work best, as it reflects the specifics of subscription and the importance of lifelong relations with the clients. This round-shaped diagram is also called an experience wheel.
To sum up
There is no perfect formula for a customer journey map. Well, it exists, but you won’t find it on Google. It all depends on what your business is about and, no less important, what is the question you are trying to get answered.
We encourage you not to rely too much on templates and go through all the steps of creating a customer journey map from scratch, starting with deep research. And when you are done with that, visualization will be easy. Check out our list of the best tools for customer journey mapping.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
