From the mug we use to sip our morning coffee, to our favorite mobile applications and website design examples—much of our daily routine involves, even depends on, regular interactions with digital and material products. These interplays generate feelings that leave a lasting impression on us as users, otherwise known as UX, the user experience.
UX design is the art of thoughtfully shaping products in order to improve these experiences, and if you ask me, it’s the unsung hero of the 21st century. With the potential to improve and support our complex relationships with products and technology, UX is becoming an increasingly integral part of the design industry.
So, what is user experience? And why is it so important? We’re going to answer these questions, diving into the ambitious ideas and principles that drive the UX world.
Whether you're interested in a career as a UX designer, want to gain insights on how to create a website with these ideas in mind, or if you’re simply curious to learn more about this fascinating field—continue reading to learn more.
In this comprehensive guide to UX, we’ll go over the following topics:
What is UX design?
Albeit its significance, UX, which stands for user experience, is equally as misunderstood to the general public as it is a part of our everyday lives. UX is a field of design whose “human first” approach emphasizes supporting users as they interact with a particular product from start to finish.
As consumers, we have experiences with every product we use—maybe it's navigating a website to make an online purchase, using a mobile app to order food, or even something as trivial as opening an umbrella. These encounters provoke a range of opinions and emotions associated with the product; it could be frustrating or satisfying, high quality or poor, significant or forgettable, necessary or superfluous, etc.
Don Norman, the author of Designing Everyday Things, coined the term “user experience” in the 90s, and described it like this:
“A product is more than just the product. It is a cohesive, integrated set of experiences. Think through all of the stages of a product or service – from initial intentions through final reflections, from first usage to help, service, and maintenance. [UX designers should] make them all work together seamlessly.”
By designing strategically, the ultimate goal of UX design is to develop or improve a product so that it provides the best possible experience for target audiences from start to finish.
What is the difference between UX and UI?
They sound similar, but when you understand the differences between UX and UI, you’ll realize that they’re far from interchangeable. While both UX and UI (user interface) design involve shaping the best possible end product for users, there's a definite distinction between the two disciplines.
UX design involves an analytical process that’s concerned with the entire picture of a product’s design and launch—from user research and prototyping, to marketing the product. It's the job of UX designers to bridge the gap between the needs of the user and those of the business or brand.
If UX is about constructing an entire experience, UI hones in on shaping the visual and tangible elements that users will interact with. UX and UI designers work together harmoniously to develop a product—and each role is equally vital to its success.
Let’s say you have a UX/UI design pair working together on a website design; a UX designer will focus on the site’s entire flow and functionality, consulting with product designers, analysts, users and marketers along the way. In this case, they’ll use this process to discover what features are needed to give visitors a smooth website browsing experience, and hand over their insights to the UI designer.
From there, a UI designer will make the aesthetic decisions necessary to bring these solutions to life: the size of images, arrangement of content, amount of text and so on. They’ll ask questions like: What is the best website layout for the user? How much information should sit on the homepage? Is the interface as a whole visually appealing and engaging?
What makes a good user experience?
Successful UX design can only be accomplished with a deep understanding of users’ wants, needs and values. And as any designer will tell you, the definition of good user experience can’t be pinned down to just one factor. Each interaction between user and product represents unique potential, and every design has its own goals.
Shani Sharabani, UX designer at Wix, has some bonus insights about the user experience which are included throughout this section. She starts by telling us, “the key to good UX design is that you need to anticipate what the user will want, and answer their questions before they ask them.”
Usability is not enough
Most people assume that a product with good UX design is one that is simply “usable.” But that would mean any product that manages to bring us from point A to point B has a good user experience.
While usability is important, it’s not enough to satisfy the entire scope of the user experience. A product might be usable on a surface level, and still manage to disappoint users along the way. Furthermore, context needs to be taken into account—what is considered usable for some might present challenges to others; and a product that formerly solved a solution, can appear outmoded today.
A classic example of this is the old Heinz glass ketchup bottle. You know, the one that required users to “tap on the 57” and patiently await their condiment to pour out of the bottle. When Heinz first released their classic ketchup bottle toward the end of the 19th century, this interface was an innovative solution. The bottle allowed users to consume the product, and the employment of glass made it possible to see how much ketchup remained.
Flash-forward to 2021, and we’re acutely aware of the fact that Heinz’s plastic squeezy container is a far more convenient option for removing ketchup from the bottle. It’s fast, it’s easy, and most importantly, it taps into a unique group of target users—kids. While a glass bottle is noticeably difficult for children to maneuver, they are equipped to handle the plastic option with ease.
7 principles of user experience
If not only usability, then what qualities contribute to a good user experience? Let’s discuss some dependable guidelines and look at how they can be applied to website design. The following are seven core principles that outline UX, identified by designer Peter Morville:
Does the product or website serve a purpose? The first indication of good UX design is whether or not the end product presents a solution for the target user. Without a distinct use, it won’t succeed in a market full of purpose-driven products.
What is or is not useful can also be determined in the eyes of the beholder. Sometimes, a product fulfills a specific value that is not practical or obvious to others, such as aesthetic appeal or pleasure. Take, for example, the mobile app recently released by Tanner Villarette, which users can install on their iPhones to view and interact with the classic iPod touch interface from 2014.
Talk about a throwback! Though this software has little pragmatic significance—it offers a positive user experience to audiences driven by nostalgia who value its aesthetic.
How is usefulness applied to web design?
When designing a website, usefulness is when the site itself will help users accomplish a specific goal; such as making a purchase, acquiring information or signing up for a course.
Not only that, but usefulness should be evaluated with each element of the site’s design. When arriving at an online store, for example, you might have questions about a certain product. A visible live chat feature on the site’s homepage seems like the perfect solution for getting answers. You send a message and wait, until eventually you realize the feature wasn't activated by the owner. This design element is superfluous, setting false expectations for the user and resulting in poor user experience.
The most successful UX designs enable users to reach their end goal intuitively, efficiently and successfully. While a product can definitely serve its purpose without high levels of usability, it is less likely to succeed in the market. But a product that makes day-to-day tasks easier and more efficient for users will absolutely stand out.
How is usability applied to web design?
A usable website is one that helps users to accomplish their goals quickly and efficiently. Let’s say you arrive at a fitness website. Your reason for visiting this site is to learn more about the teachers and classes themselves, and ultimately to sign up for a class.
Imagine two possible scenarios for booking: one requires you to jump around the website until you find an obscure sign up form, fill out your personal details, and wait for the Yoga instructor to send an email before confirming registration. In another case, you find a prominent “Book Now” button at the website header, which leads you to an online booking calendar. You choose your preferred class, pay for it online and immediately receive confirmation that you’ve successfully signed up for the class.
While both scenarios are technically “usable” in the sense that they’d get a user from point A to point B—there is a definite distinction in the level of user experience. One is easy-to-use, seamless and satisfying, but the other requires many steps and a long waiting time that will frustrate customers.
How useful would a product be if your target audience can’t find it? In UX, findability means ensuring audiences can locate and access a product when they want it. In the case of using a digital product like a website, this would require them to find the content they’re seeking with ease.
How is findability applied to web design?
One of the criteria for creating a website with good UX is guaranteeing users can identify the web pages they need. This is done by anticipating what aspects of the site are the most important for visitors and displaying them in a convenient location.
Sharbani tells us that “When a visitor enters a page, they need to understand in a few seconds what the goal is, and where to find the content they need. It’s a combination of good design, organization and making sure it’s not too crowded.”
Picture yourself arriving at a restaurant website whose advertising promises customers they can conveniently order delivery online. You find the menu and decide what you want, but there’s just one (big) problem. After browsing the homepage and searching through the site, there’s no indication of how or where to place your order. Visitors to a site like this will feel disappointed when they can’t find what they need to complete their intended action of ordering food.
Credibility is all about honesty and living up to the reputation built around a brand. This is especially important if we consider the emotions of targeted users. A user expecting a certain quality or encounter with a brand, based on advertisements or word of mouth, will feel deceived if they aren’t given the experience promised to them. On the other hand, brands with established credibility will acquire long-term users who trust in their product. That forged relationship will likely proliferate toward new, loyal customers.
It’s likely that a website or product won’t get it right on the first shot, but that doesn’t have to come at the cost of credibility. Brands can be held in high esteem by their users just by listening and responding to their complaints and requests.
Sharabani again elaborates, “There will always be users who are disappointed, and when we release a product we know that there will be things to improve on. I think the most important thing is to give users the feeling that we’re listening to them and that we take their feedback into consideration. Even if you don’t have the features they want now, it’s good to let them know that you’re listening.”
How is credibility applied to web design?
There are many reasons businesses create websites: to strengthen branding, give customers a convenient place to accomplish tasks (e.g. making a purchase) and to build an online presence. Whatever the goals are, a website is a place where brands can establish themselves and offer even more value to customers.
A credible website is one that is updated, functioning and provides a true representation of the brand or business it serves. Let’s say you arrive at an eCommerce website advertising a spring sale for 20% off all purchases. You choose your items, arrive at the checkout and make an online payment only to discover that you were charged full price because the sale has ended. An experience like this will leave users with a negative impression of the brand, since their website content is unreliable and out-of-date.
By fostering an aesthetic and emotional connection between a brand and its target users, businesses will generate feelings of desirability toward new products, events and other offerings. As long as the brand lives up to its expectations, this is a great way to kick-off the user experience, which will ultimately create a ripple effect of excitement surrounding your product.
Another benefit of cultivating desire around a product or brand is that users who own or interact with it will likely show it off to their friends. This can feed into a ripple effect of new audiences who’ll want to test it out.
How is desirability applied to web design?
Making a product desirable relies heavily on authentic and consistent branding. By creating a logo, choosing distinct brand colors and writing enticing advertising copy, a brand can strengthen its impact in the market. All of these elements make it recognizable and trusted among target audiences.
When it comes to web design, this means ensuring that all elements of a website are on-brand. For example, arriving at a site that doesn’t include the brand’s logo or business name, or uses unrelated colors and language, will likely confuse customers. While it doesn’t directly affect their feelings about the end product, a user in this situation would probably leave the site in search for a familiar brand.
Accessibility means removing barriers that will prevent users with disabilities from using a product. This includes designing products, applications and websites that can be used by individuals with a wide range of capabilities, and ensuring that they can successfully complete their end goal without frustration.
While this aspect of user experience is often overlooked, it can benefit your business altogether by extending your market reach to individuals who seek accessible products. Additionally, when you improve the level of accessibility of your website or product, it will often make it easier to use altogether.
How is accessibility applied to web design?
There are many important details to consider when making a website accessible—color contrasts, font sizes, alt texts and more. It is important for businesses to ensure that their sites meet the most basic accessibility requirements in their area using tools like the Wix Accessibility Wizard to guide their design.
While accessibility is a responsibility, there is also a benefit to businesses who pay attention to it. An accessible website will help strengthen the perception of a brand, improve performance and minimize legitimate legal risks.
Creating value for your brand or product is the lifeline of the user experience. It can best be defined as the sum of all the individual characteristics mentioned previously. Since each user comes with a unique perspective, the aspects discussed will resonate differently with every individual, and certain elements of UX may be more valuable to some over others.
By covering the qualities discussed above, a business or product is much more likely to appear valuable to target audiences. Ultimately, value will help brands to bring satisfaction to their users and succeed in a market full of options.
What does the UX process look like?
We’ve understood the importance of UX, and how to determine what good UX looks like. Now, let’s go over how designers actually go about creating these experiences.
Great user experience can only materialize with a deep understanding of users’ values, capabilities, needs and desires. Skilled at design, analysis, and problem solving, the initial goal of a UX designer is to understand what target users want and need, as well as how they feel about using a particular product. They'll go through an in-depth process to uncover potential or current issues in order to find solutions and shape the ultimate user experience.
There’s no one-size-fits all approach to UX design, and rarely a one stop solution. Each UX project requires a bespoke set of UX design tools and methods for discovering the best way to design, produce and market a particular service or product. It’s also an iterative process that requires listening to users’ initial responses and re-visiting features to improve or update a product based on reviews.
Stages of the UX process
There are many facets to UX design. It’s important to note that, as a whole, shaping the perfect user experience involves a fluid workflow, rarely following a strict sequence of steps. For example, UX designers might start at different stages depending on whether or not a version of the product already exists.
Whatever the individual approach, the UX process should always try to accomplish the following tasks in order to understand the user and product before launching it:
Ideation and definition
Finalize, launch, repeat
Below we’ll go over what these stages look like, and common practices for accomplishing each of them.
Stage 1: Ideation and definition
The first stage of UX design is fully understanding the product, user and brand—and making sure that as concepts, they fit together harmoniously. While many brands tend to hyper-focus on the success of a product from a marketing perspective, a UX designer's strategy underscores supporting the user while simultaneously meeting the needs of the business.
Understanding how every aspect of a product will come to life, the goal of the ideation and definition phase is to set the stage for the rest of the UX design process. It’s a time when everyone involved in the product’s development—UX and UI designers, marketers, stakeholders, etc.—will take the time to brainstorm, shape and define what they’re setting out to achieve. They’ll ask questions like: what problems do we want to solve? What obstacles might get in our way? Who will use this product? What are our KPIs? and more.
Whether the end result of a UX project is a physical product, application or website—it’s crucial to start by fine-tuning its concept and goals. This involves research, brainstorming, strategic thinking and planning—all of which should result in a solid foundation, before taking concrete steps toward developing, designing and marketing.
Some of the most effective methods a UX designer will consider at this stage are:
Stakeholder interviews are one of the best ways to cooperatively discover insights from the get-go of the UX design process. The purpose of a stakeholder interview is to uncover valuable knowledge from experts invested in the outcome of the project.
Deciding which stakeholders a UX designer will interview depends on what sort of guidance they’re looking for at the start. Generally, it’s recommended to sit down with those who make financial decisions or are important to the organization of the project.
UX designers will use this conversation to clarify the direction of the project. This includes elements such as who exactly the target user is, the roles of each team member, overarching goals and KPIs.
Concept sketching is a helpful way to generate ideas early on. This process involves consulting with design team members at the start of the process to gain valuable input. Each participant should present their ideas to the team, sharing the intent behind them. The UX lead will usually use this collection to kickstart the design process.
Designing a user experience can (and should) be a collaborative process. So, it’s always important to define the project’s goals from different angles. When there are many people involved in a single project, conducting a group workshop or kickoff meeting is an efficient way to align everyone involved. A kickoff meeting can be headed by the UX lead, and should include players that represent different aspects of the project: business, marketing, design and users.
During the meeting, the team will define the purpose and objective of their product, who the ideal users are, design tasks, research goals and how they’ll measure success. In addition, a kickoff meeting should be moderated in a way that allows team members to express their concerns.
By the end, the UX design team should walk away with a clear understanding of who is responsible for making final decisions, be confident that everyone involved is on the same page and feel inspired to get started.
Stage 2: Research
Kicking off a UX design project will lead to critical questions about target users and the industry market. That’s why research is normally the next stage. UX research allows designers to focus on collecting qualitative and quantitative information that will help them understand the scope of their project and make educated decisions.
Let’s look at some of the best methods for conducting UX research:
Since UX is driven by user-centered design, it’s essential to invest time to deeply understand the behaviors, wants, capabilities and needs of the end user. These insights will become an advantage to UX designers throughout their process by helping them understand the user/product relationship.
There are manifold approaches for conducting user research, some of the most popular methods, including:
User interviews: This is a fool-proof way to collect data about target users and understand their experiences. UX designers will prepare a set of questions for the user interview, sitting down one-on-one with individuals who represent their target audience. The goal is to unveil data about their behaviors, needs, desires and pain points, or to hear feedback about your product.
Focus groups: Facilitated by UX designers, the purpose of a focus group is to lead a group discussion about a product in order to gain feedback. The major benefit of this method of user research is gaining multiple perspectives in one sitting through an organic conversation.
User surveys: Surveys are questionnaires sent out to representatives of the target users which will include strategic questions related to the product. User surveys can be sent to large groups of users at once, making them a convenient way of gaining user insights and collecting measurable data.
Less focused on the direct experience of the user, market research will help brands understand their competitors, demand for the product, and standards or trends within their industry. These insights, along with data acquired from user research, will inform the branding, marketing and sales decisions for a particular product.
When there’s a low fidelity version of the product ready, or an existing product that functions similarly, it can be extremely helpful to offer targeted users a test run, and follow up with questions about their experience. This is known as usability testing, and will allow UX designers to observe first-hand how users react to their product.
Key observations will include seeing if the user can successfully complete their tasks, if they enjoy using the product, if it sufficiently meets their needs and if they’d use it again. Whenever problems arise, it’s an opportunity to find solutions that help users avoid frustrations and challenges.
Stage 3: Analysis
The data obtained from research opens the doors to new wisdom about a UX designer’s audience and market. After a deep analysis of this information, they can get rid of most uncertainty and assumptions about their product. With a better understanding of how to support target users, a UX designer will take the insights they’ve gained to shape a journey that provides an all-encompassing user experience.
The following are elements that a UX designer will commonly use to make sense of their research, and adjust the objectives for their product:
Throughout the UX design process, user personas help visualize the target user in order to devise a more accurate approach to designing their product and experience. These are fictional characters created by UX designers based on their research. They represent a range of real target users, and can be referred to constantly throughout the design process.
A user persona comes with a fictional name and image, and will include basic demographic information inspired by user research; such as age, gender, nationality and more. Additionally, a UX designer will assign behaviors to these personas; such as spending habits, likes and dislikes, pain points or social media media usage.
User journey map
A user journey map outlines how target users experience a product’s design, step-by-step. It’s usually visualized as a timeline, listing all of the touch points when a user interacts with a product in a specific order.
Creating a user journey will help a UX designer ensure their product is consistent with the needs and capabilities of users, and that it helps them complete their intended tasks. It does this by imagining the user’s context, outlining the steps it takes to realize their end goal and identifying the level of functionality for each action.
Stage 4: Design
After completing research and analysis comes the actual design phase. With the knowledge and insights UX designers have gained,, they can start to establish the visual composition of their final product.
Like most of the UX design process, this isn’t done in one shot. It’s an iterative experience that involves ongoing brainstorming, sketching and the input of multiple key players. Designing involves the work of both UX and UI professionals, branding and marketing experts and other key players from the product’s team.
Here are some dependable practices used within the UX process to accomplish a successful design for a product, application or website:
Wireframes are the blueprint of a digital product, usually presented as a rough sketch of an app or website's user interface. These low-fidelity sketches are used to formulate and decide on the basic layout of a design, and define what essential elements should be included in order for it to function properly.
Sans color, fonts or text, wireframing allows designers to hone in on the foundations of a user interface before getting into the nitty gritty of aesthetic details. After all, what good would it be to add color to a design if a user can’t interact with its primary structure?
Believe it or not, wireframes are often made using a simple pen and paper (see wireframe examples). However, some UX designers will embrace software like Adobe XD to provide a more detailed or accurate sketch of a product’s interface.
Information architecture is the process of organizing content in a way that’s logical and intuitive for users. From written content and imagery, to calls-to-action and online forms—the goal of consciously mapping out this information is to ensure users navigating an app or website can find the content they need quickly and easily in order to accomplish their goals. For example, a site where any page can be found in under three clicks would be defined as "flat architecture".
This process includes establishing a hierarchy of information on individual pages, as well as considering the overall website navigation so that users can flawlessly jump from one item to another.
A UX designer will start by grouping together relevant content, then drawing out a sitemap to visually represent parent pages and sub-pages. They will then map out navigation systems such as menus, breadcrumbs and filters, and finally create content labels to identify to the user what content lies where.
Used throughout the interface of an app or website, good microcopy will guide a user with words, helping them identify where, when and how to take certain actions.
It’s helpful to remember that a user’s experience isn’t only shaped by the visual aspects of design, but with language as well. Texts that tell users to sign up for a newsletter, confirm the purchase of an item or apologize for an error create interactions that influence the user’s feelings towards a brand or product.
Some of the best practices for crafting microcopy include being concise, clear, helpful and in line with the overall brand identity attached to a website or application. For example, a colloquial tone can foster a friendly brand-user relationship in some settings, while in others, the users will expect to be greeted with a formal and professional voice.
Stage 5: Testing
To truly design for the best user experience, testing a website or product is an essential last step before officially launching it. Also known as validation in the UX world, testing a product should start after the initial research and design stages are complete, and a high-fidelity iteration of the design is ready for use. It’s important to test using a precise version of the design since it will help designers and stakeholders more accurately evaluate it.
The following elements pertain to the this stage of UX design:
A prototype is an early version of a product designed specifically to inspect the user experience. As already mentioned, it is recommended to use a more advanced, or high fidelity prototype during the testing stage—one that is aesthetically pleasing and functions closely to the final design.
Users who represent the target audience will generally be observed in action. Designers at this stage will pay careful attention and take notes on how users interact with specific features of a product throughout use. They will also ask for their opinions, develop surveys and record feedback that will help them point out flaws and improve the overall user experience.
It’s good practice for designers themselves to test out the product, too. By regularly using their own design and interacting with it first-hand, designers and stakeholders will gain a clearer understanding of what works and what doesn’t.
Stage 6: Finalize, launch, repeat
The last step of the UX design process is launching the product. A culmination of research, designs and feedback gathered along the way, launching the finalized product is an exciting and rewarding moment.
Usually, this will start with a Beta launch. This refers to releasing the product to a limited number of people in order to discover and resolve outstanding issues before it becomes available to the general public.
While launching a product or website represents the end of the design process for a particular product, it doesn't mean the work is finished. It’s rare that a design will be flawless on the first try. To truly deliver a product with first-rate user experience, brands should listen to the reactions of users and seek feedback that will help them improve their design. The best UX designers are receptive to constructive criticism, and will jump at the chance to revisit a product’s design in order to meet a user’s needs.
5 websites with great UX design
Since we’re in the website creation business, it seems only fitting to take this knowledge of UX design, and see how these methods can be applied to create a beautiful and functional site. From logical layouts and clear microcopy, to engaging with current UX design trends, the following websites with great UX design provide an example of what a great user experience looks like:
01. Jung Design
Designer Jung Hoe has mastered the art of information architecture. Since the purpose of his portfolio website is to gain new clients, he provides the perfect amount of information to grab visitor’s attention and inform them about his practice and professional goals.
Easy access to Jung’s CV, clear examples of his work and an accessible contact form support users who are interested in hiring him for their next design project. Plus, the cool animation and vibrant colors add points for harnessing desirability.
As far as eCommerce websites go, Extra & Ordinary Design provides a seamless and enjoyable online shopping experience for visitors. While browsing through their unique pottery designs, users can easily filter the display to show the type of items they’re interested in within any given price range.
Once a user clicks on an item, they’re navigated to a dedicated product page which includes valuable details about the design, including the materials used, prices and shipping information. Should visitors decide to make a purchase, all they have to do is click “add to cart,” check out and pay—a seamless process guided by impeccable microcopy and design.
03. Mikaela Rubin
The user experience of Mikaela Rubin’s site begins with her intriguing homepage design. Perfectly balanced, with a touch of animation, visitors who arrive at this website will become engaged with Mikaela’s visual storytelling without getting lost (or bored).
Users who want to uncover details about Rubin’s services can continue to browse the organized content on her homepage, or alternatively, use the website menu at the header of the site for a shortcut to what they need. Even better, a search bar at the top of the page makes it easy to look for specific recipes and filter according to dietary restrictions, ingredients and dish type.
04. Noni Ceramica
With mobile devices accounting for 52% of global internet traffic, a large part of designing a website with good user experience means ensuring visitors have the same range of capabilities when browsing a mobile version of a website.
In the case of Noni Ceramica, the condensed hamburger menu allows users to easily navigate the site without being overwhelmed by content. A prominent shop button makes purchasing on-the-go easy, a convenient feature that is sure to please customers and increase the amount of online sales for the brand.
When designing a site for mobile, you may also consider the responsive vs. adaptive design debate, and choose a website building platform based on these preferences.
HERoines is a non-profit organization aimed at motivating and supporting women. Because of the importance of their mission, it's imperative that their site is informative, inspiring and generates new interests and support for the organization.
Here, parallax scrolling facilitates a continuous flow of information, creating an engaging experience for visitors at each section of the site. Additionally, a horizontal scroll is used to create a banner of inspiring quotes and calls to action, such as “join now” or “donate.”
Large fonts and contrasting colors make the website easy to read, improving accessibility for users who might otherwise have trouble. The color scheme emphasizes strong branding, which is a helpful way to foster a trusting relationship between the organization and website users.