UI/UX on a small budget: Big impact through targeted measures

In an ideal world, every software project would have its own UI/UX team. In reality, however, a few targeted measures are often enough to turn a functional but unattractive interface into an effective tool that really supports users.

The challenge

Many IT teams are faced with a situation where their self-developed software is used intensively, but the topic of UI/UX is often neglected in everyday life. Designers are rarely available and budgets are limited. Nevertheless, there is still a desire to create an application that not only works, but is also intuitive and attractive. This is precisely the challenge our customer faced. But together, we achieved a big impact on a small budget. Here's how we did it.

A pragmatic, structured, and collaborative approach

A proven approach begins with a pragmatic and collaborative method. Even in the preparatory phase, it is advisable to represent typical users through personas and map the entire end-user journey using a user journey map. In this case, it was very easy to derive this from the existing customer journey map. These methods are firmly anchored in the second step of user-centered design and help to understand the actual needs of users and develop targeted solutions.

Figure 1: User-centered design process, adapted from Atiyeh Vaezipour et al. “Enhancing eco-safe driving behavior through the use of in-vehicle human-machine interface: A qualitative study.” Transportation Research Part A: Policy and Practice 100 (June 2017)

It is a good idea to organize a workshop with an interdisciplinary team with the aim of understanding the challenges, developing creative solutions, and defining the target vision for the UI/UX initiative. For this customer, the workshop began with an introduction to the topic, followed by a presentation of the persona and the user journey map. This was followed by a joint live walkthrough of the software. All participants were invited to take notes about the software: What works well? Where are there uncertainties? Which aspects are disruptive in daily use? The collected observations were then discussed and prioritized together. This often reveals numerous small stumbling blocks that are easily overlooked in the development process. One example that was identified was the color scheme of an input field, which was colored red due to a user error and marked with a red check mark. This check mark and the input field should turn green when the input is correct. It is also important to take seemingly minor details into account. For example, almost 10% of men have red-green color blindness, which means they cannot tell whether this input field is red or green and whether a check mark indicates that everything is OK.

Figure 2: An inappropriate mix of colors and icons can lead to confusion and is therefore not recommended.

This customer was particularly pleased that the live walkthrough highlighted many of the software's strengths, which were backed up by design principles. Examples include the use of breadcrumbs, which complies with the first of Nielsen's 10 heuristics, “visibility of system status.”

Figure 3: Breadcrumbs that show the user where they are

To better understand the expectations of product owners, it is advisable to define joint goals for further development. From this, concrete design principles can be derived – both for the UI and the UX. It is particularly effective to link theory and practice directly.

To do this, you can work with the Crazy 8 method during a creative phase, for example. This encourages out-of-the-box thinking and allows numerous ideas to be collected in a short period of time. (We have summarized this and other creative methods in our Design Thinking Toolkit.) The results developed using this creative method were clustered together, pre-prioritized using dot voting, and finally prioritized using the MoSCoW method. The end result is a clear roadmap that shows which improvements should be addressed immediately and which can follow later.

Prototyping and implementation

With these insights, various flows could be developed in Figma. For those who don't use Figma on a daily basis: flows are interactive sequences that show how users navigate through different screens and functions of an application. They are ideal for quickly bringing processes and designs to life and gathering feedback before anything is implemented at great expense.

When time and budget are limited, it is crucial to focus on the essential processes. Instead of working out every detail, the focus is on the core functions that bring the greatest added value. Reusable UI components help reduce development effort and increase speed. It is important that the UI components are as simple as possible – with few statuses and not like in a professional design system for entire design teams. It is equally important to gather feedback at an early stage, which was done in the case of our customer. The workshop team met again to discuss the results and then carried out another short implementation iteration.

The greatest added value for the customer was the ability to quickly develop UI components in the new design and transfer them to the entire software. This gave the team a clear direction for further development and enabled them to take immediate action.

Summary: How to achieve quick UI/UX success

• Pragmatism over perfection: Focus on quick, testable steps instead of lengthy, comprehensive solutions. Simplified design systems with few components (UI elements) are usually sufficient for initial flows.

• Details make the difference: Even small changes—such as the example with the red check mark—can noticeably improve the user experience.

• Get early feedback: Iterative prototypes and quick tests prevent costly rework.

• Use collaboration: Involve all relevant roles to bring together different perspectives and ideas.

• Structure and reusability: Work with clear processes and modular UI components to save time and money.

 Side note: UI vs. UX – What's the difference?

The terms “UI” (user interface) and “UX” (user experience) are often used synonymously, even though they refer to different aspects of design. UI describes the visual and interactive surface of an application, i.e., the colors, typography, buttons, layout, and all elements that users see and operate. UX, on the other hand, encompasses the entire user experience: How intuitive is the navigation? How quickly can users find the functions they want? How does the process feel? From the first interaction to the completion of a task.

In short: UI describes the look and UX describes the feel. Both disciplines are intertwined, but a nice interface alone does not make for a good user experience. Only when design, functionality, and user needs come together does a coherent overall picture emerge.

Cover image: fauxels from Pexel