Back in the 1970s, when computers were first introduced, you really had to be a scientist to use one. The command line, which was how that scientist and a computer system would interact, demanded knowledge of a computer language in order for the machine to understand what needed to be processed.

The first breakthrough that signaled that a regular person, like you and me, could use a computer, was seen a decade later; the creation of the first Graphical User Interface (GUI) at Xerox PARC was the foundation for the digital house we now live in.

Dedicated work on perfecting this “small” intervention by major companies like Apple, Microsoft and IBM gave the opportunity to the non-scientific bunch to become a part of the “techies”.

Fast forward through the birth and rise of the internet, smartphones, Google becoming everyone’s best friend, aunts sending their regards through Facebook and kids’ dancing TikToks, the computer community seems to have given birth to a new pair of professionals: User Interface (UI) and User Experience (UX) designers.

Even though both of these professions stemmed from the end of the 20th century, what gave them the privilege of being a lunch-time conversation topic is the significant growth in the number of people doing UI and/or UX design in the past couple of years. This growth is driven by the increasing importance of user-centered design, and rightfully so – how easy it is for your customer to use your product should be the most important thing in your development process.

Given that UI and UX design is very often done by the same person in a company, the confusion about the difference in these two fields is as common as their popularity. They are used interchangeably, but the fact is - they are not the same. Each design field has its own responsibilities and duties that are very important for the development process of a web application.

We can only suspect that you’re here because you want to know everything about these two professions, and we’re happy to shed that mystery.

User Experience <UX> How an app works

If you googled this profession before –or maybe even spoken to ChatGPT about it – you may have gotten a bunch of key words like these: user needs, user pain points, user research, user interviews, user journeys – user, user, user.

What does this kind of user-centricity actually mean?

User is the focal point of a User Experience designer. A UX designer needs to know everything they can about the user they’re designing for. From their preferred gender, their age, personality, world and religion perspective, daily habits – you name it, they need to know about it.

That knowledge builds something called a User Persona – when you know who you’re talking to, whether verbally or visually, you know how to make the product appealing and intuitive just for them.

In addition, a UX designer needs to know everything about the problem their User Persona is having: scheduling a doctor’s appointment, keeping track of daily habits, staying in touch with their loved ones are just a few examples of how a repeated and maybe even a mundane task can be solved through a digital product.

All of this User Research is done before anything else, and represents the foundation the future work of everyone in the team is built upon. It can be done through conversations and interviews with different stakeholders, creating and distributing surveys and a lot of time spent browsing the web.

After gathering all this knowledge, some UX designers jump into making User Journeys. Think of this journey as a map – not a pirate’s treasure map, but a map of all the steps a user has to take when using a website, application or a software. From the minute you open the product, then logging in, clicking through, and eventually paying the price for whatever new garment you “only window shopped” for - it was all carefully planned out by a UX designer through that product’s journey map. Not only that, these journey maps help locate the possible issues which users have while using the products, along with areas of improvement for a smoother product use.

Following a User Journey is the creation of a wireframe and/or a prototype. A wireframe is a low-fidelity example of how the software the UX designer is working on should look like. That means it contains general placements of elements like buttons, images, text, video. Bringing it to a prototype stage basically means that whatever you see is clickable, but not functional.

You can get to know the User Journey through a prototype– what comes after clicking a button on the screen, but doesn’t have the code implemented to actually do any of the needed calculations.

These proposed solutions can then be tested with the rest of the design team, stakeholders, but most importantly the users of the product for future iterations, improvements, feedbacks and insights. There are a lot of different tests, from usability testing and A/B testing, through surveys and questionnaires, to focus groups and eye-tracking, and they all have the same goal: to ensure that the product meets the needs of the users it is intended for.

The exact test is determined by the specificities of the product, the goals of the designer or the design team, and the user persona.

User Experience design is an iterative and collaborative process. Knowing whether a design choice was wrong or right can only be determined with back and forth information sharing between the users and the designer.

One thing to remember when hiring a UX designer, though: you and your UX designer have the same goal - satisfying your customer. Yes, your customer, the person that will be using your product the most. They aren't designing for you, and are certainly not designing for themselves.

That being said, a lot of designers have a style of work they prefer as well as a type of product they specialize in, so their portfolio can prepare you for the kind of UX weapons they have within their arsenal.

User Interface <UI> How an app looks

In a fast paced, digital and social media-based environment, being exposed to images as much as we are can only be just another signal that beauty as a concept is a very important part of the human experience. Whether or not we, as a group of 8+ billion souls with various opinions and differing experiences, can agree on what is beautiful in what domain is disputable.

Or is it?

“Beauty is a combination of shape, form, color, composition, material and texture, to please the aesthetic senses, especially the sight.”

Segmeister&Walsh, Beauty

Back in 2018, Stefan Segmeister and Jessica Walsh created a multimedia exhibition followed by a published book regarding the evergreen question of what Beauty actually is.

Why are we attracted to Beauty and what are the positive effects that Beauty can have on us?

Through careful scientific research and a lot of specially designed surveys with visual examples from the fields of graphic design, product design, architecture and urban planning, Segmeister and Walsh dug deep into what is considered beautiful. As a result, they presented a plethora of statistically relevant information that demonstrate that beautiful forms can carry a function themselves.

Why is the concept of Beauty relevant when talking about User Interface design?

Beauty not only impacts the way we feel, but it also changes the way we behave.

Segmeister&Walsh

And that behavior is influenced by none other than a UI designer.

Well, when using a digital product, anyway.

So… What does a User Interface designer have to do to make a digital product both beautiful and functional?

Much like the UX designer, in order to influence the User’s decision making, a UI designer has to know everything about the User persona they’re making their product for. Digging into the user’s personal preferences is the key to knowing what their visual preferences are, and how the combination of the two impacts the way they behave.

After reviewing the low fidelity wireframes and/or prototypes delivered by a UX designer, the UI designer has an idea of what is needed to make a Design system for that product. You can think of a design system as a document of all components that are used and reused in a product, as well as guidelines and tools that will make the preservation of consistency easier, and the design and development processes more efficient and effective.

Even though a Design system can vary from product to product, there are a few base elements that are typically included. Branding elements are the first on the list. Defined colors, typography, patterns or any other visual elements establish consistency throughout the project. Not only that, if you wish to make certain that your company’s brand is securely tied to your product, this type of visual link is key.

UI components such as buttons, forms, icons, and so on are next to be defined, followed by interaction and animation patterns, color palettes, layout grids, typography variations in respect to content hierarchy, as well as development guidelines that ensure the product’s functionality and maintainability.

Placing the right elements in the right place by following the wireframe of the application, website or software, ensures that the final look, or a high fidelity prototype of a product is revealed. Whether the application is designed for a desktop, tablet, a mobile phone or all of the above (also known as responsive design), the UI designer needs to make sure that the product is consistent, accessible and helps the user reach their final goal.

A very important part of a UI designer’s work that is integral to a project’s lack of user frustration is Optimisation of loading speed. Compressing, downsizing or just saving an asset like an image or a video in a particular way results in the faster loading speed of a page. This not only saves some valuable memory space, but also makes sure that the app runs smoothly from the first time you open it.

To ensure all of the visual elements serve their purpose, are visible and readable, a UI designer has to follow some of the basic rules of graphic (or any) design, like typography, color, contrast, balance, proximity, alignment, repetition, simplicity and hierarchy. All of these elements create the shape, form, composition, material and texture of a project making its functions beautiful.

And in turn - it’s beauty functional.

The bottom line

Even though both UI and UX designers have the same goal of navigating, empathizing with and aiding the user, their toolbox is filled with different tools. While a UX designer focuses on user research, user journeys, user problems, user tests and information architecture, a UI designer takes care of the visual design system and product consistency, asset design and optimisation, as well as the overall aesthetics of the project.

To make sure that your product ticks all the right boxes, schedule a call with our CEO to kick off the design and development process.