User Experience

Overview
_____________________

What’s Important

• UX is how you customize the experience of your users from the moment they discover your brand to the moment they make a purchase — and beyond
• In today’s competitive world, it’s not enough to have a good product — you have to provide a superior experience, too
• According to Forrester, every dollar invested in UX brings in $100 in return
• The top companies in UX outperformed the S&P 500 by 35 percent
• 70 percent of customers are willing to abandon a purchase thanks to poor user experience
• Slow-loading websites cost retailers more than $2 billion in lost sales every year

Introduction
_____________________

User Experience

User experience (UX) and user interface (UI) are used so often together that many people think of them as nearly interchangeable, but the distinction between the two is actually very important. While the two interact and play off one another, they fulfill very different purposes in the software and web development world. UX, in the abstract, is a way of designing a product that thinks of the user first.

We tend to use UX in the digital sense, but it can be applied much more broadly than that. While working at Apple, cognitive scientist Don Norman coined the term “user experience” for his team. Norman’s use of the term at the time was interpreted exactly differently than it is today. His nod to the term user experience has more to do with the focus on the user’s entire experience with the brand through use of the product rather than just the focus on the technological usability. Though the term goes back to the 1990s and inferred something a little different at the time, the whole concept of making things easy to use remains the same.

Even before the term was coined there were a plethora of leaders and visionaries who have imagined an easily-navigated, interconnected world created with the consumer at the forefront. In the 1950s, American industrial engineer Henry Dreyfuss was renowned for designing and improving the usability of some popular consumer products of his time. His design philosophy was based on designing for people, which inspired the title of his 1955 book, Designing for People, where he shared his passionate stance on the concept.

Walt Disney was known for his desire to create innovative, immersive experiences for people even before technology allowed for UX conceptualization – indeed, his vision reached far beyond the capabilities of technology at the time.

Any consumer product, from a car to a sewing machine to a coffee machine, can focus on the experience of the user. However, UX is not focused on the visual elements of a product — that’s the realm of user interface (UI). The overlap is obvious, but not complete. The shape, color, and phrasing of a CTA on a website is a matter of UI, while the fact that it exists in the first place belongs to UX.

Why is UX So Important?

We live in a world of unprecedented choice and variety, but that can be a double-edged sword. For the end-user, it means they’re no longer limited to one or two options based on what’s affordable or nearby. But for businesses, it means that it’s harder than ever to make your brand known among the competition.

As a result, users have grown impatient. If a user is looking for a running shoe and clicks on the first website in the search results, only to find that they can’t actually make a purchase on the site, they’re not going to stick around and find another way. Instead, they’ll jump ship and find the next best, more efficient option.

What this means is that your product, brand, website, app, and every other interaction that your end-users have with your product will need to be as helpful as possible. You need to answer every question your customers have, even if they don’t know they have them. You should guide them toward the information they want, toward making a purchase, or toward getting the help they need.

Guidance to effectively adjust UX design can come from analytical data and metrics; use them to figure out the way your customers roam around your pages. This kind of information can be extremely informative when updating your UX design on your website and social pages.

In short, UX is important because it fulfills the user’s needs. By doing so, you create positive experiences, loyal customers, and business success.

Chapter 1
_____________________

Principles of UX Design

If UX is the process of making the experience better for the user, and we know why that’s so important, then how do you actually go about making it happen? How do you increase the satisfaction of your users — whether they’re website visitors, software users, people who downloaded your mobile app, or anyone else interacting with your product — by making it more functional and easier to use?

There’s really no end to the level of detail we could go into when it comes to optimizing your UX design, but you don’t want to read 100,000 words on the topic, so we’ll stick to the basics.

Provide Context

Navigating your website should be intuitive for users. They should be able to tell where they are on the page, which sections are above and below the section they’re currently looking at, and how to get back to that specific page in the future.

Users should never feel lost or overwhelmed on your site. If they’re struggling to find their way out of an article or navigating in loops, you can almost guarantee they won’t be back again. Remember, you’re guiding users along a journey. You’re not forcing them anywhere they don’t want to go, but you also don’t want them wandering aimlessly. They need a nudge.

Be a Human

For users, it’s very easy to think of brands as faceless entities and forget that there are human beings operating them behind the scenes. As a brand, you need to remind users that you’re not just robots.

The best way to do that is to imbue your brand itself — and, by extension, all the parts of your brand that see customer interaction — with human qualities. Choose a voice and tone, then stick to it in all your communications. Be personable and approachable. Use real language that real people use. Don’t say “contact us at your earliest convenience,” say “get in touch when you’re ready to get started.” Communicate with them as if you would to another human being.

Make Everything Easy to Find

This is similar to the advice on context, but applies more to people’s ability to navigate and explore without help. Sending your customers on a scavenger hunt through your site is only going to frustrate them and cause them to leave quickly. If someone comes to your site and wants to find a list of features or a pricing sheet, it should be intuitive and obvious where that information is.

That means creating hierarchies that reflect the way people organize things in their head, from large categories to small. There will be internal debates about what should go where, which is where you can start to experiment, but the natural flow of information is something you should be considering at all times. One user experience statistic suggests that 46% of online shoppers list not being able to tell what a company does as the reason for leaving a website.

In short, don’t get overly complicated with your site — it’s tempting to throw everything you have at a site in case some of it resonates with your visitors, but that’s more likely to turn overwhelming and drive people away than to actually help them. Take the time to think about the processes your users expect and the things you want them to experience, then visit the site as though you’ve never seen it before.

Design effectively for optimal usability, and think about core features: Is it easy to sign up for the newsletter? Can someone download whitepapers without emailing you for help? Can they find detailed pricing options and important information about the product or service? Streamlining the processes that are most important will help guide visitors along the journey you want them to take.

Chapter 2
_____________________

UX Deliverables

The above represents the basic principles of how your site or software should work. Now, how do you actually do those things? There’s a lot of prep work that goes into creating a site with good UX, so make sure you’re putting the groundwork in before you launch. Here’s where to start.

User Research

User research is probably the most important aspect of creating a user experience. You’re trying to make sure that your users have the best possible experience with your product, but every user is different — you can’t possibly help your users unless you know who they are.

You need to understand your users. Some good, thought-provoking questions you should be asking include:

• What problems are your site users trying to resolve by visiting your site?
• What search terms are your site users using to find solutions to their problems?
• Does your site use these terms on key pages to signal site users?
• What information can you present to lead them to solutions that you provide?
• What product or service features can’t your site users live without?
• Do your site users prefer fast facts or detailed research?

Most of the data you have on your users will come from previous iterations of your site or software — hopefully, you’ve been paying attention to who uses your site, makes purchases, and comes back for repeat business. If you haven’t, or you’re truly launching from scratch, this step becomes educated guesswork.

Buyer Personas

Now that you have your research results and more fully understand your users’ intentions, whether you’re guessing or using real data, you can build a buyer persona for your user market. You might even build several. A buyer persona is a description of your ideal customer — hopefully, it’s not far off from your real customers, but it doesn’t have to be an exact match.

That description can be as detailed or broad as you want, but it will inform virtually everything you do as a brand, so it should have enough information to be actionable.

You should have an idea of your ideal customers’ income level, job title, location, age, and pain points at the very least. If you want a more rounded picture, include things like hobbies, which social media sites they use, whether they check email in the morning or at night, and anything else you think might be relevant. You should have an idea of your ideal customers’ income level, job title, location, age, and pain points at the very least.

Relevance is key. You can add as many pieces of information to your buyer personas as you want, but the point is that they’ll give you useful insights into how to communicate with your customers. If they’re not telling you anything helpful, leave them out.

It’s also a good idea to create negative buyer personas. These are the kind of customers that you don’t want to attract, for a variety of reasons. Maybe their account is too big for your small company to handle. Maybe they don’t have the budget for your services. Maybe they live too far away and the time zones will be a consistent frustration. There will always be customers who aren’t worth the effort to recruit, and it’s worth spelling out who those people are.

Competitor Assessment

The next thing to consider is what your competitors are up to. No brand exists in a vacuum, so there’s someone out there who is directly competing with you for market share in at least part of the services you offer. You need to be paying attention to them.

First, do your best to find out who’s doing well and who’s struggling. If your competitors are publicly traded companies, it should be relatively easy to find earnings statements or check their share price, but that doesn’t give you the whole picture.

In addition to their hard numbers, get a feel for engagement on their social media accounts. Check out their page rankings compared to yours. Do a Google search for various keywords and see who comes up first. Plug their website into site speed tools or SEO dashboards and see how they grade.

Compare feature sets. Your product won’t be a clone of theirs and vice versa, so what are the key differences? Who cares the most about those differences? Why might a customer choose them over you? Sometimes, it’s acceptable to let your competitors take the accounts that you’re not interested in — that’s why we mentioned negative buyer personas earlier.

Finally, pretend to be a customer. Make a list of things your customers might want to do, then try to do those things on your competitor’s website. Sign up for a newsletter or a free trial. Search for a blog post. Download a whitepaper. Find out their pricing structure. Make notes on which parts of the experience are difficult and which parts they’re handling better than you are.

Plan Customer Experiences

It’s a good idea to pretend to be a customer on your own site, too.

Chances are, you haven’t really pored over the front end of the site with an unbiased eye — you might have helped design or build it, but that’s not the same as navigating it.

The whole purpose of your site and UX is to help customers with what they want to accomplish, guiding them in the right direction to meet their goals. So what are those goals? For example:

• Signing up for a newsletter
• Getting someone on the phone to explain the product
• Getting detailed pricing information
• Making or renewing a purchase
• Getting help with onboarding or setting up the purchase
• Inquiring about a problem

This list will vary depending on exactly what you offer, but the point is to think of your website or product in terms of goals, not features. What do your customers want to do, and how can you help them do it?

Information Architecture

The final step of the planning process is how your information is laid out. Some information is more important than others, but there’s no hard and fast rule about how to lay your site out. Every brand will be different, and you’ll use the information you’ve gathered from previous iterations and the process we mentioned above to determine what works for you.

Before you build, you should know what’s front and center and what can be buried deeper in the site. If beating your competitors on price is your top priority, then a detailed pricing table might belong right on the front page. If you pride yourself on your sales staff, you might focus more on CTAs that prompt visitors to call you.

Keep in mind the “three clicks” rule, which states that no piece of information on your site should take more than three clicks to get to from the front page. This isn’t a hard-and-fast rule — if you have a massive database of articles or hundreds of retail SKUs, you might want a more complex sitemap — but the principle is sound. Don’t make it harder to find important information than you absolutely have to.

Keep in mind the “three clicks” rule, which states that no piece of information on your site should take more than three clicks to get to from the front page.

Chapter 3
_____________________

Design Stage

Now that the research, user analysis, and overall structure of your UX refresh is planned out, it’s time to get to the main event: actually designing your site. Until launch, nothing is set in stone, but after extensive time researching and applying your research and analytical data to construct a plan, the design stage should run through relatively smoothly. You can find some important notes below for designing your mockups.

Site Mapping

Your sitemap is an extension of the Information Architecture section of your planning process, only it’s more focused on the visualization of the interconnection of your site’s navigation. When you’re creating your sitemap, you’re essentially creating exactly what it is: a map — presenting a list of each of your accessible pages organized in a hierarchical manner.

This step in the design process is instrumental to the site’s organizational flow. Your user analysis research about their user behavior should significantly influence this process, and essentially make it a little easier for you. In this stage, you will map out the hierarchical structure of the site. As a reflection of your user research, your sitemap will be a great starting point for designers as you continue to build the necessary adjustments to your page.

Building Wireframes

With the sitemap process complete, you and your team can begin building wireframes for your pages. Rather than a focus on navigation of your entire site, wireframes give a clear indication of where content goes and the interaction between pages. Essentially, it’s a two-dimensional design for each specific page on your site and its navigation. Sometimes jumping right into design processes causes people to forget about the usability and functionality for end-users, but wireframes allow for the end-user to be at the forefront of your focus.

Implementing wireframes into your design process saves you a lot of time later on. Rather than making changes in the final draft mockup, you can have plenty of visual elements already laid out. Plus, it’s easier to adapt – restarting a wireframe from scratch isn’t as detrimental as restarting an advanced technical concept design.

Wireframes ensure the practicality of each page on your site – that each page’s functionality and content meet the exact needs of your end-users – without the worry of backtracking on a complicated, technical concept. Not only will you be extremely detail-focused, but you’ll save yourself a lot of time and money later in the development process.

Designing Mockups

Once you’ve visualized your wireframe and figured out how you want certain features and layouts to work, it’s time to put the pieces together for a mockup. Now that your wireframes have helped you structure your site, the mockup will help you put the pieces of that structure into place, giving you an idea of what the final product will look like.

Keep in mind – your mockups are not fully functional – they aren’t clickable, but they do provide you the chance to actually visualize the design of your site. They should allow you to experiment visual representations and features to include, helping you solidify your final decisions regarding color schemes, visual style, typography. A mockup allows you and your team to be creative, putting your wireframes to the visual test, and gives you the opportunity to solidify all of the visual components of your site before any functionality is implemented.

Designing Prototypes

When all of the knots are detangled in your wireframe, it’s time to bring their blueprint to fruition by creating a high-fidelity prototype, or a fully functional prototype. The prototype design is just a simulation; they will lead to usability testing, but the initial user research should already be done. The design should reflect all of your prior design pieces and fit together like a puzzle. Model your prototype to validate your solutions to the problems that your end-users were facing before.

As important as your early research and planning stages are, it’s impossible to be completely correct. We highly recommend doing all of the heavy, necessary research work early, however, your prototype will still serve as a source of research on its own – though near the final stages before launch. Some things that sounded great in theory during your early design process may not be as effective or functional in practice. Proper experimentation, engagement, and testing should be run intensively prior to launch; we recommend even sharing with a test group of users outside of your team so that others can provide honest feedback about their experiences. Double-, even triple-check that your design works effectively and efficiently for your end-users.

Just as with your wireframes and sitemaps, you should create a components library for your prototypes that are easily adaptable for future changes. These additional resources in your prototype help designers work more efficiently; gaining access to an open-source library of customizable, reusable components will help significantly in the present and future development of your site. Take the time early on to create and organize the backend of our site so that moving forward changes can be made efficiently and universally within your team.

Chapter 4
_____________________

Post-Launch Success

Everything we’ve talked about so far is just leading up to the launch of your site or product, but that’s only the beginning of your journey. Every digital product is constantly evolving to meet the changing needs of your customers, and yours will be no exception. Here’s how to make sure you’re keeping up.

Usability Testing

User feedback is information collected both from and about your users to see how they’re reacting to and interacting with various aspects of your site and product. User feedback is one of the most useful pieces of information you have — it drives decision making and planning by UX designers, researchers, web developers, and marketers to make sure the users are having the best possible experience.

To gain insight into the usability of your site, try surveying groups of participants to test out the functionality and flow of your site. Though any feedback is good feedback, it’s important to recognize that these tests are slightly different than simply gaining customer feedback; a customer may be more likely to base their user experience based on their customer experience with you, which wouldn’t be beneficial for this specific test. By surveying participants, you will gain feedback driven by observations of real end-users and their interactions with the design of your site.

User feedback is information collected both from and about your users to see how they’re reacting to and interacting with various aspects of your site and product. User feedback is one of the most useful pieces of information you have — it drives decision making and planning by UX designers, researchers, web developers, and marketers to make sure the users are having the best possible experience.

Quantitative User Testing

Part of the reason that qualitative testing is so important is that it gives you context for quantitative testing that you do later. Let’s say you add a CTA at the bottom of a page that leads customers to a pricing sheet, thereby pushing them farther down the buyer’s journey toward a purchase. Of the people that click on that CTA, 10 percent go on to get a quote and become a sales-qualified lead.

But is 10 percent any good? It’s impossible to say without context. It’s possible that your UX is laid out perfectly and 10 percent is the best you could hope for, or it might be that the funnel isn’t intuitive enough and you could be getting 30 percent conversion if you fixed it. Without asking your customers or A/B testing (more on that in a second), you won’t know whether you’re optimizing your users’ journey through the site.

So what quantitative data should you be collecting? As with everything else, the answer is “it depends.” Every company and brand will find that certain KPIs correlate more strongly with sales than others, and it’ll be up to you to find out what those are. Here are a few to start with:

• Task success rate: the percentage of correctly completed tasks by users. Which tasks will vary, but as long as it has a clearly defined finishing point (like filling out a form to get a quote), you can collect data on the percentage of users that finish it.
• Time on task: simply put, this is how long it takes for a user to complete a task. You might not know how long a task should take, but you can certainly judge whether time on task is getting longer or shorter.
• Search vs. navigation: if you have a relatively simple site, you want people to be able to navigate to the page they want. If you have a complex ecommerce site, you want to make sure your search function gets people where they want to go. Tracking how people find the page they want can give you valuable information about your UX.
• Error rate: if people are consistently filling out forms wrong, it probably means you need to make the form more intuitive. Tracking the rate at which users commit mistakes can tell you where they need the most help.

A/B Testing

A/B testing is one of the best tools you have in your arsenal for finding out where your UX could use improvement.

The basic principle is simple: when a user clicks on your site, they’re served either version A or version B, at random. The user has no idea that there are two versions. You can then track, behind the scenes, whether the users who saw version A or version B did better at certain quantitative or qualitative metrics. If A wins, you make that the default version going forward and test something else.

There’s nothing you can’t test. The two versions could be completely identical except for the wording of one CTA or the spacing of the lines in your body copy. Alternatively, you could create two completely different landing pages that serve the same purpose and see which one gives you more leads. Some popular options for A/B testing might be:

• Headlines: you want a headline that clearly communicates the purpose of the page and inspires people to keep reading. Testing headlines that are long and short, positive and negative, assertive and inquisitive, feature- and benefit-oriented, and so on can give you insights into what your customers like.
• Layout: should the CTA be at the bottom or on the right? Should your hero image be above the headline or below it? Should your customer reviews be front and center or tucked to one side? A/B testing is a good way to find out.
• Copy: don’t go overboard typing up two completely different versions of your site, but you can experiment with the tone, formality, and level of jargon in small blocks of copy to see which ones your users prefer.
• CTAs: there’s an endless amount of debate over what a CTA should look like, so do some experimentation. Try different sizes, colors, copy, text vs. buttons, contrast, and location.
• Forms: it’s easy to measure the conversion rate of a form, which means it’s easy to A/B test them, too. Try long forms with lots of fields of short forms with few fields but multiple pages. Play with the design, structure, and layout. Change which fields are required and which ones aren’t. Mix up the copy that invites people to the form in the first place.
• Media: every site and piece of software will have a visual component, so experiment with what your users respond to. Try images vs. video, sound vs. silent, product- vs. benefit-based, autoplay or not, slideshows vs. static images, and so on.
• UGC: user-generated content can be extremely useful in recruiting new users, so try putting reviews, testimonials, endorsements, influencer content, and media mentions on your page and seeing if they make a difference.
• Examine Short Sessions: One of the most basic metrics for website or app usage is session length. If someone comes to your page from an external link, lingers for 60 seconds, and leaves, you probably haven’t made any impression on them at all. The same goes for users who download an app, open it, and never come back. You might not know exactly what turned them away, but something definitely went wrong.

Using your analytics tools, you can start to tell where and why users are leaving. If users are leaving right after a big interstitial screen pops up telling them to subscribe to your newsletter, that screen is probably the culprit. If users are getting all the way to checkout and balking when asked to register, you might want to consider adding a guest checkout option.

In some cases, you can even use a session recording tool to track the exact steps that people take between their initial visit and the end of their session. Look for correlations and patterns that might help you understand why people end their sessions and how you can get them to stick around longer. You can also compare successful sessions to find out what constitutes a good user experience, then try to guide other users in that direction.

Conclusion
_____________________

The Future of the Web

There was a time when the internet was an afterthought for both businesses and consumers, but that time is long gone. The internet is in constant use by the majority of the population, all over the world.

According to Truelist.co, every $1 invested in UX results in a return between $2 and $100, but only 55% of companies are currently conducting any user experience testing. Meaning, there’s certainly proof of UX’s effectiveness, but many companies aren’t using its capabilities beyond the initial design stage. Analyzing your UX is imperative when it comes to adjusting to current trends and shifting your UX to fit end-user behavior.

With popularity comes competition. There are more and more websites, software products, and apps every day, with wider and wider swaths of the population using them. They have so many options that they’re not going to stick around for a product that’s unintuitive, slow, or confusing — they’re going to leave and find something else.

That’s why the user experience is so important. You simply can’t have a digital presence that creates any friction in the process of guiding end-users toward a purchase. You have to be thinking about the best possible experience for the user at every stage of the process, from the first moment they hear of you to the moment they make a purchase and beyond. It’s critical to stay vigilant when it comes to UX trends — shifts in user behavior are inevitable, and if you don’t design your site to complement those changes, you’re going to feel the difference in lost opportunity. UX isn’t an exact science, but it’s an area you can’t afford to ignore.