Regardless of the product or service being designed, the user experience (UX) is an essential component of the design process. Because the quality of the user experience is still the most important factor in determining the success of a product or service, the significance of developing a good user experience (UX) is pretty impossible to overstate. 

So, what exactly does “UX” mean? What are the fundamental tenets of user experience design, and what characteristics define an excellent encounter with a brand? Whether you’re an industry veteran or a newcomer, it's always beneficial to look at the fundamentals of what our line of work entails. If you’re unfamiliar with user experience design or are a stakeholder who wants to gain a better understanding of its significance, this is for you too. In this article, we'll be covering the fundamentals of user experience design from our perspective.

What Is UX?

UX, or user experience, is a fundamental principle in product design that describes how a person (the user) interacts with and experiences a product, service, or system. The term "UX" stands for "user experience." It also includes the user's perceptions of the ease of use, efficiency, and utility of the product, service, or system in comparison to other similar offerings. In general, “the user experience” refers to all the interactions that take place during a person’s first awareness of a product and subsequent touchpoints throughout that product, all the way to final off-boarding after their decision to stop engaging with a product.  

Arguably, anyone that touches the product at some point of the product cycle could be considered a contributor to the user experience: product managers, researchers, engineers, content writers to name a few. But per industry standards, UX designers have the role responsible for collaborating with product, engineering, content and research to unpack a problem space, identify functional and experience requirements, ideate and validate solutions. In simple terms, they do the necessary work to determine what options a user will be presented with, how a user will interact with those options, as well as how it will be organized and visually presented to them.

What Happens During a UX Project?

Now that we've gotten the definition of user experience (UX) out of the way, let's look at what UX designers do day to day.

The user experience design process includes a number of deliverables that are provided by UX designers in order to improve communication with the teams and stakeholders involved. These documents are used as implementation guides or points of reference for the team as they design the product. They’re a way for teams to think and align.  They also function as tools that can be displayed during brainstorming sessions or meetings with stakeholders.

Whether the work is on an existing product or developing a brand new one, there are ten common deliverables that are usually seen on a UX project. Let’s go through ‘em. 

1. Business Goals and Technical Specs

Before a designer can start planning the overall design of a product, they need to understand why it's being developed in the first place. It’s important for a good designer to quickly develop a deep understanding of the product’s mission from a business perspective.

Designers should be able to answer a couple of key questions: 

1. What problem does the product solve?
2. How does the product solve that problem?
3. Who does it solve that problem for? 

The Business Goals and Technical Specs document should speak clearly to each of these questions without getting too lost in the weeds. One full page of info should suffice.

2. Competitive Analysis Report

With a solid understanding of the product in place, the design team can go about identifying where the product fits into the existing market. They dive deep into the current market to understand where similar products and services thrive or fall short. This gives the team a clear picture of the product’s competitive advantage. 

Competitive Analysis Reports identify the top competitors to the product (normally five) and describe what those products are doing right and wrong. These reports help provide a direction for where the product design should go, alongside clearly defined goals and specific areas of focus through the design process.

3. Personas and UX Research Reports

A well-developed user research plan communicates the aims of the user research as well as the methods that will be used to gather information.

Teams often create representations or “personas” of a product's user base that include a clear description of their goals, needs, interests and emotions.. This provides a definite idea of a user's wants and needs and helps teams develop a sense of empathy for the people who use the product.

In this phase, activities like "Journey Mapping" and "Empathy Mapping" come into play as design teams chart out the pain points, emotions,  key moments and opportunities within the user’s journey. This produces detailed documentation of friction points and important steps that design teams can use as guideposts when working on the product. 

Sometimes, at the end of the research process, a report is drawn up to explain the findings of the research in understandable terms, and lay out future actions that need to be taken. Those actionable steps take into account the business and technical requirements to create a strategic plan that will deliver on the business goals. 

4. Sitemaps and Information Architecture

Information Architecture (IA) is a fundamental part of the UX equation and is a massive area of design in general. It refers to the hierarchy and presentation of information within a product. 

When there are points of friction in the IA, design teams will sometimes create a sitemap in order to help them visualize those paint points and solve the problem. Sitemaps help to reveal and communicate the information architecture in a way that teams can understand and iterate upon. 

5. Experience Maps, User Journeys, and User Flows

Experience maps, user journeys and user flows have a russian doll-like relationship with one another.

Experience Maps are generally the highest level visual representation of user journeys and user flows within a product. They place an emphasis on user wants and needs, thoughts and feelings, expectations, pain points, and overall time spent on the various aspects of the product. These are typically illustrated on a linear timeline with the various touchpoints between the product and its user.

User journeys and user flows both drill down to define the steps the user takes, and demonstrate the ways a user interacts with a product. The difference between the two lies in scale.  User flows are more granular, communicating the specific steps to accomplish one task. User Journeys communicate a bigger picture of the entire user experience. A User Journey Map may contain multiple flows within it. 

6. Wireframes

Wireframes are a foundational part of design thinking and the UX process.

Wireframes are low fidelity visual representations of the various key components of a product. They act as a blueprint that represents the various elements and features of a product's interface or overall design. Wireframes could be considered UX "sketches" that operate as a layout tool that defines the content spacing, functionality, information architecture, and intended user behaviors. They also show the different user flows as they work through the product during different scenarios.

Again, wireframing is a key step in the UX design process, and it's a cost-effective method of ideation and concept generation to begin addressing user goals. They're another great tool that acts as a focal point for conversations with team members, other teams, and stakeholders to discuss the product's design direction. Because they're so flexible and easy to produce, wireframes save money by preventing oversight in the future. 

7. Interactive Prototypes

This is when the sketches come to life. Once the wireframing process is complete, the interactive prototype is created to demonstrate actual usage of a product. It's the closest thing to a final product as it should mimic the actual experience as a user would have with it.

Interactive prototypes are also referred to as "clickable wireframes" and are usually in their final, near-finished form, although the process could happen during any step of the iterative process. Unlike wireframing, prototypes are able to exhibit how the product will behave and how everything drawn up during the site-mapping and wireframing process actually connects to each other. They are the ultimate communication tool that UX designers can wield to showcase the product's design at any stage of the design process.

Having a prototype in hand can sometimes improve user testing. Because they’re interactive, near-finished products, UX designers won't have to rely on their testers’ imagination of a product. They can watch interactions in real-time which can be valuable if the situation warrants it. Prototypes are also particularly useful in showing concepts to stakeholders in order to spur imagination and inspire. 

8. Visual Design

Visual design is the core aspect of a product’s User Interface (UI). The nuts and bolts of the design have been built. 

It’s common for UX projects to contain a visual component. That means, in addition to designing the functionality of an app or steps in a user flow, design agencies like us will also create or update the visual aesthetic. Things such as colors, buttons, typeface, iconography may need to be refreshed or we might have to start from scratch. It really depends on the needs of the client and what currently exists within their product ecosystem

Visual design consideration typically begins at the beginning of a UX project. As we dive into user goals and technical requirements, we also unpack the brand expression and how to best represent components visually on the page, taking into account core principles such as text hierarchy, primary and secondary colors and their usage, visual elements that could help with cognitive gravity and flow throughout the product, and/or atomic-level elements that elevate the overall visual aesthetic within the experience..

9. Styleguide and Component Library

Before handing the product off to development, a style guide is created as one-stop resource for all the colors, typography, iconography and key components. Styleguides make it easy to apply visual design to any future workflow and ensure consistency across the brand. 

The specificity of the styleguide depends on the deliverables laid out at the beginning of the project. They can include everything from design principles, copy language, rulesets for data display, specific UI behaviors, motion design and more.

10. Usability Testing and Usage Analytics Reports

The work may have been handed off, but design is never done. Once a product has been launched, iterations on existing features and planning for the future are always in progress. 

As we said, testing happens at any and all times of a product’s lifespan. Once the product is out in the market, usability tests inform how everything is working out in the real world. 

Usage analytics pull information from different data capture sources so that growth can be tracked over time. Heatmapping, for instance, catalogs how users click, scroll and move throughout a page.  There’s even software that can track users’ eye movement to help designers understand how they interpret information on-screen. 

All this data is compiled into an analytics report which will describe user's favorite features, how much time they spend using the product, and trends over time. These reports can go a step further and group analytics according to user demographics like age, geography and more to provide a complete view into how different types of people interact with the product.

Typically, companies have data like this already. So it is often a deliverable that is actually supplied to the design team rather than the other way around.

The Difference Between UX and UI

To be honest, we don’t care much about the “difference” between UX and UI. It’s a long-standing debate in the design world that usually feels unproductive. At the end of the day, the only thing that matters is delivering value for users and the business. But, just in case this is something that’s vitally important to you, here’s a diagram of how one group breaks it down.

If we had to draw some lines in the sand, here’s what we would say: 

UI is the design process of simplifying and arranging the information displayed on screen using visual elements. Overall, UI concerns itself with all the buttons, icons, screens, toggles and any other visual element of a product that its users interact with. 

In the case of a website, for instance, UI is the arrangement of text and images. It relates to the layout of a product or service. For example, on any type of website, the landing page should be arranged in such a way that the user can easily understand how to get where they want to go. The user interface is designed according to the needs of users, coupled with the established goals the site has for those users. This can include how to display a specific page, where to showcase specific buttons,  what type of language is used, how things move on screen, etc.

In turn, those UI decisions have measurable impacts on the user’s overall experience when visiting the page. Do users typically make it to the bottom of that landing page or do they go elsewhere? If they go elsewhere, where do they go? Where do these users drop off? Where do they stay the longest? Is the path there as smooth as it can be? 

Often, the solution to these larger UX questions can be solved with UI tweaks. And that’s why UI is under the UX umbrella. You cannot create a thoughtful user experience without deeply considering the look and feel of the digital product.  The distinction is mostly there to delineate tasks and ease communication when laying out the deliverables and areas of emphasis within a design project. 

Good UX vs Bad UX

A good user experience is the sum of a lot of different parts. The smallest detail can make massive differences as a user-base grows. These days, it’s common for the viability of an entire business to rest on the usability of their digital product. 

Poor UX doesn’t just create problems for users, it can derail the entire reputation of a brand – like a digital version of Fyre Fest. The last 20 years are littered with examples of failed tech products from startups and Fortune 500 businesses alike.

Examples of Good UX

A PwC survey found that one in three people will abandon a product after facing one bad experience, even if it's a brand that they love. Let’s avoid that by taking some inspiration from companies who get it right. 

Here are a few examples of good UX:

Apple

It follows a clear hierarchical structure that guides its users from A to B in a clean, smooth, and fast experience.

The site also allows its users to compare up to three products at once, giving concrete descriptions of its technical specifications and product features.

Airbnb

Everyone has used Airbnb at one point or another and could probably attest to how helpful their side-by-side map view is – something that has become a signature feature of their UX design. 

Not only are Airbnb’s users able to see their listing images and locations simultaneously, the map also provides its users with the opportunity to see prices based on geography. Control at its finest.

Headspace

Headspace could be considered a leader in the online meditation market, and it’s not hard to see why. The app gives users a stress-free experience while seeking a way to overcome their life’s stresses through meditation. The app gives users goals to achieve and keeps users coming back by giving them a daily streak to maintain.

The Founding Principles of Good UX

Regardless of niche or industry, the founding principles of a concept serve to bring people back on track when faced with a hurdle. 

Pabini Gabriel-Petit of UXmatters has said that when UX designers are tasked with solving design problems that they haven't encountered before, the fundamental principles of UX design can provide a solid foundation upon which to build creative solutions.

Career Foundry gives five key UX design principles that designers should always keep in mind:

1. Hierarchy

We use concepts of color, size, contrast, spacing, alignment, and iconography to emphasize different areas within a digital product or site. The goal is to give users the ability to intuit the path and relevant next step. 

Hierarchy is important because it shows the reader where to look first, and what to expect as they scan the rest of the design. A good hierarchy guides the user and helps them quickly get to where they need to go.

2. Consistency

Consistency gives users a sense of familiarity, so they will feel more at home using it. In our mobile-connected world, users expect to see the same experience on their laptop and mobile phone as they do on their tablet and desktop. As the IoT expands, these experiences require consistency across anything from refrigerators to cars. 

That’s one of the reasons styleguides are so important.  They provide a basis for how to create the product's visual design and design language. These are formal guidelines provided to designers as a means of assisting them in the process of developing a product for a specific type of device. 

3. Confirmation

Confirmation is an important concept in UX. It’s a chance for the product to communicate with its user and ensure that no confusion arises. This helps UX designers fulfill one of their key goals, error prevention – something that doesn't just apply to the product itself, but to its users too.

Clear confirmation moments throughout a product keeps the users on track and helps them avoid any accidental payments or other areas. We’ve all been saved by the “Are you sure you want to do that?” window. 

4. User Control

User control means that the user should always have something to do in response to a situation. As designers, we want to put as much power in users’ hands as we can – without confusing or overwhelming them. 

One of the most common examples of user control is giving people the ability to backtrack in a process without losing data or progress. It gives them a chance to change things if they made a mistake. In more complicated software, user control can mean easy integrations, dashboard customization, keyboard shortcuts, and more.

5. Accessibility

This principle is about going the extra mile for your users. Even if you are making a product for a niche market, you should always remember that various different types of customers exist. UX designers should always ensure that the design of a product is easy for everyone to use – regardless of age, physical ability, spoken language, etc.

Accessibility means providing a universally understandable interface that has "internationalization" built into its design. Following accessibility guidelines tends to help UX designers greatly in this aspect, as it helps them focus on removing as many obstacles as possible for a broad range of users.

Conclusion

Whew! That’s a lot of info. If you made it here, thanks for sticking around. We hope your user experience of this piece was as good as it could be. It’s difficult to summarize a concept that’s both deep and wide-ranging. But our opinion is that it all comes back to people. In some sense, all human beings have a built-in radar for good UX because … well … we’re all human beings making products to be used by other human beings.

If we translated the golden rule into design terms, it would be something like “design experiences for others that you would want to experience yourself.” We try to start there and then put ourselves in the shoes of the different people who might use a product. If we designers come from a place of genuine care, the UX can get to where it needs to be.