What is UX/UI?

Despite being nearly 30 years old, a globally recognized term that spans nearly every industry, and linked with multiple aspects of our everyday lives, the expression “UX/UI” is often misunderstood. Like many other specialized trades, outsiders are typically unaware of the responsibilities of a designer. It’s their job to employ “collaboration,” “empathy,” and “user research” in the journey from project start to product launch. UX stands for User Experience. UI stands for User Interface. But what does that mean? How do they relate to each other?

User Experience (UX) refers to a person’s overall experience when interacting with a product, system, or service. It encompasses how users perceive, feel, and interact with a digital or physical product and focuses on satisfaction, efficiency, and enjoyment. UX design involves researching users’ identities and needs, creating user personas, designing user flows, and optimizing a product’s usability and accessibility.

User Interface (UI) refers to the visual and interactive elements of a product or tool that users interact with to accomplish a goal. It includes the layout, visual design, typography, icons, buttons, forms, and other elements that enable users to navigate, interact, and complete tasks within a product. UI design focuses on creating aesthetically pleasing and intuitive interfaces that align with the overall user experience goals.

The differences between UX/UI

A surprisingly succinct illustration of these two concepts is an often-referred comic about two differently designed ketchup bottles. In this case, the ketchup bottles represent the user interface (UI), the interactive product or tool, and the stick figure’s disgust with the left-hand bottle and delight with the right represent the user’s experience (UX) while using the two products.

But this depiction is not perfect. The implication is that the glass bottle is inferior to the two designs. Anyone trying to get ketchup out of a glass bottle knows it’s a struggle unless you know how to angle it just right. But UX & UI design strive to consider more than the primary issue. It ignores the shortcomings of the right-hand bottle. It neglects that the right-hand bottle is visually unattractive, lacks the glass’s strong, cool, trustworthy heft, and is made from non-renewable resources. So, how do we ensure we aren’t just becoming lost in the primary goal and ignoring other essential aspects of a product that may influence the decisions of our consumers? Design thinking.

Source: www.patrickhansen.com

The main action items for UX & UI

But who are our consumers? Which problems are we looking to address with this product?  Who puts ketchup on a hotdog? Asking these questions is a manifestation of both user experience and user interface design. And thankfully, there exists a strong, proven methodology that ensures we’re asking the right questions for both. It’s called “design thinking”, as defined by the Neilsen Norman Group below,

The design thinking ideology asserts that a hands-on, user-centric approach to problem-solving can lead to innovation, and innovation can lead to differentiation and competitive advantage. This hands-on, user-centric approach is defined by the design thinking process and comprises 6 distinct phases, as defined and illustrated below.

Source: nmgroup.com

Design thinking’s 6 distinct phases are as follows: 1) Empathize with your users, 2) Define the problems your users face, 3) Ideate, and generate solutions to your users’ problems, 4) Prototype your solutions, 5) Test those solutions, and 6) Implement your solution. These six phases can be grouped into three overarching categories: 1) Understanding your users and their problems, 2) Exploring solutions to your users’ problems, and 3) Materializing your solutions and testing their success. Additionally, these phases are divided into two sub-phases, as illustrated below.

Source: nmgroup.com

UX and UI Working Together

Designers use this methodology. But which of these phases is user experience design, and which is user interface design? The simplest answer is that information and insights garnered during the Empathize and Define phases will lead to user experience design, and user interface design will follow up with potential solutions. UX design informs UI design.

In most respects, web design is no different than any other kind of design. We use the same UX and UI design principles to inform our decisions. Whereas, in designing a ketchup bottle, the designer would collaborate closely with a product engineer to produce technically feasible and beneficial designs, a web designer collaborates closely with a web developer throughout a project to develop solutions.

Strategic planning

One key benefit of design thinking is that it is industry and profession-agnostic. It works for physical product designers as well as digital product developers. A ketchup bottle designer will ask the same essential questions as a web designer looking to create an attractive and functional website: where’s the problem, and what are the solutions?

When planning out UX/UI projects, keep one word in your mind: fractals. A fractal is a pattern built up of smaller versions of itself. The same is true for a design project. Rather than simply building out a linear project off of the same six phases of design thinking from Design to Implementation, think of each phase as being comprised of its own version of design thinking, wherein you attempt to Understand, Explore, and Materialize each phase to construct your course of action. You ensure a strong structure for each phase, based on a tried and true methodology. Rather than thinking of these phases as a straight line, try to think of them in controlled cycles, where solutions drive into feedback, which yields stronger, more usable outcomes.

Source: Apollonian_gasket

Measuring Success

Whether you’re focusing on user experience design or user interface design, the focus should always be on the user. Think of the project stakeholders (e.g. your clients) as a set of users in their own right, with their own problems that need solutions. Look for ways in which your project can solve the problems of your end-users and the internal stakeholders.

The success of end-user UX & UI design efforts can be measured using a variety of metrics and methods, including the following:

1. User Satisfaction: Conduct user surveys, interviews, or usability tests to gather feedback on users’ overall satisfaction with the UX and UI design. This can provide insights into the effectiveness of the design in meeting user needs and expectations.
2. Task Success Rate: Measure the percentage of users who successfully complete specific tasks or actions within the interface. This helps determine how well the UX and UI design supports users in accomplishing their goals.
3. Conversion Rates: If your design involves a conversion action like signing up, making a purchase, or subscribing, track the conversion rates. This metric indicates how effectively the UX and UI design facilitates users’ desired actions. Check out our blog for more information on conversion rate optimization. 
4. Time on Task: Measure the time users spend completing tasks or actions within the interface. If the design is efficient and intuitive, users should be able to accomplish tasks quickly.
5. Error Rates: Monitor the frequency of user errors or mistakes encountered while interacting with the interface. Lower error rates suggest a more intuitive and user-friendly design.
6. Engagement Metrics: Analyze user engagement metrics such as time spent on the interface, page views, or interaction patterns. This data can provide insights into the attractiveness and stickiness of the UX and UI.

Remember, success metrics should align with your specific goals and objectives. Establishing clear success criteria before embarking on UX and UI efforts is important to measure and evaluate their impact effectively.

Skills that UX/UI Designers Need

As a UX/UI designer, there are several hard and soft skills that are valuable in your field. Some hard skills include proficiency in design tools such as Adobe Creative Suite, Sketch, or Figma, knowledge of prototyping and wireframing, understanding of information architecture, and familiarity with coding languages like HTML, CSS, and JavaScript. On the other hand, important soft skills include empathy and understanding user needs, effective communication and collaboration, strong problem-solving abilities, attention to detail, creativity, and the ability to adapt to changing design trends and user preferences. These skills together help you create user-centered and visually appealing designs.

Getting started with UX/UI

In essence, UX/UI design is about creating a seamless and enjoyable user experience when interacting with a product, system, or service. UX focuses on the user’s overall journey, ensuring it’s efficient, satisfying, and meets their needs. UI takes care of the visual elements and layout, ensuring it’s easy to navigate and aesthetically pleasing. By working together through a user-centered approach like design thinking, UX/UI designers can create products that are not only functional but also a delight to use. If you’re just starting with UX/UI, consider the following tips.

1. Rather than generalizing your product offerings, get good at a compact, strongly defined set and expand on that strategically as you increase your skillset.
2. Build reproducible systems and templates.
3. Invest in those systems. They’re part of your product, and you don’t want to let it die on the vine.
4. Align early, align often: Set common goals with your team to ensure a strong strategic cadence across your organization.
5. Recognize the difference between UX and UI and appreciate that they are different disciplines.