The difference between UX and UI design and why you need both

All products, not just digital ones, have a user experience (UX). A refrigerator, for example, has a vegetable bin, an egg tray, and a light that turns on when you open it. Or a chair has four legs, a soft seat, and a backrest for comfort. UX is basically anything that contributes to us enjoying using something.

What is UX design?

UX design is about providing users with an optimal experience when interacting with a digital product - and it's far from just visual aspects. Rather, UX design deals with the overall experience of digital systems. This can be apps or websites, but also streaming services, user interfaces of video games, virtual reality or self-checkout kiosks.

Essentially, a UX designer's job is to think about how such systems feel to users and how they should be operated. Above all, it's about understanding people and how they think. Only when the UX design is in place can the work on UI design begin.

What is UI design?

User Interface (UI) is all about the look and feel of a digital product and engaging users aesthetically - for example with typography, colors, buttons, icons, illustrations, animations or images. Nevertheless, it is also the task of UI design to make a system easier to use. For example, if an element is green, this is usually not for aesthetic reasons, but because this color is associated with approval.

Applied to the example of architecture, UX and UI design could be distinguished in this way: UX design creates the basic framework, divides the spaces, and plans the structure of the building. The UI design, on the other hand, determines the details such as door handles, curtains and the general color concept. In the end, all these elements come together to create a pleasant overall atmosphere.

The long road to really good UX design

The biggest part of UX design is making a product functional, and that road is actually quite long. Depending on the complexity of a product, it may take more or fewer steps to achieve perfect functionality. However, without the following 15 steps, it will be difficult with the really good UX design:

Step 1: Kick-off meeting

Meet with your team (and your client, if you're an agency) to work out all the important information and create an initial structure. The kickoff meeting provides an overview of the purpose of the product, establishes who will be involved in its design and development, how the team will collaborate and keep up to date on progress. At the end, you establish the project's intended outcomes or metrics for success.

If you are an agency working on your client's product, I recommend holding two separate kick-off meetings each with your client and your team.

Step 2: Competitor analysis

Competitor analysis provides strategic insights into the features, functions, operations, and feelings that your competitors' products evoke. Engage extensively with your competitors' design solutions. This will help you strategically design your own product to stand out from the rest. Most often, competitor analysis is a spreadsheet where you list all the good as well as bad features of your competitor's products.

Step 3: Proto-Persona

Creating a proto-persona will help you understand your users better. Imagine the people who will use your product, what their goals are, and how they came to your product. Proto-personas are based on assumptions and give you a starting point for your UX design. They help you make initial design hypotheses and figure out where to start evaluating your product. Proto-personas can also help raise awareness and strengthen the user's perspective. All of this can then inform strategic product development.

Step 4: User interviews

Contact people who think, look, and behave the way proto-personas might. This will help you gather information about what is important to them and what drives them to use a product. User interviews give you a better understanding of how your target audience thinks and talks about a topic and are also a great foundation for creating personas.

Step 5: Personas

Personas are fictional characters, but unlike proto-personas, they are created based on real market research. They represent the different types of users who might use your service, product, website, or brand in a similar way. Creating personas helps you better understand your users' needs, experiences, behaviors, and goals.

Step 6: Card Sorting

Card Sorting is a method for creating a foundation for the information architecture of a website or app. In a workshop, you work with your product team (and your customer, if applicable) to write down all the relevant topics for the product on cards and group them in a meaningful way. Afterwards, label the groupings and voila - you can see at a glance what is important for your digital product.

You can do this with regular paper or sticky notes. For a digital card sorting workshop, I recommend Miro.

Step 7: Information architecture

An information architecture is a functional hierarchy. It gives a digital product a logical structure and organizes the content of a website or app. It should be very well thought out so that your users can find required information and complete desired activities in the fastest way.

Step 8: User Stories

User stories are a type of scenario - the representation of small instances in the user's life before, after, or while using your product. They are used in the design process to empathize with the person behind each user and generate ideas about what could make the user experience even better.

Step 9: User Journey Map

A user journey map (or customer journey map) is a diagram that visually illustrates the user flow through your product. It starts from the first contact or discovery of your product all the way through the engagement process and, ideally, to long-term advocacy and loyalty.

Step 10: Flowchart

Also called a flowchart or flowchart, these are different shapes that are combined to represent possible workflows or processes of your product. The different shapes represent different types of events. The shapes have the same meaning worldwide. For example, the beginning and end of a user flow are always a circle, an action is a rectangle, and a question is a diamond.

Step 11: Wireframing

Wireframing is the process of determining an outline of the structure and flow of possible design solutions. Wireframes are user-oriented designs of digital products. They reflect user needs as well as business requirements. Whether on paper or using software, wireframes help product team and stakeholders to implement ideas and develop optimal products. The most popular tools for digital wireframing are Figma and Sketch. We at Mindnow also work with these two.

Step 12: Prototyping

The prototype is a working, albeit simplified, partly still experimental model of a digital product. It serves as an initial proposal for a design solution that UX designers can use to test or validate ideas, assumptions and other aspects quickly and cost-effectively. This allows the concept to be refined and corrections to the UX design to be made before the product is released.

Step 13: Usability tests

In practice, usability testing means that a group of representative users tests how easy the digital product is to use. UX designers and/or UX researchers observe the test subjects as they try to complete the tasks given to them. The test can be conducted for different types of designs. Often, usability testing is performed repeatedly throughout the project, from an early stage to the release of the product.

The findings of usability testing help UX designers make the right decisions. Even if they mean an extra step: Overall, usability testing saves time and money in design and development by turning assumptions into facts and eliminating the need for discussion.

Step 14: A/B testing

A/B testing is a technique where users are randomly shown the A or B variant of a UX design when using your product. It's a great way to get insights into how your users interact with your product's prototype and which of the two variants they prefer. It can help you learn what your users like better, what they find challenging, and ultimately how to improve the product even further.

A/B testing is common practice, yet it is only one approach of many on how to test the usability of your product. It is crucial that you test your prototype sufficiently. Only when you are sure what the ideal user flow should look like, the visual part of the design concept begins - the UI design.

Step 15: UI design

Only at the very end do you focus on the actual design of the user interface (UI). UI design combines interaction design, visual design, and information architecture. One of the tasks of UI design is to make sure that the user interface elements are easily accessible, understandable, and user-friendly. It ensures that your users can perform the desired actions with ease and, of course, that the overall design concept looks good.

Satisfied customers are worth the effort

Properly good UX/UI design means a digital product that your customers will enjoy using again and again. And because satisfied customers are the key to success, UX/UI design plays a very crucial role in business success.

All the steps listed here are an example of the ideal process, assuming there is enough time and budget. There are many more possible steps that take UX design to perfection, but in practice not every product actually needs every single step. However, in the spirit of good UX design and the goal of moving your business forward, I highly recommend incorporating as many of these top 15 as possible into your design process.

The most important thing to remember is that you should start your UX design with UX research and not just visualize on it. If you don't know exactly what your users' problems are, you can't know what aspects to design your product around to solve them. If you don't check how potential users think about the product, what they feel and how they interact with it, you can't be user-friendly either. And after all, what would be the point of a digital product that doesn't address the needs of its users - your customers?

In summary, UX and UI design is about seeing a problem through the eyes of the user and building a bridge between the product and the user. With the help of a suitable information architecture, a realistic user journey and a tested prototype together with a portion of design thinking, it works. Oh, if only everything in life were so well thought out - many things would be simpler and more beautiful. Let's at least strive for that.