DevelopmentThe 4 Levels of UX Design

The 4 Levels of UX Design

Knowing a few key things about strategy and tactics makes all the difference between designing a struggling website and a successful one. These examples and tips illustrate successful approaches to UX design that you can apply to your site.

Under the HoodMost people misperceive user experience (UX) as something you simply add to the site after it has been designed. That’s just putting lipstick on the pig. Or, as they say in Maine, “you can’t get there from here.”

Good UX design actually starts before you even build something. Consider the four levels of UX design.

1. Objective

Define observable and measurable business and user objectives, such as conversion rates, to gauge the success of the site. As Lewis Carroll put it: If you don’t know where you are going, any road will get you there.

Defining the objectives sounds easy, but you would be amazed at how many companies have no established objective. I’ve yet to work on any project (out of 250+) that began with an established, codified objective.

2. Strategic

Define the direction the site should take. President Kennedy set a direction for the country in the 1960s to put a man on the moon. You could ask anyone at NASA – an astronaut, an engineer, a manager, a janitor pushing a broom at 3 o’clock in the morning – “what are you doing here?” and they all had the same answer “We’re going to the moon.” That singular vision kept everyone on the same page of the playbook and it worked.

Finding your UX strategy isn’t that easy, especially for a non-UX person. My main goal is to get my clients to agree on a “going to the moon” statement that defines their product.

For instance, when designing the Proflowers website back in 1997, we conducted some observational user research. Instead of watching guys buy flowers online, we visited brick-and-mortar flowers shops to watch men buy flowers.

Interestingly, every online florist required the users to build a bouquet. C’mon. What do guys know about building bouquets? No surprise that the e-florists sold mostly roses.

Rose in hand

When we visited the flower shops, we discovered that guys don’t need flowers, they need a last minute gift to keep them out of the dog house. When asked by the clerk what they needed, they didn’t say, “a bouquet of Dendrobium Orchids, please.” They would say, “I forgot my wife’s birthday and need a nice bouquet to get out of the doghouse.” With that, we defined the Proflowers strategy as: “Proflowers doesn’t sell flowers. They sell occasions.”

That single statement drives every tactical decision in the company to this day. Their website doesn’t force users to build bouquets, just identify the occasion and select from the bouquets provided by Proflowers in each category. Proflowers is a $750 million company and has one of the highest conversion rates, 15 years running.

Implementation-wise, they’ve made some mistakes, but having the right strategy overcomes some of those mistakes. No amount of implementation perfection can overcome a poor (or non-existent) strategy, though.

3. Tactical

Design the site to achieve your strategy. Understand how users expect to perform their task and designing the UI to meet that expectation. This includes navigation structures, usage models, best practice approaches, etc. This is the step where task optimization should occur.

Once you have a clear strategy, you need to apply good tactical design. Some common tactical approaches include:

  • Knowledge Design: Avoid relying on user knowledge and instead guide the users based on your knowledge of the domain. Much of Proflowers’ success is based on the fact that users rely on Proflowers to suggest appropriate bouquets for each occasion. Your user persona should indicate what knowledge your user will have at the beginning of a task. You will need to analyze what knowledge that user will need in order to succeed. The difference is the knowledge gap that your UI will have to bridge in order for your users to succeed. Building knowledge into a design is no simple task, but it’s the difference between a site that merely treads water and one that wins medals.
  • Engagement: Create emotional investment that makes it hard for the user to abandon your site. Getting the user to create something of personal or emotional value on the site (e.g., create a logo design for T-shirts, design a business card, calculate the cost of insurance) goes a long way to building emotional value. This has to be a commitment-free tool. Asking the user to register, first, will make them leave. Give them something for free that creates value, then you can get them to commit to your site.
  • Task-Optimization: This is the most critical aspect of design if you want to achieve world domination. Your UI must not interrupt users when performing their task. Again, it must be invisible. Avoid mimicking existing processes. These processes are largely due to limitations of previous technologies. By failing to optimize the users’ tasks, you’re really just automating current frustrations.

4. Implementation

Most people think of UX only in terms of this last step, putting controls on a page. That’s like saying developers write code and graphic artists draw pictures.

The UX designer does a number of things at the implementation level besides just move buttons around on a screen. One of the key design paradigms is to avoid instructions at all costs.

  • Affordances: Instructions are a symptom, not a solution. A UI should be invisible to the user. Otherwise it interrupts their line of thinking and creates frustration. It’s important that you drive the design to take advantage of the users’ understanding of what you would naturally do with a control. Avoid custom controls. Users don’t know how to use them and the middle of a task is no time to learn how to use a new control. If your UI requires instructions, you have failed.

For instance, how often have you reached for a door handle when leaving a building and pulled on it only to realize the door doesn’t open that way. Then you see it, the little sign that says Push. If something as simple as a door requires instructions, then there’s something inherently wrong with that design. While technically, yes, you can push on a handle, our intuitions and expectations are so strong that we don’t even bother to read the instructions until it’s too late.

Door Handle

Putting a flat panel on that door invites the only correct action, to push. The user can succeed at that task without even realizing that they’ve done it. No instructions necessary.

Door Panel

Designing UI’s isn’t as simple as doors, but you can successfully design complex UI’s that require absolutely no instructions. If the users know their task, they can use your designs. That’s the value of including a good UX person on the design team.

The basic point is that UX is more than just putting lipstick on the pig. It’s something that must be done long before you write any code or add any graphics.

Note that the door handle created a negative user experience while the flat panel created a neutral experience. UX design isn’t always about “delighting” the users. Sometimes it’s just about avoiding any negative experiences.

More importantly, UX design is always about helping the user achieve their objective and solve their problem. Regardless of how pretty your site is, if the user can’t solve their problem, your design has failed.

Summary

Hopefully, you’ll think differently about your site’s UX design heading forward.

The strategic and tactical aspects of UX are foreign to most folks, hence the typical “lipstick on a pig” approach they call UX design. Knowing a few key things about strategy and tactics makes the difference between designing a struggling site and a successful one. The examples and tips above illustrate successful approaches to UX design that you can apply to your site.

One important design approach is incorporating your domain knowledge into a design to help your users succeed beyond their own level of knowledge or skill. This is where many sites fail.

Any site that relies on highly variable user knowledge can only achieve equally variable success, or failure. Identify ways you can guide users to solve their problem and your site will see immediate benefits.

Additionally, providing a commitment-free tool that allows users to create something of personal value increases the emotional engagement a user has with your site. This engagement dramatically increases website conversions.

Don’t relegate UX to a minor add-on at the end of the project. You need to start with UX before writing any code or designing any graphics.

Resources

The 2023 B2B Superpowers Index

whitepaper | Analytics The 2023 B2B Superpowers Index

8m
Data Analytics in Marketing

whitepaper | Analytics Data Analytics in Marketing

10m
The Third-Party Data Deprecation Playbook

whitepaper | Digital Marketing The Third-Party Data Deprecation Playbook

1y
Utilizing Email To Stop Fraud-eCommerce Client Fraud Case Study

whitepaper | Digital Marketing Utilizing Email To Stop Fraud-eCommerce Client Fraud Case Study

1y