The ABCs of UX and Design

By Peter Hughes September 06, 2017

In today’s product world, it’s practically impossible not to be aware of terms like UX, lean, agile, scrum, MVP, user research and design thinking. This is because products of all stripes increasingly rely on software to enable customers to configure and operate them. And often, this software comes in the form of a website or mobile app. In today’s product world, it’s practically impossible not to be aware of terms like UX, lean, agile, scrum, MVP, user research and design thinking. This is because products of all stripes increasingly rely on software to enable customers to configure and operate them. And often, this software comes in the form of a website or mobile app.

Creating software your customers value, love using and want to buy takes work. You have only to look at your own smartphone to see plenty of apps that you’ve abandoned. You downloaded them because you thought they’d be useful, only to be disappointed. And, like most people, I’m sure there’s software you grumble about using at work or home.

The world of design has its own jargon and practices, which can be confusing if it’s not part of your background. The goal of this article is not to turn you into a designer; instead, it’s to help you make smarter decisions and have more informed interactions with your design and software teams because you’ll have a better idea of what they do and how they work. 

Along the way I hope to:

• Help demystify common jargon 

• Put that jargon into context

• Explain how the key components fit together and when they’re used

• Provide a starting point for learning more

Armed with this knowledge, you’ll be on your way to building better products. Your customers will have an excellent user experience and your business will see benefits too, including taking products to market faster, building software at a lower cost and ultimately reaching profitability more quickly.

What Is UX?

UX stands for user experience and is used to describe the process for designing products based on end-user needs, whether those users are paying customers or people who work in your company. I refer to these end users as customers, as it helps us stay focused on the fact that they are real people and the lifeblood of any business. We need to pay them special attention.

The main goal of UX is to make sure the software you spend time and money building will be something customers want and will pay for. At a high level, the UX design process includes four main areas:


1. Discover and understand what your customers struggle with and the business/market environment

2. Generate design concepts that address customer needs

3. Validate that your concepts hit the mark for customers

4. Finalize design for handover to the programming team

The UX process starts with building a clear understanding of your stakeholders’ requirements, which includes your business goals, your customers’ needs and pain points, and market trends and conditions. Depending on the size and structure of your organization, execution of this will be undertaken by either a product manager, members of the design team or some combination. The important thing to keep in mind is that this process creates a framework that can be utilized to document and validate assumptions based on direct customer feedback. 

From here your designers will begin creating wireframes, bare-bones design concepts for the software. Wireframes are a collection of screen images or basic interactive models (prototypes) that convey how key pages will be structured (placement of images, graphics, text, etc.) and illustrate how customers will be able to execute the main functionality.

In parallel to the wireframe development, the look and feel of the software (the visual design) will also be created. In the later stages of the UX process, the visual design will be merged with the wireframes to provide a strong sense of how the software will actually look. 

The wireframes will be usability tested with your customers to ensure they are progressing in the right direction, and the test results will help the design team refine their ideas as needed. When the wireframes have been successfully validated, they are finalized and documented in a user interface (UI) specification. The programming team takes over from here. Based on the finalized designs, they’ll create the software that your customers will use.

Now let’s look in more detail at what happens in the various steps described above.

Step 1.  Discovery

The key activities in discovery are about understanding and documenting the factors that can influence what your software will do. There will be requirements from your internal stakeholders and from the external customers you’re building your software for that will need to be discovered.

Understanding Stakeholder Requirements

Often, many parties have an influence on your software product. Your design team will need to understand all stakeholder requirements. These can include such things as marketing and sales goals, budgets, launch dates, timing requirements, engineering constraints, logistics and sign-off processes. This information is typically gathered through a series of meetings with the relevant parties.

Understanding Customer Needs and Pain Points

User research is a vital part of the UX process and forms the foundation of the design work to follow. The goal is for immersion in your customers’ environment; this could be at their home, at work or any other place they may use your product. For example, if you have a B2B product, designers would spend time with customers to get a sense of when and where they work and the main tasks they have to complete. And since customers rarely use a software product in isolation, if you already have a product in the market, you will want to understand what customers use your current product for and the ecosystem it fits into. 

In an ideal world with unlimited time in a day, UX and product management would be combined. This is sometimes true in smaller organizations (though it often means one side is shortchanged) but is rare in larger projects. While the product manager has similar goals to the UX designer in terms of wanting to understand the world from the customer’s perspective, as a practical matter a division of labor is often required. For one, product managers often have their hands full with day-to-day issues that occur when dealing with other parts of the organization, such as marketing, sales and engineering. Their research needs are generally focused on understanding user problems. The UX designer needs a deeper look into customer workflows and the end-to-end experience. As such, the UX designer generally performs this type of research. But regardless of how or if the work is divided, both sides will pay critical attention to the results of the user research.

You’ll sometimes hear designers talk about understanding customers’ mental models. This is another way of saying that they are trying to learn how customers think about their world and how they respond to it. Immersion helps designers develop empathy for customers as they start to uncover customer pain points and what’s important to them. This firsthand knowledge is extremely valuable, as it enables your design team to work from a position of fact and not assumption. 

The process of spending time with customers is called contextual inquiry. One of the reasons this is such an important activity is that people often can’t remember all the activities they perform in their work. 

You can miss valuable information if you don’t observe your customers. Watch as they complete core tasks and chime in with questions when they appear to get bogged down or frustrated, or if they do something unexpected. This helps identify nuances that might otherwise be missed if you only relied on conversations, surveys or third-party feedback from sales. 

For example, on a project where my client was developing a book production-management system, I shadowed a book editor as she used her company’s system. She suddenly stopped in the middle of a task and pulled a piece of paper from a drawer. It was a cheat sheet that contained a list of codes she often used but could never remember. Without her list, she would have to log into another system to obtain the codes. Because she was “just doing her job,” she didn’t have to think about the steps she needed to complete. And, as she told me, “It wouldn’t have occurred to me to say anything about my list if you’d asked me to describe what I do; I didn’t think it was important enough to mention.” 

Step 2.  Generate Solution Concepts
Defining Features and Functionality

Once the design team has developed a strong sense of what the target customers’ worlds look like, they can use their research to list the main feature and functions needed to generate the outcomes described inthe scenarios.

Affinity Diagramming

Have you seen pictures of designers with a wall full of Post-it notes and wondered what they were doing? It’s called affinity diagramming, and it’s a great and extremely flexible way to organize your thoughts. Start by writing each option or idea on separate Post-its and place them on a large open surface. Then rearrange them into related groups and name them accordingly. Designers often use this to identify themes from their research observations.

Wireframing/Prototyping

When there’s agreement on the main functionality to be implemented, your UX designers can start to create wireframes or prototype screens that show how your customers will use your software to complete tasks. You can convey a strong sense of the ideas being considered and of task flows with simple sketches.

The aim is to show key elements such as the main navigation/menu options, and the items likely to make up individual screens, including images, links, buttons and the types of information to be displayed. Organizing and prioritizing information, whether it is for the entire software product or for particular screens, is the job of the information architect. For large projects, a specialist may perform this task. However, for many smaller projects this work will be handled by your UX designer.

It’s common for UX designers to come up with several ideas for task flows, and how information might be laid out. If this happens, usability tests can be leveraged to determine which approach, if any, your customers prefer to use. The feedback that’s generated can be used to refine the designs as your knowledge about your customers develops. 

Visual Design

Your graphic design team will work on the visual feel of the software by determining color schemes and elements such as imagery, graphics, fonts, borders, button styling and backgrounds. Their goal is to ensure your software conveys your company’s branding, and that there is a consistent look to your product. At a minimum, a basic style guide will be produced that shows at least a few representative screens that contain the key elements that will be used. All of the graphic details are called out and specified so that as new pages are developed they are graphically consistent. 

Gradually, the interface will become progressively high-res as it matures, meaning that the screens will look increasingly like the final product as the visual design is merged with the underlying foundation.

Step 3.  Validation
Usability Testing

User research is the collection of activities that allow you to understand who your customers are and the world they live in. But as the design process develops, the research you do changes focus. Usability testing is a research technique used to determine whether your design concepts deliver effective solutions to customer problems; it’s about the value they find in your product. These tests are also used to determine the ease of use of your product. Note the order here: Value must come first. Without it, ease of use is moot.

Testing is an important step that is too often overlooked. Until you conduct effective usability tests to check in with your customers, you’ll be creating your software “blind.” Conducting two or three rounds of usability testing during the design phase is key. Tests that are planned well ahead of time have little impact on schedules and can be performed inexpensively. There’s little reason not to conduct them, given what they can reveal.

What Is a Usability Test?

There are many types of usability tests, but the one-on-one test is the most common. The one-on-one usability test gets its name because one customer at a time (and remember, they’re the only one whose opinion counts) is interviewed by a moderator, who also manages the test. The moderator provides the test participant (customer) a series of realistic tasks or scenarios and then asks the customer to carry them out using your product.

Setting Up a Usability Test

When you set up a usability test, the first thing your design team will do is create goals for the first phase. Goals detail what you will test and why, and are based on your earlier user research. Effective goal statements will often include a specific outcome based on the importance of the goal. For example, all participants must be able to successfully complete the checkout process within 60 seconds. This approach has several advantages. First, it helps keep test activities focused. The test won’t be cluttered with questions that are unrelated to your goals. Second, your design team will know whether it has achieved the stated goals, which helps identify where further work may be needed. 

The test plan will include: 

• Test goals

• Features or functions to be tested

• The customer types or segments you plan to test (e.g., experienced vs. novice) 

• Where and when the test will occur

• Key sign-off dates for finalizing decisions 

• Contact information for the test organizer

Recruiting

You can either recruit customers through your own outreach efforts or hire an agency that specializes in recruiting. An agency will charge a recruiting fee for each person they find and schedule them for you. This is a cost separate from any incentive you might give customers for participating in your test, such as cash or a gift card.

You will want approximately five participants from each relevant customer segment. The key to deciding which segments to test comes down to their behavior. For example, if you think that customers who are experienced with your product will behave differently than new customers, then you have two groups to test. Test sessions will typically last about one hour.

Scripts, Tasks and Scenarios

To see if the goals have been achieved, each participant must be presented with the same tasks or scenarios. The moderator will use a script to ensure consistency and mitigate bias. In fact, one of the moderator’s main jobs is to keep bias to a minimum. This means no leading questions, no demonstrations and no commenting on the participant’s feedback. 

Test Materials

The design team will prepare a sequence of screens for each task or scenario that the moderator presents. To run a test, your test materials (design concepts) do not have to be advanced. You can use a simple paper prototype. Don’t wait until you have beautifully polished final designs; test early to save time and money. As your design concepts develop, your tests will use materials that increasingly look like your final product.

Test Day

Before starting each test session, the moderator will ensure that the participant has signed the participant agreement.

During the test, the moderator presents a series of tasks or scenarios and asks the participant to demonstrate what they would do using the available concepts. As the participant works, the moderator will ask them to “think aloud” to help understand how well the concepts are performing. When the participant believes they have completed the task, they will be asked for their thoughts on what they have just done. Between test sessions, and at the end of each test day, the moderator will debrief with the observation team to determine key themes that emerge. 

Reporting

At the end of the test, designers will analyze the results and prepare a brief report to highlight key findings and recommendations. These results are also compared with the stated goals to determine if the design concepts or software were effective or not. The concepts will be adjusted as needed to address any shortfalls.

Step 4.  Finalizing Design
User Interface Specification

After several rounds of developing and refining concepts and then validating them, you should be confident that your team has designed software that your customers will value and want to use. When you have reached a point where you have achieved an effective design solution, it’s time to convert it into working software. This is the programming team’s job.

To facilitate the programmers' work, your designers will produce a user interface specification (UI spec) that the programming team will use to guide their work. It will show the validated screens and detail how the software’s functionality is intended to operate. In a perfect world, the final working software should follow the UI spec faithfully.

The UX Process and Why It Will Benefit You

The ever-increasing and important role that the interface plays in a product’s success requires the product management team to pay close attention to its development. Having access to high-quality UX skills is a necessity. Unfortunately, the huge demand for these skills makes this difficult. The good news is that learning UX fundamentals is usually not a huge stretch for product professionals. 

One of the first signs that you’re on your way is recognizing where you may need to modify and add to your existing processes. In time, you should feel increasingly more confident about what your customers actually need, instead of guessing. With this foundational overview of the UX process that places your customer at the heart of the process, you will significantly increase the likelihood of creating software they will want and pay for.

Check out more articles from this issue of Pragmatic Marketer.

Read Now >

Peter Hughes

Peter Hughes

Peter Hughes has spent more than 20 years conducting usability tests for industry-leading corporations and organizations such as JPMorgan Chase, MetLife, T. Rowe Price, Boeing, Honeywell, Hearst Media, Scholastic, the College Board, Nintendo and The Robert Wood Johnson Foundation. He is founder and lead consultant at Ascest, where he coaches organizations on how to bring the usability testing skills they need in-house and squeeze the most out of those tests. If you have questions about the UX process, email Peter at hello@ascest.com.

Looking for the latest in product and data science? Get our articles, webinars and podcasts.