The S.M.A.R.T. User Experience Strategy

I was a competitive road cyclist for four years. My bikes were good, but my race results were much less impressive. Instead of medals and trophies, all I had to show for it were shaved legs and a farmer’s tan.

Regardless, on the road to becoming a competitive athlete, I followed a rigorous training plan with concrete goals. These goals were specific, measurable, attainable, realistic and timely. With this training plan, I was able to quantitatively and qualitatively assess my progress and adjust my routine to match.

(Image: Stig Nygaard)

In the years since, I’ve hung up my racing jersey and replaced it with a designer’s hat. While wearing this hat, I (and many others) have been told to “create a good user experience.” We’ve heard this in creative briefs, project kick-off meetings and critiques. It may have been a bullet point in a PowerPoint presentation or uttered by someone trying to sell a client or company on the value of their services. But there’s a fundamental problem with stating that your goal is to “create a good user experience.”

It’s not specific, directly measurable, actionable, relevant or trackable. Thus, it will create disagreement and disorganization, sending many projects into chaos. However, we can avoid this by using S.M.A.R.T. goal-setting criteria when defining user and business goals.

Bad Vs. Good Methodology

Before we get started, let’s look at how a poor methodology can derail an entire project.

There was once a project to redesign a significant section of a company’s website. This section introduced visitors to the brand’s history and technology, and analytics indicated that customers who visited this section had a much higher conversion rate. Stakeholders believed that improvements to the content and navigation could result in even higher conversions. This was seen as a golden opportunity to increase sales by improving the awareness and presentation of the brand’s story. Thus, a complete project to redesign this section of the website was born.

Here is a summary of the project from the stakeholders’ perspective:

• High-level project goal
  Increase conversions and sales.
• High-level project strategy
  Leverage the history and technology section of the website.
• High-level project tactic
  Improve the content and navigation of the section to increase user engagement, better communicate the benefits of the products, and drive users into the conversion funnel.

Unfortunately, rather than communicate this to the design team, the goal for this redesigned section of the website was presented as follows:

Create a good user experience.

Sigh. There’s that phrase again.

THE PROBLEM

The designers were given a nebulous tactic masquerading as a goal. This meant that they had minimal understanding of the true objective of the project, which put them in a poor position to understand the problem and to hone the strategy and tactics to solve it.

To make matters worse, the lack of well-defined high-level goals, strategies and tactics made it difficult for the designers to define the architecture of the experience, in turn making it nearly impossible to set user goals and business goals for every page that needed to be designed.

(Image: numberstumper)

To make a long story short, the designers spent four months working through unsuccessful concept pitches and design revisions. The concept behind the designs constantly changed, and the content and features failed to support a cohesive user story. Meanwhile, designers and stakeholders had different expectations of what this section of the website was meant to accomplish, so solutions rarely satisfied both parties. Nobody knew the needs of the user, and the needs of the business were but a neglected thought in the shadow of “creating a good user experience.”

After these four months, there was zero progress. Not only was the project’s situation dire, but the lack of approved and delivered work was eroding the team’s morale. With no concrete user or business goals to satisfy, the team aimlessly pursued a “good user experience.” It was like being told to drive but not given a destination.

THE SOLUTION

I was subsequently pulled into this team as the project and design lead. My first priority was to bring awareness and understanding of the high-level project goals, and then lead the team through a comprehensive exercise to document the user goals. Although we didn’t have access to detailed user studies and customer information to create data-driven personas, we did our best with anecdotal experiences, competitive analyses, and website analytics to create user goals for each page. We then worked with the cross-functional teams to understand the business goals and KPIs.

Using these goals, I led the designers to write thorough content and feature requirements. The benefit to this approach was that all content and features were made to serve documented user or business goals. This encouraged product simplicity and reduced scope creep. These goals and requirements were then reviewed and refined with all stakeholders. Once expectations were universally understood and accepted, the team proceeded to create the architecture, interactions and designs.

This comprehensive methodology took less than three months. But the magic is not the methodology itself, but the discipline to identify concrete goals that satisfy five basic criteria.

UX S.M.A.R.T. Goal Criteria

As I mentioned earlier in my competitive cycling example, my improvement as an athlete was based on goals that each met the five criteria of the S.M.A.R.T. goal-setting technique:

1. Specific,
2. Measurable,
3. Attainable,
4. Realistic,
5. Time-based.

This technique can be applied to documenting the criteria for user goals and business goals:

1. Specific,
2. Measurable,
3. Actionable,
4. Relevant,
5. Trackable.

With these criteria in mind, what would be considered a S.M.A.R.T. goal?

S.M.A.R.T. USER GOAL EXAMPLES

Let’s use the product detail page for a fictional e-commerce website to illustrate. A product detail page is a page on which shoppers can learn more about a product for sale and add it to their shopping cart. It typically includes images of the product, the price, a description, and an “Add to Cart” button. Here is an example from a well-known fruit company:

The product detail page for earbuds in the Apple Store. Notice the images, price, description and “Add to Cart” button.

Based on a competitive analysis of many e-commerce product detail pages (and on personal experience from working with and studying how consumers make purchasing decisions), here are some user goals for the product detail page of a fictional e-commerce website.

Primary user goal (UG1):

I want to learn more about this product’s design, features and specifications to determine whether it fits my budget, needs and preferences.

Secondary user goal (UG2):

I want to purchase this product.

These goals meet the UX S.M.A.R.T. goal criteria because they are:

• Specific
  By stating exactly what the user needs to accomplish, these goals help us maintain scope and stay focused on designing content and functionality that is critical to our user’s success.
• Measurable
  For the primary goal, we can measure clicks to determine how users are engaging with the content. Alternatively, one-on-one interviews or customer surveys could provide qualitative insight into whether your content is relevant to the user’s interests. For the secondary goal, we can measure the percentage of visitors to the page who click “Add to Cart.”
• Actionable
  Because the goal is specific, we can readily identify content and functionality that satisfies the user’s goals. In this example, because users want to learn more about the product’s design, large product images should be included.
• Relevant
  These goals are appropriate for a product detail page, but not for a return policy or terms and conditions page. By keeping the goals highly relevant, the content and features that we introduce to satisfy those goals will be relevant, too.
• Trackable
  There’s no point being measurable if the data cannot be tracked over time. This is essential to determining the immediate, short-term and long-term success of our design and its future iterations.

In contrast, here’s a DUMB user goal:

I want a Web page that’s easy to use. (i.e. I want a good user experience.)

That’s not a witty acronym, and it doesn’t hide the fact that this user goal is not specific, measurable, actionable, relevant or trackable. It fails all five criteria because it fails the first: specificity. A good user experience has many facets, and without targeting a specific aspect of the page or product experience, there’s no action (strategy and tactic) to address it. If a goal is not actionable, then it has no reason to exist because there is no end towards which effort and action can be directed. Similarly, if the goals are not measurable, then there is no way to gauge the successes or failures of our actions, and subsequently no way to understand the product’s performance over time.

S.M.A.R.T. BUSINESS GOAL EXAMPLES

UX S.M.A.R.T. goal criteria can also be applied to business goals. They are particularly relevant because businesses are run by numbers: number of clicks, number of customers, number of dollars, the list of measurable metrics continues. So, let’s take real-life business goals for the same product detail page of our e-commerce website as an example:

Primary business goal (BG1):

We want to increase the ratio of add-to-carts to page views for the product detail page to x%.

Secondary business goal (BG2):

We want to increase cross-sells to y% of total add-to-carts.

Just like the preceding user goal examples, these business goals meet the UX S.M.A.R.T. goal criteria because they are:

• Specific
  By stating exactly what metrics the design needs to affect, these goals help us maintain scope and stay focused on designing content and functionality that will put us in a position to hit our targets.
• Measurable
  For the primary goal of increasing conversions, we can measure the number of page views and how many resulted in an add-to-cart. For the secondary goal of increasing cross-sells, we can measure the number of clicks on cross-selling products.
• Actionable
  Because the goals are specific, we can create more targeted strategies to accomplish them. For the primary goal of increasing add-to-carts, this could mean making the content on the page more relevant to users’ goals, or something as simple as improving the success of the add-to-cart button. For the secondary goal of increasing cross-sells, this could entail changing the visibility of cross-selling items (assuming we have already done a good job of selecting which related products to promote).
• Relevant
  The relevance of this goal depends on the high-level objectives of the project. If the objective is to reduce the number of customer support calls each day, then this goal might not be relevant. But if the objective is to increase total sales revenue across all products, then it is very relevant.
• Trackable
  We can count the number of page views and add-to-carts over an extended period of time.

By contrast, here’s a dumb business goal for the product detail page:

I want to make more money.

This is a poor business goal because it’s not specific and might not be relevant to this page at all. There are many ways to make more money, and without specificity in the strategy to accomplish this, creating a successful plan of action will be much more difficult. Remember, if a goal is not actionable, then it has no reason to exist because there’s no end towards which effort and action can be directed.

UX S.M.A.R.T. Goals Applied

So, now we understand the criteria behind well-defined S.M.A.R.T. goals and have applied them to the user and business goals for the product detail page of a fictional e-commerce website. How can we use this to our advantage as we move forward with the architecture and design of the page?

ASSOCIATED CONTENT AND FEATURE REQUIREMENTS

Because the goals we’ve defined are specific and actionable, we are able to propose content and features that directly satisfy them. Let’s revisit the four high-level goals of our product detail page and attach appropriate requirements to them.

Primary user goal (UG1):

I want to learn more about this product’s design, features and specifications to determine whether it fits my budget, needs and preferences.

Content and features required to satisfy this goal:

• Relevant images that represent the product as a whole;
• Relevant images (such as enlarged views and alternate angles) that show the product in detail;
• General description that provides a brief overview of the product’s purpose and benefits;
• Specifications that are relevant to consumers of this product type;
• Product variations or options (such as color, size);
• Selling price.

Secondary user goal (UG2):

I want to purchase this product.

Content and features required to satisfy this goal:

• Selector for product variations or options;
• Customer satisfaction guarantee (such as return policy, privacy policy);
• Quantity selector;
• “Add to Cart” function.

Primary business goal: (BG1):

We want to increase the ratio of add-to-carts to page views for the product detail page to x%.

Content and features required to satisfy this goal:

• Reference user goal 1,
• Reference user goal 2.

Secondary business goal (BG2):

We want to increase cross-sells to y% of total add-to-carts.

Content and features required to satisfy this goal:

• Related products that the user might also be interested in (for example, if the user is looking at the detail page for a small digital camera, recommend a small case to put it in).

Because everything must serve a documented goal, scope creep during the project’s lifecycle is reduced. This is not to suggest that content and features beyond these goals cannot be included. Components such as global navigation or a site-wide search box might be required even though they are not the purpose of the page. Determining what belongs on a page is admittedly not as black and white as these example might lead one to believe.

That said, setting content and feature requirements based on S.M.A.R.T. goals does help to determine the visual hierarchy of information on the page. This is extremely helpful during the wireframing stage.

A wireframe for the product detail page of a fictional e-commerce website. The user goals (UG1 and UG2) and business goals (BG1 and BG2) correspond to those outlined above.Download the complete wireframe for this example.

As we can see in the above annotated wireframe, the content and features that satisfy primary user and business goals (labelled UG1 and BG1) are more prominent in scale and placement than those that satisfy the secondary goals (UG2 and BG2).

Now, having applied S.M.A.R.T. goals across the planning and architectural phases of a project, we can see the benefits of this UX strategy, as follows:

• Goals are specific, measurable, actionable, relevant and trackable.
• Because the goals are specific and actionable, we can attach appropriate content and feature requirements to each one. Because the goals are relevant, these requirements are relevant, too.
• The hierarchy of the content and features is determined by the hierarchy of the goals that they are attached to. This informs the architecture of the wireframes.

With these benefits in mind, we can begin to understand how this positively affects other stages in the project’s lifecycle:

• Wireframes with well-informed structures and content are solid foundations on which to design higher-fidelity mock-ups.
• Because the goals are measurable and trackable, we can determine the success of the design during testing, learn from it, and make improvements in subsequent iterations.

Ultimately, these all contribute to our ability to understand the problem and craft an appropriate strategy and tactic to solve it. Our discipline in gaining focus in the earliest stages of a project will determine our ability to maintain focus when designing the functional aspects of the product at the end.

Conclusion

A great user experience is the result of setting concrete goals that meet both user goals and business goals. Unfortunately, I have seen many teams kick off a project with nothing more than a goal of, “Let’s create a great UX!” While a noble thing to strive for, it’s not specific, actionable or measurable. It contributes nothing to the planning or design phases, and it is the UX equivalent of a motivational high-five.

(Image: Dickson Fong. Original artwork: Banksy.)

Banksy once said:

“Artwork that is only about wanting to be famous will never make you famous. Fame is a byproduct of doing something else. You don’t go to a restaurant and order a meal because you want to have a shit.”

Likewise, a good user experience is the byproduct of many brand, product, design and development decisions. As designers, we must collaborate with our clients and ensure that we thoroughly understand the needs of their business and target audience. Only then can we be empowered to create appropriate strategies and tactics to achieve them.

So, don’t try to “create a good user experience.” Create a S.M.A.R.T. one.

Five Ways To Prevent Bad Microcopy

You’ve just created the best user experience ever. You had the idea. You sketched it out. You started to build it. Except you’re already in trouble, because you’ve forgotten something: the copy. Specifically, the microcopy.

Microcopy is the text we don’t talk about very often. It’s the label on a form field, a tiny piece of instructional text, or the words on a button. It’s the little text that can make or break your user experience.

If you think you’ve built the best user experience but didn’t make sure the microcopy was spot on, then you haven’t built the best user experience.

With the adoption of agile development and lean UX, we’re often concerned about racing through iterations and getting our products in front of customers. But we can’t forget that design is still about words.

Everyone frets about marketing copy — and they should — but communication doesn’t stop once you’ve sold the user. In some ways, you could argue that words become more important once the marketing experience is done. With most products, users have to be sold to only once — or once in a while — and then they’ll use the core product all the time.

If your microcopy isn’t getting the job done, you’ll lose users — and all the marketing in the world might not get you a second chance.

With that in mind, here are five ways to make sure your website’s microcopy doesn’t end up sinking your UX.

1. Get Out Of Your Own Head And Get To Know The User.

I’m willing to bet that your experience is plastered with internal terminology, especially your labels and navigation. Every company has its own language, which often sneaks onto the website when we’re not careful.

Don’t let it happen. Never assume that what works for you will work for the user.

Here’s a simple way to check whether your microcopy is too internal — or confusing, for that matter.

Let’s assume that you’re running some form of usability testing. (If you’re not, there’s only about a thousand articles out there that will convince you you’re making a mistake, so you don’t need me for that.)

When you’re testing, you probably get caught up in watching how the user interacts with your website and their facial expressions. But instead of simply watching, make a point to really listen to — and take notes on — the actual words the user says during testing. Listen closely to the phrases they utter when describing their actions. After all, you’ve told them to think out loud.

Listen to the inflection in their voice as they read microcopy: Did they say that label or term with a question in their voice? Don’t hesitate to have your moderator follow up on copy. Have them go back and ask the user whether they’ve understood that label.

Take it a step further: Listen to what users say from the moment they walk in the building. Listen to their banter with the moderator, the jokes they make and the words they use to express their frustration or enjoyment.

You’d be surprised by what you can learn about a user and their language set from a comment they make about a cup of coffee. Everything someone says tells you something about them and can inform your copywriting process.

2. The User Is A Person. Talk To Them Like One.

Because brevity is essential on the Web, most of us tend to truncate everything — particularly labels. Labels are great for design. They organize and keep tidy essential parts of a UI, such as navigation and forms.

Unfortunately, labels have an inherent problem: They’re easily subject to a user’s personal context because they don’t provide explanation. They’re on an island in the user’s mind.

Not too long ago, we encountered this problem with a label at TheLadders.

TheLadders is a job-matching service. Like any matching service, we required information to match a user with the right job.

We thought this form was very clear. “Job Goals” is the label we’ve used for our matching criteria for almost 10 years. It’s brief, which helped to keep the navigation neat. But in a recent redesign, we noticed that users kept stumbling when first arriving on the page.

Turns out that people who don’t work in the job-search industry think of job goals as accomplishments they hope to achieve at their job, not as the details of their next job.

(We also fell into the trap covered in the first point: internal terminology = bad.)

So, we made it more conversational: “What job do you want?” Instantly, we could see that users no longer hesitated. Why? Because taking this new line of copy out of context was impossible.

Instead of forcing a label on a form or field for the sake of the UI, use natural language. The experience should be a conversation with the user, not a filing cabinet for them to drudge through.

Most of all, the labels in the navigation shouldn’t be more important than the user’s interaction with the pages that the labels represent.

3. Use Copy As A Guide, Not A Crutch.

“We can fix that with copy.”

I’ve heard this too many times when the UX falls short, and I hate it. If there’s a problem with the design, then fix the design. The best experiences have minimal copy because they’re intuitive. When designing the UX and you find yourself writing a sentence or two to help the user take an action, step back.

Tests have been conducted on readability and on the optimum length of content for understandability since the 1880s. With the rise of the Internet, this story became about line length. Most sources net out between 45 to 75 characters as the ideal line length.

To me, line length is moot, especially with responsive and mobile design. Besides, character counts seem tedious and not very lean.

Instead, I subscribe to the original readability tables of Rudolf Flesch (pictured below), in which sentences with eight words or fewer are regarded as “very easy” to read.

The readability tables of Rudolf Flesch.

It may be an old standard, but it still may be the best measuring stick we have, and it’s the easiest for lean teams to follow. On the Web, we’re shooting for “very easy to read” every time, and we want to be able to communicate with as many people (93%) as possible.

If you can’t explain what a user needs to do in eight words or fewer, then reconsider the design.

Once the user has gotten past the marketing portion of the experience, use copy as a guide to usher them through the product. The best copy on basic UI features, such as a form, will get read but not really noticed. The user absorbs the words and takes the desired action without a hiccup.

4. Treat Every Moment Like A Branding Moment, Even When It’s Not.

There are multiple definitions of a “branding moment.” When we talk about copy in a UX, I define it as a moment when you purposefully inject your brand’s tone and voice into what would normally be a straightforward user interaction.

For example, Foursquare has a lot of great branding moments within its badging system. I unlocked the one below not too long ago. It’s fun and a bit edgy, on point with Foursquare’s brand.

A good job of a branding moment with Foursquare’s brand.

But getting carried away is easy. Think hard before using fun or quirky — or whatever your brand’s voice is — copy in a situation that the user wants and expects to be straightforward.

Your brand’s tone and voice are essential to consider when writing all of your copy, but it should not get in the way of a user who is trying to take action.

Avoid over-branding copy on:

• navigation,
• forms and field labels,
• instructional text,
• selection text (drop-downs, radio buttons),
• buttons.

Consider incorporating your brand’s voice in:

• confirmation messaging,
• rewards (badges, points),
• 404 pages,
• server errors,
• error messaging.

The difference between these lists is simple. In the first list, the user is attempting to take action; the second list is the results of actions.

In the first list, you don’t want to risk confusing users as they try to accomplish something and cause them to abandon. Clarity is essential.

In the second list, you have an opportunity to embrace the user’s success (Foursquare’s “You’re on fire!”) or mitigate a failure (TheLadders 404 page, below) by injecting your brand. You don’t need anything from the user at these points.

TheLadders 404 page.

This isn’t to say that you can’t brand that first list. But if you’re going to do it, test it first. With branding moments, execution is paramount. If you’re unsure, don’t risk it.

By choosing not to brand parts of the experience to keep it simple and easy for the user, you’ll provide an enjoyable experience, which will make your brand stronger. So, every moment is a branding moment. Even when it’s not.

5. If Content Is King, Then Treat Context Like A Queen.

The hot saying right now is “Content is king.” Native advertising, or the integration of relevant content into a natural experience for the purpose of acquisition, is becoming a core offering of many agencies and has spawned a few popular startups.

But without context, content is useless. (And if you’re big on Game of Thrones, then you’ll know that queens have all the real power!)

Whether you’re labeling a form or writing a blog post, you have to either understand the user’s existing context or provide context for them.

A user’s context will define how they interpret the copy on the page. That context could come from anywhere: an email they’ve just read, or something that happened to them when they were eight.

When a user doesn’t have proper context, they get confused. When a user gets confused, they abandon.

If you’re agile and iterative, accounting for a holistic experience adds an additional layer of complexity, in the form of consistency. A simple change to copy on one page could affect 10 other pages. One minute you’re calling something “Job Goals,” and the next you’re changing it to “What job do you want?” Well, where else have you used “Job Goals”?

To better understand the user’s context — and to check for consistency — sit down at least once per iteration and experience your “contextual flow” as the user sees it.

For example, if you have a subscription service, the flow might be something like this:

That’s at least 10 distinct steps in which a user’s context could be created, confirmed or altered.

Sit down, take a breath and wipe your mind of what you know is there. Then start with Google or your home page or wherever the first touch usually happens.

Does your onboarding experience deliver the same promise as your Google ad? Have you described a feature using the same language throughout? Are your labels so subjective that the context gets lost? These are questions to answer as you go through the flow.

Whatever Happens, Don’t Ignore Your Microcopy.

Microcopy often falls victim to personal bias, internal terminology, poor branding, broken contextual flows, time crunches and other factors. Any of these can undermine even the most well-designed UX and the copy within.

Here’s the thing about mistakes with microcopy: They’re so easy to make yet so hard to identify after you’ve made them.

You have a much better chance of stopping the mistakes in advance than of identifying them after the fact. When you’re testing, how often do you think, “Hey, maybe we should change the label on the third field of this form?” You’re wrapped up in other UX mistakes that you know you’ve made. Unfortunately, a repeated pattern of noticeable failure is usually needed in order for microcopy to get updated or even tested.

So, the next time you’re creating or improving an experience, I hope you employ some of the tactics provided here so that you avoid these “easy” mistakes and do right by your microcopy — and by your user.