The Big Differences Between UX and UI Design

User Experience (UX) and User Interface (UI) articles can be found everywhere online but they’re oftentimes confused with one another. In eCommerce, it’s important to understand the difference between the two when you’re looking to create or optimize your online store because both acronyms attribute to the buyer’s journey in different ways.

We live in a world where a product’s design is critical to its success now more than ever before. Companies like Mint, Airbnb, and Uber have all received accolades for their design. In addition they’re all extremely easy to navigate around.

To help you clearly understand the difference between UX and UI I’ll define each term, examine the role of UX and UI designers, and look at some examples of each.

What is User Experience Design?

UX design is several disciplines packed into one. From market research, competitive analysis, wire framing, and prototyping, to testing, design, and project management - UX designers do a lot.

And although it lacks a single standard definition that explains it thoroughly, think of UX design as the practice of increasing a website or product’s utility.

An Oxford Journal UX study describes it well:

“The goal of user experience design in industry is to improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in the interaction with a product.”

So what does a UX designer actually do? Simply put, they make users happy.

Have you ever tried to input your phone number or date-of-birth into a web form and experienced an error because it’s not in the “right” format?

Or ever attempted to use a website’s menu and somehow keep clicking on the wrong page or getting stuck within the mega menu because it’s too finicky or the buttons are too small? Me too. These are the type of customer pain points that UX designers work to identify and rectify.

A course outline from Career Foundry helps to understand the day-to-day work of a UX designer:

Strategy and Content:

Competitor Analysis Customer Analysis Product Structure/Strategy Content Development

Wireframing and Prototyping:

Wireframing Prototyping Testing/Iteration Development Planning

Execution and Analytics:

Coordination with UI Designer(s) Coordination with Developer(s) Tracking Goals and Integration Analysis and Iteration

In eCommerce, good UX = more conversions and happier customers. It manifests in many forms, such as a clear UVP on the homepage, a 1-click checkout process for return customers, utilizing the correct input types for web forms, having an optimized mobile experience for smartphone users, or an ultra-fast load time for customers without access to high-speed Internet service.

UX design is as much customer focused as it is internally focused. It can be used to push a user in the direction you want them to go. It's identifying how a user will interact with your site and and strategically designing it in a way that’s easy to interact with. It's the blueprint that the user interface designer will build off of. Here’s a couple examples:

Through UX research, Amazon knew if they could limit the number of checkout steps, it would decrease shopping cart abandonment. So they created a 1-click buying option on their shopping cart and checkout pages.

Klei Games has a tech savvy audience that benefits from having an optimized mobile eCommerce site. This is a good user experience because the website makes it easy for their customers to browse and purchase their merchandise online.

In Conclusion

UX design is the process of improving the experience a user has when interacting with a company and its digital properties.What started out as a non-digital practice, UX design has since been predominantly adopted by digital and tech industries.

Scott Jensen, Product Specialist at Google sums it up beautifully; UX focuses on the user and their journey through the product, while UI is focused on the product, a series of snapshots in time.

What is User Interface Design?

UI design is often confused with being the same thing as UX but in fact they’re very different. That’s like comparing the blueprint of a house to the finished product. Or asking what’s the difference between the colour of a car and the design of the chassis. UI and UX work together, yes, but they can’t be lumped together as one.

UI is defined as, “the means by which the user and a computer system interact, in particular the use of input devices and software.”

In Layman's terms, UI design compliments the UX design. It’s the transfer of a company’s vision, brand, research, and content into a visually appealing and easy to use digital interface.

A good user interface helps assist a consumer through visual guidance to purchase an item as well as showcase a brand’s unique identity. For example, an eye catching “add to cart” button, visually appealing and easy to read typography, or high quality imagery.

Have you ever been to a beautiful looking website that’s frustrating to use and navigate? That’s great UI design with poor UX design and this can happen vice versa as well.

Let’s again look at a course outline to get a better picture of what being a UI designer entails:

Look and Feel:

Customer Analysis Design Research Branding and Graphic Development User Guides/Storyline

Responsiveness and Interactivity:

UI Prototyping Interactivity and Animation Adaptation to All Device Screen Sizes Implementation with Developer

A UI should display a brand’s identity to help differentiate themselves and enhance the customer experience. Examples of a good UI are:

Voleo, a group investment app, wanted to take the thinking out of using their app and let the visual UI elements effortlessly guide the user. Thoughtful colour palette’s, graphical representations, and large clickable buttons help achieve this.

Airbnb has a very pleasing UI with thought provoking imagery, minimal iconography, and bare essential elements, giving the user a clear and more focused direction when navigating the UI.

In Conclusion

UI design is the transfer of a company’s vision, brand, research, and content into a visually appealing and easy to use digital interface.

Where UX design can pertain to any aspect of a company across any industry, UI design is strictly digital and the result is always a visual interface. UI and UX are two different but complimenting practices.

Now that you know the difference between UX and UI and have seen examples of both, it’s easier to understand why both are important elements in product and web design. A combination of great UX and UI is always the optimal solution but having both is an iterative process that requires consistent user research and analysis.

How do you leverage UI and UX design for your eCommerce store? Do you focus on one more than the other? Let us know in the comments.