What are the key differences between UX and UI design?

Two of the most misunderstood terms in visual design are UX (User Experience) and UI (User Interface), both of which are key components in the digital experience a business or brand delivers to its customers. Customers are commonly called users in discussions about UX and UI, in part because the discussion is usually about digital experiences like websites and mobile apps. Throughout this article we’ll use the terms customer and user interchangeably.

One simple way to think of the difference between UI and UX is that great UI makes it easy for your users, while great UX makes it meaningful. In order to make clear what we mean by that, let’s look first at the two disciplines individually and then we’ll look at how they work together.

Great UI makes it easy for your users, while great UX makes it meaningful.

What is UX?

UX is, at its core, the reactions, perceptions and feelings of users on their way through an experience. For example, it’s the positive feelings and reactions you have when navigating through an elegantly realized website. It’s also the negative reactions you might have if you stumbled upon a poorly structured, slow-loading website. UX delivers an emotional charge to the user as much as an intellectual one through the sum total of all the things you experience while engaging with it.

The user experience you might experience on a website or app is then the end result of the process called UX design. UX design incorporates a lot of critical steps. In fact, while the process moves a lot faster than creating a product from scratch, it’s almost as comprehensive a workflow.

The below are the key steps typically followed as part of a UX design process:

(Pro tip: Don’t be overwhelmed by what follows. A good web development and design agency will lead a client efficiently through this process, and explain the key steps as necessary. In many cases a client won’t actually be examining the outputs of each of these steps. They’ll just be used by a digital agency to do their work at the highest possible level. In that sense, these steps and outputs are like the screenplay for a movie. As a moviegoer, you don’t really want or need to read the screenplay. You just want to watch the movie. But the screenplay is a blueprint for the movie and the screenplay is what makes the movie possible).

1. Strategy.

Great UX begins with a strategic phase that actually considers core business issues as much as strategic UX issues. That means before any decisions about UX are made, it’s important to look at why something is being built. Key questions to answer here are:

• What is the business case for this project?
• What key objectives or goals are being targeted?
• What will be measured to adjudicate success (or failure)?
• What user problems and challenges might exist that are driving this project and what benefits will we deliver to solve them?
• What content needs to be developed to address all of the above?

2. Research.

With strategic imperatives established in step one, the next step is to do research. That means developing effective competitive landscape and competitor analyses. That also means industry analysis, picking out the key trends, incentives and motivating factors for relevant businesses and consumers. And that means persona development, creating those archetypal representations of the users a business or brand is trying to reach as part of the project.
As you can see, there’s careful upfront work to do to make sure users are being well-served by any resulting website or digital experience. UX design can often fail when this work isn’t done effectively. But if it’s done well, effective UX design is enabled. Starting with the next step.

3. Develop a sitemap.

A sitemap is an outline or map of a website’s content, and is designed to help both users and search engines navigate the experience. If an experience is built with an incoherent or incomplete sitemap, it will eventually lead to a poor user experience and likely cost your business money and customers. And if Google and other search engines aren’t able to effectively access and assess your website, it will rank lower in search results – again costing you money and customers.

4. Create the Information architecture.

Information architecture is a more detailed creation of the content structure of a website, mobile app, or digital experience that was initially outlined in the sitemap. It’s the structural design, and, as one of its key goals, it helps designers make things understandable for users at a strategic level. Information architecture is heavily informed by the user needs and business goals detailed in the strategy phase. It also directly informs the subsequent steps in the UX design process. Like everything in this process, one step leads to the next.

5. User journey mapping.

A user journey map helps outline the experience a user has on their way to a particular endpoint or goal, including the actions they take and the emotions they experience as part of their journey. For many businesses building a digital experience, this could start with a user’s arrival on the homepage of a company website and end with the user purchasing a product from that company the same day. That noted, in an omnichannel world where customers move fluidly between digital experiences and social channels, and spend time researching a purchase, some user journey mapping takes in multiple customer touchpoints over longer timeframes. It all depends on the complexity of the particular experience being designed.

6. User flows.

User flows are visualizations (often flowcharts) of the journeys mapped in the step above. They show the step-to-step possibilities a user might experience and the actions they might take on their journey inside the digital experience.

7. User stories.

A user story creates a simplified expression of a piece of the user journey noted above, in a way that reflects the user’s experience with it. It is written from the user’s point of view and it’s usually quite short. For example, a user story could refer to a specific piece of a video sharing site (like YouTube) and read “As a user, I want to be able to upload my videos to share with my YouTube channel subscribers.” These user stories – many, many of them in some cases – become blueprints for developers when satisfying the user needs they represent.

8. Wireframing & prototyping.

Wireframing and prototyping are low-fidelity expressions of the website, digital experience, or app that, despite their rudimentary form, do get closer to the final experience. The wirefame is a blueprint of the design environment. It can be done in the form of a hand sketch or basic digital shapes (which is why in some circles, wireframing is jokingly referred to as ‘drawing boxes’). Prototypes are more evolved. They are clickable (navigable) representations of the digital experience that simulate user flows and interactions. In both cases, there are no design elements present. It’s just part of the blueprint that will be designed, as in our screenplay example above.

9. Testing.

This phase covers a few things including usability testing, A/B testing, and analytics. Usability testing gets actual human users to test the experience. The users’ actions are recorded onscreen and the users are observed by a member of a digital agency. The process delivers a lot of important information; most importantly: did all the work done in steps 1-8 deliver the expected experience? The users validate this or provide areas for improvement. Usually both. A/B testing refers to tests where real users are given one of two possible actions in the digital experience and we assess the collective response to determine which performs better against the experience’s goals. It helps fine tune the experience. Finally, enabling analytics provides an ability to do a macro-level assessment of all data and information gleaned to date and in the future.

All the work done to this point provides strategic guidance and input into the UI design process.

What is UI?

UI is all the visual components the users of your website, app or digital experience interact with to guide them through the experience. To put it bluntly: it’s what the users see on-screen and what they click on. That means that UI design is the creation of the visual elements that are presented to the user and which they can interact with in order to achieve their desired outcome. These visual elements can be created while developing a style guide or they can be created by leveraging a brand’s existing style guide. Both are common. It just depends on what a client has in place at the outset of the UI design process.

It’s important to note that making things look good is not the UI designer’s only job. They also contribute to the user’s overall experience, through design that makes it easy and pleasurable for users to achieve their goals. They consider accessibility – such as where to put things, colour and typography usage, menus, and navigation. Great UI designers also understand cognitive load. They don’t overwhelm the user with visuals. They use white space strategically. They avoid tiring out the user with too many decisions to make. They avoid clumping competing piles of content together and confusing the user. The whole point is to make the experience enjoyable and effortless for the user and to help them achieve their goals.

The key elements UI designers employ are:

Moodboarding.

Moodboarding is a way to get everyone (across both the client organization and the agency) aligned on the visual direction for a website, app or digital experience. Designers pull together what is effectively a collage of imagery, typography, pieces of language and colours, all based on the strategic work done during the UX phase. Then all stakeholders can quickly and easily provide feedback and discuss the potential approaches as a visual design style is codified for the experience.

High-fidelity page mockups.

High fidelity mockups are the evolution of the wireframes with visual styles established and more details than their low-fidelity precursors. They bring the experience much closer to what the users will see and interact with. The mockups are used by developers to code everything to life.

Imagery.

Imagery plays a huge role in UI design, particularly as websites and apps move away from heavier copy and towards instantly intuitive user experiences. The right image system can create a memorable, pleasurable experience for a user, where the wrong choices can, within seconds, repel a user and damage the overall UX of the site.

Illustrations.

Although they’re not always used in UI design, illustrations can be an effective way to illustrate concepts before a product is ever live and to communicate key information to users in the product once it is live. It can also be used to tell a particular brand story or capture a brand’s visual style and tone.

Iconography.

Many websites and digital experiences use icons to represent key concepts, client types or product offerings. They’re easily scannable for users and reduce the need for copy which allows for more white space and more elegant experience. An integrated iconographic system creates coherence for the entire experience.

Typography.

When UI designers consider typography, they select and utilize fonts that enhance readability and help users avoid visual fatigue. Strategic typography in an experience also plays a key part in creating an appealing emotional impression. Note that typography can be based on existing brand guidelines or guidelines can be developed as part of the UI design process.

Style guides.

A style guide systematizes all of the above, creating rules and principles for the use of visual elements and UI design to ensure coherence in the experience and to connect it to all other aspects of a brand’s digital and analog ecosystems.

What’s the Difference Between UX and UI?

As mentioned right at the top of this article this is a common area of confusion. To restate what we opened with: great UI makes it easy for your users, while great UX makes it meaningful.

UX always comes first, ensuring alignment of the experience with key business goals and taking a strategic approach to designing the overall impression users will have.

UI is then a key way to make that UX happen. It’s a part of UX focused on the visual elements presented to the user and the way they interact with them. It’s guided by the strategic mandates established in the UX process.

How do UX and UI work together?

Without great UX design, great UI design is a lucky accident.

Without great UI design, great UX design goes to waste.

The two design disciplines are inextricably linked.

Great websites, digital experiences and apps are created when UX and UI are employed seamlessly and strategically together. When that happens, we get digital experiences that build stronger brands, deliver improved customer acquisition and retention, and create greater revenues.

Without great UX design, great UI design is a lucky accident. Without great UI design, great UX design goes to waste.