An Inside Look at the UX Web Design Process

If you stay on top of web design trends or even just have looked into some options for redesigning or refreshing your company’s website, the odds are you’ve encountered the term “User Experience” or its abbreviation: UX. It’s been a buzzword in digital design since about 2005. The idea of designing for User Experience plays an important role in many other industries as well.

There is a fair amount of confusion centered on the real meaning of User Experience (UX) and what all it refers to; so if you’re in that same boat, don’t worry, we’ll break it down for you.

User Experience at its most basic level is the overall experience someone has when using a product, especially in terms of how easy or pleasing it is to use. User experience design, typically associated with digital design, refers to the practice of intentionally designing a website, application, or digital interaction so that the user’s experience is positive and they are able to easily use in the way intended. When designing a website, the goal of the UX team are designing the site to be seamless and intuitive for the user and give a pleasing overall experience.

The term was coined by accomplished UX design expert Donald Norman and first used in his book, The Design of Everyday Things, which was first published in 1988. The concept is a combination of psychology, engineering, and classic design and web design principles.

The Difference Between UX & UI Design

You will often find the term User Interface (UI) design used interchangeably or in conjunction with UX design, so it’s helpful to be able to distinguish between the two.

UI design is focused specifically on the look and layout of the website – how each element, such as buttons, text, images, or any visual interface, will look and work. UI designers also make sure to optimize for different devices so the website works equally well for desktop and mobile users. UI design is an important part of overall user experience.

It is also important to distinguish between UX and usability. The definition of usability is a quality attribute of the UI, covering whether the system is easy to learn, efficient to use, pleasant, and so forth. Usability is very important, and again total user experience is an even broader concept.

How UX is Approached in Website Design

It’s extremely vital to your website’s success that you understand how your website appears to your customers and potential customers. Even more importantly, you need to understand how things like UX and responsive website design play into your customers’ perspective and experience (we went into more detail about this in a previous blog).

Steps in the UX Process

There are 6 major steps that any good UX designer or team will take when considering user experience during a website design project:

Understand – know what your users want or need, even if they don’t know it yet; this is usually done by creating one or more well-researched customer personas that include the type of customer, their goals and challenges, and any other details that can be uncovered.

Research – ask questions, conduct surveys, and collect data to uncover more details to help you fine tune the design.

Sketch – draw out the entire process of how each of your customer personas will get to and use your site (the customer journey or user journey).

Design – create the website design that incorporates and accommodates for as many of the ideas and challenges that the previous steps uncovered; this includes everything from colors and images to layout and navigation.

Implement – publish and begin collecting data from your users about the effectiveness and user experience of your website.

Evaluate – make decisions about what is working and what needs modifying once you have gathered enough information about your user interactions. Some aspects of UX you should focus on when evaluating your site include:

• Functionality – everything should work as intended without errors
• Reliability – your site should load quickly and perform consistently
• Usability – it should be easy for users to navigate and use all of the features
• Convenience – users should be able to find what they are looking for quickly
• Pleasure- we like to call it Delight – users should be satisfied and feel positive about their experience on your site

UX Web Design in Context

When Clorox Pools asked us to redesign their website, we knew we needed to update the site to be more visually modern, but more functionally, we wanted to reorganize the site’s content and navigation to make Clorox Pool’s products easier to find and consume. We also wanted to showcase their learning resources, which are an important way that Clorox Pools helps their customers choose the right products. Finally, we wanted to create a seamless experience for their customers, from learning to shopping to leaving a review.

Our Approach to Clorox Pool’s Design

Multiple third-party tools went into creating the complete Clorox Pool online experience. We integrated tools for product purchases, customer reviews, and video tutorials, taking extra care to create seamless transitions and interactions.

While a lot of effort toward creating a seamless experience between a website and third-party integrations rests with the Development team, our UX Researcher and Design team focused on creating a design to support a consistent visual experience that enhanced the overall user experience and interaction.

One of our first major goals was to streamline the hunt for the right products with a clear content hierarchy, intuitive filters, breadcrumbs, and eye-catching drop-downs. Our initial research found that the client’s collection of pool maintenance products, the primary draw of the site, was difficult to locate and explore.

Beyond our normal site planning, we included a dropdown that helped users understand product categories,

a dynamic search on the homepage that let users search for products by pool type and need,

and a filter menu that let users quickly find the right products for them

Since Clorox Pools doesn’t direct users to buy direct from site, but instead via their vendors, we decided to incorporate PriceSpider’s Where to Buy, a third-party product that guides users to where to buy your products. When users select “Buy Now” on a product, a modal with multiple options for where to purchase the product is shown.

We also chose to incorporate embedded videos from the Clorox Pool’s YouTube account to help users to learn how best to use their products without being directed away from the site.

Another way we chose to enhance the user experience and interactivity of the site was by adding reviews to each product description for users to interact with. Our goal was to provide an easy way for customers to read and create their own reviews of the products directly from the product page on Clorox Pool’s site. For this integration, we decided to use the Bazaarvoice plug in to collect and display the reviews at the bottom of each product page.

Don’t Forget to Delight Your Customers

As the digital environment and customer expectations for how they want to interact with companies evolve, so will the importance of planning your company website around providing an exceptional user experience. It’s safe to expect the study of UX design to consistently bring new insights, new methodologies, and new understandings of how design can shape our experiences. Every aspect of your web design should be tailored for your customer personas, their needs, challenges, and desires.

Your customers’ experience with your brand is just as important as the products and services you provide. If you want to connect with your customers through your website design, you have to be responsive to what they need and how they want to interact with you in order to create that connection. Visit our client portfolio to see even more examples of how our team incorporates UX into every design project.