You can build a bold and visually expressive app without compromising usability by following a simple three-step approach: design a clean structure first, add the visual layer with intention, and validate your assumptions with real users.
Most telco apps look the same. Safe colors, small fonts, nothing too exciting. Moj Tomato, the app we built and designed for A1 Hrvatska’s B-brand Tomato, is the exact opposite. Bold, expressive, colorful, and playful, it breaks almost every convention in the telco category.
As the designer on the project, my biggest challenge was translating the bold brand identity into a mobile experience without compromising usability. That balancing act is something many product and UX/UI designers face when working with brands that have a strong brand identity.
In this article, I’ll walk you through the three-step approach that helped us achieve a balance between expressive UI and effortless UX, validated through usability testing.
You don’t have to choose between strong visuals and good usability
In product design, functionality and aesthetics aren’t competing forces. They are two sides of the same coin. A product that only looks good but doesn’t work properly will struggle to attract users, while a beautiful product that doesn’t function properly will quickly frustrate them and be abandoned.
Take a hair dryer, for instance. It can have a striking shape, bold colors, futuristic buttons, and smart technology. But if you can’t dry your hair with it, none of those details matter.
The same principle applies to apps. Brand identity and user experience are separate but deeply connected layers of digital product design. Brand identity defines how the product should look and feel. User experience determines how the product should work.
A bold, expressive visual identity doesn’t have to come at the cost of a simple, easy-to-use experience. When users find an app difficult or confusing, it’s never because of bold brand elements. It’s because of poor navigation, unclear labels, weak hierarchy, and messy flows that make simple tasks feel unnecessarily complicated.
Those are structural problems. No amount of toning down the visuals will fix them. The better approach is to separate structure from surface and design them in sequence.
Step 1: Build a clean structure
Before introducing color, branding, or personality, focus on creating a structure that users can navigate without friction. This means clear navigation, a logical hierarchy, and flows that allow users to complete tasks in as few steps as possible.
For the Moj Tomato app, I started with black-and-white wireframes. Three tabs, clear hierarchy, and a minimal number of steps for core tasks. No color, no brand elements. Just the skeleton of the app. The only question I was trying to answer at this stage was: can users understand what they need to do? If they could not, the structure needed refinement before any brand elements could be introduced.
Step 2: Design a surface that supports the structure
Once your app has good bones, the bold visual layer suddenly has room to breathe. But it is not there for decoration. It exists to support ease of use and guide the user experience.
The Moj Tomato app has an expressive UI with large typography and loud colors. Roma red anchors the interface, with Lemon, Valencia, and Tomatillo colors adding vibrancy across cards and buttons. The illustrations go a step further: most apps use a checkmark for a success state; Moj Tomato uses a tomato-shaped mountain. Despite the strong visual language, every element is designed to support usability. And testing confirmed it.
The large typography and bold color system establish a clear hierarchy that guides users through the interface and highlights what matters most on each screen. Users described the experience as transparent and easy to understand because pricing, benefits, and key actions were immediately visible.
The problem with most apps isn’t small fonts or safe colors on their own. It’s the weak hierarchy that hides important information.
Step 3: Test on real users and leave your ego at the door
Once structure and surface come together, usability testing shows whether they actually work together in practice.
Designing boldly is always a risk, and that risk only pays off if it’s validated. Strong visual choices can improve clarity, but they can also introduce friction if they are not validated with real users. Industry standards exist for a reason. If you want to challenge them, you have to be willing to test your decisions and change them when needed.
For Moj Tomato, I ran usability tests to check whether users understood what they were looking at, could find key information, and could complete important tasks without being distracted by the visual style. Most users successfully completed the key tasks. But I also paid close attention to moments of hesitation, mistakes, and confusion, as well as the overall feedback.
Based on this, I refined the hierarchy, adjusted labels, improved UI components, and added more clarity to key confirmation screens. None of these changes touched the color system or the core visual language. The personality stayed intact, while the friction was removed.
Protect usability, keep the personality
The takeaway is simple, but important. When you start with a clear structure, the visual layer has something solid to sit on. When you apply a bold surface on top with intention, it can amplify ease of use. And when you test, you find out where reality disagrees with your assumptions, so you can improve.
Hopefully, the next time you’re designing an app, you won’t feel like you have to choose between a product that feels unique in the market and one that works well for users.
