ux demystified! - signal · use with your company’s website and other online channels are most...

UX Demystified! Helping you build a great experience with your brand

white paper > UX Demystified! 2

It seems like everybody’s talking UX, or user experience.You’ve probably heard about some sophisticated software package you should be buying right now to monitor or improve UX. Or maybe you’ve seen “UX” getting tacked onto job titles: UX Designer, Mobile UX Analyst, UX Strategist, UX Manager. What does it all mean? And what should you be doing about it?

Here’s the good news: UX doesn’t have to be confusing, expensive or difficult. UX is really about common sense steps that you can easily implement with a little pre-planning. A little effort and attention will pay off in solid ROI. Read on to learn more.

Smart technology is now commonplace, in the hands of discerning consumers with high expectations about functionality. Just having a great presence won’t get the job done. Brands also need to provide a great experience. A positive user experience (UX) is critical to capturing attention and loyalty – to ultimately increase engagement and revenue.

UX describes the quality of a person’s interaction with a system, product or service. We naturally think of UX in terms of technology – iPhones, tablets, websites and software. But it’s not only about our frequent interactions with beloved tech tools and toys. We have tons of daily “user experiences” – things like driving our cars, checking out at the store or microwaving a meal.1

These days, the satisfaction and ease of use with your company’s website and other online channels are most critical to attracting and engaging your customers. In an environment where most visitors will decide within seconds2 whether to stay on a page, you get a fleeting chance to make a strong first impression. UX matters.

In this paper, our team demystifies UX, giving you easy steps to positively impact your business.

What’s InsideGetting to Know UX 3

WOW... UX Increases ROI 4

Keepin’ It Real – UX Tactics 5

Final Thoughts 10


GETTING TO KNOW UX

The purpose of UX

What about usability and user interface? Are those the same as UX?Not quite. There are a number of terms that seem synonymous with user experience, when they are actually components.

What we now know as “user experience” grew out of the disciplines of human factors / ergonomics and user-centered design. Human factors / ergonomics looks at understanding “the interactions among humans and other elements of a system… to optimize human well-being and overall system performance.”4 In his book The Design of Everyday Things5, Donald Norman describes user-centered design as designing products for people, instead of teaching people how to use products. This approach requires time on initial research on users’ needs and wants – which is a central focus for UX.

Top Tip

UX is really pretty

simple. The most

important question

to ask is: how good is the experience your product creates? Imagine

grading a product on

four dimensions, as

shown in the example

below, to get some

quick information

about where you can

improve UX.

ACME Corporation Super New Widget

• Fits a need – A • Is easy to use – D • Is appealing – A • Meets brand expectation – A

The widget gets high marks across three of the dimensions but it’s not easy to use. Back to the drawing board on usability – we still have some work to do on the widget!

USER INTERFACE

What you design on the

screen

USABILITYThe quality

of that interface for users

USER EXPERIENCE

The totality of what the user

experiences through all touchpoints

“ [The] primary function of UX is the development of an architecture that creates a delightful, emotional, and sensory experience. This is why it’s vital to customer experiences and engagement. UX is, among many things, designed to be experiential, affective, useful, productive, and entertaining.”3

– Fast Company


WOW…UX INCREASES ROIDid you know that good UX could help you increase your ROI? The oft-cited “300 million button” case is one drastic example.6 Amazon found that the prospect of having to register before purchasing an item was chasing users away. Changing a button from “register” to “continue” – along with a message saying that registration was not required to check out but might be helpful if you returned – increased sales by 45%. This brought the online retailer an extra $300 million in the year after the change was made.

User experience research company The Nielsen Norman Group says that paying attention to website architecture and design will help to increase ROI for a number of categories:7

Key performance indicator Average improvement across web projects

Sales/conversion rate 87%

Traffic/visitor count 91%

User performance/productivity 112%

Use of specific (desired) features 174%

Top Tip

Making UX an

inherent part of

your design and

development process

is a best practice that

pays. Read on to find

out to do it.

ROI


KEEPIN’ IT REAL – UX TACTICSNow let’s get to the nitty-gritty. We said that UX doesn’t have to be a big ordeal. It can be easy and scalable, with these basic steps.

1. UNDERSTAND YOUR USERS – Who are they? What do they want and need?

Conduct ethnographic research.It’s helpful to understand users in their natural environment. The best way to do this is to observe users “in the wild.” Here’s an example. A marketing team visited five different retailers who sell the company’s crop protection products. They saw how the product was presented on the shelf, sold – and eventually, used. The team asked the retailers what was working and how they liked to learn about new products or features. From those on-site visits, the marketers learned invaluable information such as:

• Growers speak English but many of the people actually applying the products do not. Bilingual instructions would be helpful.

• There are certain times of the year when growers don’t use a laptop for weeks, because they are so involved with their crops in the field. Mobile-only communications are a must for those times of the year.

Conducting on-site research allowed the team to observe behaviors as they happened – and it provided an opportunity for follow-up questions on the spot.

Think you don’t have time for a deep dive into this step? When designing a sales app for a client, Signal team members sat down with the head of sales and watched as he walked through the standard presentation. Total time? One hour.

Gather user preferences/requirements. There are multiple ways to find out more about your users. Use surveys for specific questions and easily quantifiable results (“Which of these six channels do you use most often to learn about our products?”). Consider one-on-one interviews to gather candid information and dig deeper (“Tell me what attracts you to our website.”). And don’t forget the focus group, when you have more general questions (“What kind of experiences have you had with our product?”) and want to stimulate an open discussion with a number of users.

“ As an end user...I really may not even know what I need…if you could please, please read my mind, anticipate my needs, and (above all else) just make it EASY for me to get what I’m looking for, without making me jump through hoops or wade through ‘junk’ I don’t care about, I will be your loyal follower for life.”

– Usabilitygeek.com8


Use personas – if it makes sense.Personas are representations of ideal customers based on your market research and data about existing customers. They provide insight into where to focus your marketing time – and they can help guide your UX efforts. Elements that help craft a persona include customer demographics, behavior patterns, motivations and goals. Personas are valuable because they give you the ability to hone in on the needs of specific users rather than “everyone.” See examples in the sidebar on this page.

2. ESTABLISH BENCHMARKS – How are you doing?

Conduct ethnographic research.Once you understand your users, gather existing data to flesh out your benchmarks for UX. Consider mining the following types of sources: customer support call data, expert feedback and analytics. Think about gathering information for the following categories:

Example personas

JACK owns a small landscaping business. He needs to be able to order replacement parts and have access to resources that will help him safely and properly service his equipment on his own in the field.

PATRICIA is the office manager at a busy medical practice that has two locations. She needs to be able to quickly access internal systems from her desktop, laptop and mobile phone – all with a layer of security.

ANDREW is a student pursuing an MBA in International Business. He needs to use his mobile phone for personal and school emails and to retrieve course material online. He is also very engaged in social media and needs to have access to the latest social apps.

VISUAL DESIGN

How it looks

INTERACTION DESIGN

How it works

CONTENT

What it says and how it sounds

INFORMATION ARCHITECTURE

How it’s organized

FUNCTIONALITY

What it does


Competitive website analysisNow that you have an understanding of your users, you will want to understand the market as well by taking a look at the websites of companies that are competing with your company’s products or services. This may consist of anything from a basic scan to an in-depth exploration – and it will help you to understand best practices and how you can stand out from the crowd.

No matter what level of analysis you choose to do, it should measure these types of things:9

• Efficient navigation

• Organizational clarity

• Clear labeling

• Consistent design

• Matching user expectations

• Effective visual design

• Supporting readability & scanability

• Facilitating user tasks

• Providing help

Analytics, the right wayYou can use analytics

to see WHAT is

happening (“People

are leaving our

website without

signing up”). To

understand WHY,

however, you need to

gather user feedback

(“Why are you

leaving? What would

help you?”). Avoid

making assumptions

based on your

analytics by pairing

data with simple

usability testing.


3. DESIGN, TEST, REPEAT – How is the design working? How can we improve it?

Once you’ve moved into the design phase, it’s helpful to identify issues as early as possible to make implementation smooth. Below, learn about the different ways to test that your users will have the best experience possible. As UX experts like to say, test early and test often.

Wireframing goes beyond the site mapThe site map is a familiar bare-bones diagram of a website’s architecture. It’s a great way to show how information and functionality can be structured. However, it won’t explain how that information will be presented. Most importantly, it won’t show you how users can interact with the information.

To get an accurate blueprint, take a step up from the site map to the wireframe. A wireframe presents an interactive rough draft of a website’s interface that focuses on space allocation, content prioritization and functionality. It typically doesn’t include color, styling or graphics. Wireframes:

• Connect the site’s information architecture to its visual design by showing paths between pages

• Clarify consistent ways for displaying particular types of information on the user interface

• Determine intended functionality in the interface

• Prioritize content through the determination of how much space to allocate to a given item and where that item is located10

Why use wireframes? They save time and money. They’re a great tool for getting everyone on the same page and understanding how your site works – before a designer invests effort in refined layout and design. And, wireframes can show you where your site map is incomplete or faulty, so you can test it and fix it.

Example Sitemap

Example Wireframe


Usability testingIf you do nothing else to improve your UX, conduct usability testing to gather first-hand data from real users. Here are two methods to consider.

• Single-user testing involves a design, a user and a facilitator. Jakob Nielsen, UX consultant, recommends the “thinking aloud” method of usability testing, where a user continuously verbalizes their thoughts as they use a system or product.12 This cheap, flexible method is a great way to gather useful qualitative information. Here’s a video example of the thinking aloud method.13

• Group testing is usually more formal. Participants individually, but simultaneously, perform tasks with one or more moderators assisting. In one example, Signal partnered with a client to conduct group usability testing of two different options for a landing page – measuring success, errors and subjective satisfaction with the page.

Heat mappingInformation about how visitors interact with your website can help you improve your UX – and increase the chances that they will complete actions like signing up for a newsletter or clicking on critical links. Heat mapping software is one way to give you actionable insight into where people are clicking. With heat mapping, you can test the design of your site, see how readable your content is and improve conversions.14

85% of UX problems can

be solved by testing

with 5 users.11

The brighter the color, the more clicks (and attention) a specific area is receiving from users.

https://www.youtube.com/watch?v=nJ2udLjdsx4


A/B testingA/B testing is a technique that allows you to test one design / element against another to see which offers the better experience – and better results.

Many things can be A/B tested15 – it just has to be something that affects visitor behavior, such as:

• Headlines • Links

• Sub-heads • Images

• Paragraph text • Content near the fold

• Testimonials • Social proof

• Call to action text • Media mentions

• Call to action button design • Awards and badges

Many of you have heard about how A/B testing helped Obama’s 2008 campaign raise an extra $60 million16 – simply by testing the media (videos or images) and the call to action text (“Join us now,” “Learn more,” “Sign up,” or “Sign up now”) to find the most effective combination.

You don’t have to be a presidential candidate to get great results from A/B testing. And, it pays to test because sometimes the findings are surprising. When launching SimCity 5, Electronic Arts included a promotional offer ban-ner on its digital pre-order page. EA didn’t see a large increase in pre-orders and decided to conduct A/B testing. Surprisingly, removing the offer banner drove 43.3% more purchases – people just wanted to get to the game!17

Final thoughtsUX demystified: first, start by understanding your users’ needs and desires. Then, set and measure benchmarks – the WHAT that is happening which will drive the WHY you will test later. (You should know where you’re going before you decide how to get there!) Finally, design, test and repeat.

The tools and techniques outlined above are all part of Signal’s everyday toolbox – and we’re delighted to share them with you. Remember, everyone has a little UX expertise in them!

You already appreciate the value of UX if you…19

• Love good design but not poorly designed instructions, menus, signage, maps and so on

• Like to organize things

• Like to streamline the workflow to make your workplace more efficient

• Are the one who spots the typos on the restaurant menu

• Want to design a better solution for problems you see around you

Don’t forget the emotionEmotions are a critical

element in effective

marketing – positive

emotions even

more so. In pleasant

situations, people are

more likely to want

to interact with a

product, even if the UX

could be improved.18

Think about ways

to evoke positive

emotions with media,

design and copy.

http://blog.optimizely.com/2010/11/29/how-obama-raised-60-million-by-running-a-simple-experiment/

Signal7780 Brier Creek ParkwaySuite 415Raleigh, NC 27617

919 474 0330

www.signalinc.com

Signal is a digital agency delivering engaging communications and exceptional experiences to our customers. From dynamic content to integrated campaigns, you’ll enjoy working with us. Our smart, skilled team of strategists, writers, designers and programmers will stop at nothing to give you what you need.

References

1. http://usabilitygeek.com/user-experience/

2. http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

3. http://www.fastcompany.com/1815756/why-user-experience-critical- customer-relationships

4. http://www.iea.cc/whats/index.html

5. http://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654/ ref=sr_1_1?s=books&ie=UTF8&qid=1418245805&sr=1-1&keywords=the+design+of+ everyday+things

6. http://www.uie.com/articles/three_hund_million_button

7. NN/g Report: Usability Return on Investment (ROI)

8. http://usabilitygeek.com/user-experience/

9. http://boxesandarrows.com/competitive-analysis-understanding-the-market-context/

10. http://www.usability.gov/how-to-and-tools/methods/wireframing.html

11. http://blog.dashburst.com/infographic/ux-101-what-is-user-experience/

12. http://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/

13. https://www.youtube.com/watch?v=nJ2udLjdsx4

14. http://www.websitemagazine.com/content/blogs/posts/archive/2011/03/16/heatmaps- it-s-getting-hot-in-here.aspx#sthash.p9pUte0z.dpuf

15. https://vwo.com/ab-testing/

16. http://blog.optimizely.com/2010/11/29/how-obama-raised-60-million-by-running- a-simple-experiment/

17. http://blog.hubspot.com/marketing/a-b-testing-experiments-examples

18. http://www.smashingmagazine.com/2012/07/18/the-personality-layer/

19. http://www.nngroup.com/reports/user-experience-careers/

http://www.signalinc.com

ux demystified! - signal · use with your company’s website and other online channels are most...

Documents