AI-driven applications introduce a new set of challenges for user experience design. Traditional web applications operate within predictable boundaries, where requests complete in a consistent and measurable way. AI features change that dynamic, with response times ranging from near-instant to long-running operations that can take minutes. Designing for that variability is no longer optional, it is a core part of building reliable AI-powered applications.

The challenge extends beyond implementation into perception. Users do not experience time objectively; they react to how it feels. A blank screen creates doubt, while visible progress keeps the experience grounded. When feedback aligns with the effort required, the interaction feels natural. When it does not, friction builds quickly. Thoughtful loading design addresses this gap by communicating progress, setting expectations and reinforcing the value of the task in motion.

This guide focuses on practical loading UI patterns for AI scenarios, organized by real-world wait times. Each pattern is implemented with Blazor and Progress Telerik UI components, keeping the discussion grounded in tools developers already use. The goal is simple: create loading experiences that do more than fill time, improving perceived performance and building confidence in the system behind the scenes.

Understanding AI Application Loading Patterns

AI applications introduce a different class of loading behavior. Traditional web requests are relatively predictable, but AI workloads are not. Inference, natural language processing and computer vision all introduce variability based on model complexity, input size and system load. As powerful as these capabilities are, they require a more deliberate approach to how progress is communicated.

Effective loading experiences center on managing expectations through clear, continuous feedback. Every loading state should communicate what is happening now, what has completed and what comes next, keeping users oriented as the system works. With this foundation in place, loading patterns can be tailored to specific wait times, keeping the experience responsive and understandable regardless of how long processing takes.

Near Instantaneous Responses (Less Than 1 Second)

For interactions under one second, traditional loading indicators often add more friction than value. Quick flashes of spinners or progress bars create a visual glitch that feels broken rather than helpful. Instead, the interface should respond immediately with subtle visual feedback that confirms the action without interrupting flow.

One exception stands out: when a fast action represents the final step in a longer workflow. In these cases, introducing a brief, intentional delay can create a sense of completion, giving users a moment to recognize the result of their effort before moving on.

AI Task Examples

AI tasks that typically complete in under one second include:

• Real-time text suggestions and autocomplete
• Simple sentiment analysis on short text
• Basic image classification with lightweight models
• Cached AI responses
• Rule-based chatbot responses
• Simple recommendation filtering

Blazor Implementation Strategy

Implementing instantaneous feedback in Blazor requires careful coordination between state changes and visual cues. The goal is to reflect user actions immediately while avoiding flicker from overly brief loading states. In practice, this often means enforcing a minimal display duration for indicators so that interactions feel smooth and intentional.

Try the A/B samples below by clicking the “Zoom and Enhance” buttons twice. The A sample should feel smoother on short intervals because of the intentional delay.

UX Strategy

Instant interactions benefit from confirmation rather than explanation. Subtle cues like button state changes, input highlighting or lightweight animations signal that the system has responded, keeping the experience fluid and uninterrupted. When these signals are consistent and immediate, users stay oriented without feeling like they are waiting.

Short Wait Times (1–3 Seconds)

Short waits call for lightweight, indeterminate indicators that acknowledge progress without interrupting flow. Simple spinners or skeleton screens work well because they provide immediate feedback while keeping the interface responsive. More elaborate animations tend to work against this, as users do not have enough time to process them and the interaction can feel slower than it is.

Skeleton screens are especially effective in AI scenarios because they establish structure upfront. By rendering a placeholder version of the final layout, the interface maintains continuity and gives users a clear sense of what is coming next as content is generated.

AI Task Examples

AI operations in the 1–3 second range include:

• Text generation for short responses
• Image enhancement or basic filtering
• Summarizing a document of moderate length
• Translation of short to medium text
• Basic data analysis and insights generation
• Voice-to-text conversion for brief audio

Blazor Implementation Strategy

Chat Progress and Thinking

The Telerik UI for Blazor Skeleton component provides a straightforward way to mirror final layouts while AI-generated content is loading and the agent is thinking.

Smart Paste Loading

The following demo shows a smart paste interaction that incorporates loading indicators to signal the process taking place. The Loading Container is displayed over the form fields being populated, while a button loader indicates the action is taking place once the button is clicked.

UX Strategy

Short waits benefit from clarity without added friction. Contextual messaging that reflects the task in progress, such as “Thinking” or “Generating recommendations,” helps users understand what is happening without slowing the experience down. When combined with progressive disclosure, where partial results are rendered as they become available, the interface stays active and responsive, reducing perceived wait time while making the system’s work visible.

Medium Wait Times (3–10 Seconds)

Users begin to question responsiveness, and a lack of visible progress quickly turns into doubt. Multi-agent workflows or agentic workflows with multiple indeterminate steps can be difficult to navigate. Agents can make requests to external tools that have asynchronous processes. While these processes run, it is important to report the activity in a manageable way without losing focus of the main content.

Blazor Implementation

Provide feedback for AI operations that expose measurable progress. The example below shows a chat process where the agent uses external tools. Loading indicators are exposed in a collapsible panel to allow the user to see the progress but also hide it when the details are no longer necessary.

UX Strategy

Medium waits benefit from a balance of clarity and momentum. Directional time estimates, even something as simple as “This may take about a minute,” help users decide whether to stay engaged or return later, while continuously moving progress indicators reinforce that the system is still working. When paired with contextual messaging that explains the current step or highlights what is being processed, the experience shifts from passive waiting to a guided interaction that keeps users oriented and informed.

Extended Wait Times (10+ Seconds)

Extended wait times require a different approach. Clear visibility into progress matters, but so does the freedom to move on without losing track of what is happening. Combining progress indicators with background processing patterns allows the system to stay transparent while keeping the rest of the application usable.

Percent-complete indicators play a central role here by giving users a sense of scale. Seeing measurable progress helps them judge how much work remains and whether it is worth continuing to wait. At the same time, providing cancel or abort options keeps users in control rather than locked into a long-running process.

Step-based indicators work especially well for multi-stage AI operations by breaking the process into clear, understandable phases. Even when exact timing is uncertain, each completed step provides direction and reinforces forward movement.

Blazor Implementation

The following example uses a grid format to display and manage agent activity. Each element displays important information about the task’s state. In addition, failure modes are included and made actionable from the interface. This type of UX is great for dashboard-like scenarios where users can launch agent workflows and return later to see the task completion status.

If the user may encounter a long and undetermined loading state, a looping indicator can be used to communicate the overall steps that are running in the background, without labeling exactly what stage the process is at now. This nondeterministic progress indicator displays a carousel of information while the user waits.

With agentic applications, long processes can give the impression of wasted time, even though a process that takes minutes for an agent may have taken a human hour to complete manually. This loading pattern reminds users of the work going on behind the scenes. While some consider this a “dark pattern” when used to obscure the process details, it can be quite useful when used correctly to share honest information about the value the process provides.

Extended waits benefit from a design that prioritizes flexibility and user control. Background task patterns, such as persistent status panels or drawers, allow users to continue working while keeping progress visible, reducing the friction of being forced to wait in place. When paired with notification systems that signal completion, the need to actively monitor progress is removed entirely, giving users confidence that the system will follow through.

Longer waits create space to surface meaningful insights, explain processing steps or provide guidance for improving future results. When these elements are combined effectively, the experience shifts from a blocking delay to a managed, transparent process that keeps users informed without interrupting their workflow.

Advanced Patterns for AI Applications

Contextual Loading Messages

AI applications benefit from contextual loading messages that explain current processing steps. Replace generic “Loading...” text with specific descriptions: “Analyzing image composition,” “Generating creative variations” or “Cross-referencing knowledge base.” These messages build user understanding of AI capabilities while setting realistic expectations for output quality.

Streaming and Incremental Results

Many modern AI applications support streaming responses, particularly for text generation. Implement progressive disclosure patterns that display AI outputs as they generate, reducing perceived wait time while demonstrating active processing. This approach works particularly well for conversational AI interfaces and content-generation tools.

Summary

Designing loading experiences for AI applications is no longer about handling delays. It is about shaping how users understand and interact with the system. When feedback aligns with the work being performed, users stay engaged and in control regardless of how long processing takes.

By matching loading strategies to expected wait times, developers can move beyond generic indicators and deliver feedback that is intentional and informative. From immediate visual confirmation to multi-stage progress tracking, each pattern helps make AI interactions feel predictable and responsive.

Blazor and Telerik UI components provide a practical foundation for implementing these patterns, enabling teams to build consistent loading experiences without introducing unnecessary complexity. The advantage comes from how these tools are applied, not just their availability.

As AI continues to shape modern applications, loading design becomes a defining part of the user experience. Applications that communicate clearly during processing will feel faster and more reliable, regardless of the work happening behind the scenes.

Get Started with These Examples

Use any of the Telerik UI for Blazor components shown above, plus the Blazor MCP servers free with the 30-day trial.

Try Now

This is the second post in a short series called Design Principles Unpacked.

In each article, I take a design principle we use every day and look at it a little closer. Not to explain the rule. But to unpack the wisdom behind it. Because I believe our professional knowledge and experience can be leveraged beyond work. The way we design and build software shapes how we navigate everyday life.

Many of the principles we use to design software exist for a reason. They help us make things work. They help us make things simple. And that doesn’t stop at software.

Let’s unpack the next one: hierarchy.

Hierarchy Is About Order, Not Value

When we talk about hierarchy, we usually hear words like control, authority or power. That’s where much of the resistance to the word comes from.

Hierarchy feels organizational. Political. Something that limits freedom instead of enabling it.

But in design, hierarchy isn’t about restricting. Just like alignment, hierarchy is about guiding. It’s about creating flow. Not what matters more. But what comes first.

At its core, hierarchy is simply an order of importance. It doesn’t say one thing is better than another. It says one thing needs focus first. That distinction matters.

Without hierarchy, everything feels equally important. And suddenly, even getting started becomes hard.

You see this immediately in interfaces. If headlines, actions and paragraphs all get the same attention, nothing stands out. Users don’t know where to look. They spend time and energy figuring out what matters, often focusing on things that aren’t important to them.

Hierarchy answers a simple question: What should the user pay attention to first?

Not because an element is more worthy. But because it helps the user decide whether it’s relevant.

A good UI doesn’t force you to read everything. It gives you orientation. It helps you navigate. That’s not control. That’s guiding.

Hierarchy as Filtering, Not Control

Let’s unpack this principle outside of design. This is where hierarchy takes on a different tone. It stops sounding like guidance and starts feeling like control.

Everything needs approval. Everything goes through the chain. Nothing moves without permission. But that’s not a hierarchy problem. That’s an execution problem.

Hierarchy is about purpose. What matters depends on the goal.

Good hierarchy filters. It reduces noise. It protects focus. It filters what needs attention now, so the next person in line doesn’t waste time sorting it out themselves. When something matters, it moves up. When it doesn’t, it waits.

Hierarchy in Leadership

I’ve seen this most clearly in my leadership roles.

In large organizations, there is constant noise. Requests. Opinions. Priorities. If all of that hits a team directly, focus disappears. Not because people aren’t capable, but because attention gets disrupted.

As a design leader, that was my responsibility. Pass on only what was important to our goals. Protect the team. Filter the noise. The role of hierarchy there isn’t control. It’s filtering.

Leaders at higher levels don’t do everything. They decide what deserves attention now and what can wait. That isn’t all about authority. It’s about enabling autonomy.

Closure

Hierarchy isn’t about value. It’s about purpose. An order of importance that allows work to flow. Clarity over control. Purpose over power. Autonomy over authority.

When hierarchy is clear, flow is clear. And when flow is clear, freedom increases.

Read next: Design Principles Unpacked, No. 3: Affordance

This is the first post in a short series called Design Principles Unpacked.

In each article, I take a design principle we use every day and look at it a little closer. Not to explain the rule. But to unpack the wisdom behind it. Because I believe our professional knowledge and experience can be leveraged beyond work. The way we design and build software shapes how we navigate everyday life.

Many of the principles we use to design software exist for a reason. They help us make things work. They help us make things simple. And that doesn’t stop at software.

Let’s unpack the first one: alignment.

Aligned to What?

Alignment only exists in relation to something else. It can be other elements. Other people. Other ideas. But most of the time, the actual reference is invisible.

The word align comes from a line. A guideline.

Without a guideline, left and right are just positions. Consistent, but static.

A guideline gives direction. It helps us make decisions. It shows us where we’re heading and why.

Take text alignment as a simple example. Text aligns to an invisible line on the left. That line is the reference. We set that guideline to create balance. To make reading easy. To avoid wasting cognitive energy. Because we read in a specific direction. Our eyes follow a learned path.

Those considerations are the real reference. The intent is to transfer written information efficiently. Alignment supports that intent. It improves perception. And help the message get through.

Intentional Misalignment

In visual design, there’s also optical alignment. Two elements can be perfectly aligned and still feel wrong.

That’s because there’s the perfect pixel. And then there’s perceived alignment. To truly align, you sometimes have to misalign. Deliberately.

The guideline defines the intent. But the execution requires adaptation.

Alignment isn’t about snapping things into place. It’s about staying oriented toward what matters.

The Composition of Reality

Reality isn’t static either. It’s a moving composition.

If alignment depends on fixed positions, you run into trouble. “Left only” works as long as the context stays the same.

But when you align to a guideline instead of a position, you can realign. You know what you’re orienting toward. You can adjust without losing direction. That’s why alignment works best when it’s relative, not absolute. Reality never stands still.

When you’re in an argument, you’re misalignment. Not because one of you is wrong, but because you’re focused on positions. Look past left and right. Find the invisible guideline underneath.

Aligning doesn’t mean watering down your convictions. It means recognizing the line you use.

Conclusion

The real skill isn’t knowing where to place things. It’s learning to recognize the guideline you’re aligning to. And choosing your position with intent.

When you zoom out, alignment becomes more than a principle. It becomes a way of positioning yourself on purpose.

Your position will change. Because reality happens.

But the line you align to? That’s what makes it by design.

Next post: Design Principles Unpacked, No. 2 Hierarchy

The landscape of web design can change dramatically from year to year. Not just because of trendy UI styles or features either. The world is changing fast and, with it, our users. As a result, their needs, desires and preferences when interacting with brands evolves over the years.

To keep pace with everything going on, web designers need to seek out opportunities for education. Reading blogs and books, listening to podcasts and following thought leaders on social media can be helpful. In many cases, though, this kind of content only covers the tip of the iceberg.

For a more comprehensive education and update on what’s happening, industry conferences can be valuable resources.

Every conference is different in terms of theme, availability (in person and online), cost and content. If you’re interested in attending a conference or two this year, keep reading to learn more about what’s available.

7 Upcoming Conferences for Web Designers

One of the nice things about web design conferences is that they’re held throughout the year. Some of them even offer virtual attendance options (if they’re not fully virtual to begin with). So if you miss one, there’s always another one down the road you can attend.

Here’s what you can expect at the following conferences for designers:

Adobe MAX

Location:

• In-person: Miami Beach Convention Center in Miami, FL
• Online

Dates:

• November 8-9, 2026 (Preconference)
• November 10-12, 2026 (Conference)
• November 10-11, 2026 (Online event)

What to expect:
Adobe MAX offers both an in-person and online annual event for designers, developers and creatives of all levels.

More than 150 sessions take place during this event. Sessions are broken up into different tracks, and include:

• 3D
• Branding
• Creativity and marketing for business
• Generative AI
• Graphic design
• Illustration
• Social media marketing
• Audio, motion and video

What’s nice about this conference is that each session will be assigned a technical level. This way, you can choose sessions that align with your interests and level of experience.

Now, if you plan to attend the in-person conference, you’ll have access to keynote speeches, Adobe Labs sneak peeks, 60-minute luminary sessions and creativity super sessions. After the conference, you’ll also be able to watch screen capture and audio recordings of any events you missed.

If you’d prefer to attend online, the programming is slightly different. Online Adobe Live Sessions will be 30 to 60 minutes and give you access to First Takes and Meet the Speaker sessions where you’ll learn more about Adobe products. Online presentations will only be available as replays and will last between 15 to 30 minutes.

Figma Config

Location:

• In-person: Moscone Center in San Francisco, CA
• Online

Dates:

• June 23-25, 2026

What to expect:
Figma Config is an annual conference for anyone involved in the development of products—designers, developers, marketers, product managers, etc. While some of the sessions revolve around Figma products and features, there are others that focus on the present and future of product design.

The sessions fall under the following themes:

• Strategy
• Process
• Craft
• Design systems

Although the schedule isn’t available yet, you’ll find highlights from 2025 Figma Conf from last year. These keynotes and sessions dig into topics like redesigning the computer mouse, collaborative brand design and creating interactive animations.

If you’re interested in watching the virtual conference, it’s free. You just won’t be able to watch the sessions in real time. The keynote sessions will go up on YouTube the day of and the breakout sessions will appear on YouTube once the conference is over.

FITC

Location:

• In-person: The Great Hall in Toronto, Canada
• Online

Dates:

• April 27-28, 2026

What to expect:
FITC stands for “Future. Innovation. Technology. Creativity.” This two-day conference is celebrating its 25th anniversary this year. Similar to the other conferences on this list, there will be round table discussions and various session tracks to attend.

One of the biggest differences between this event and the others is its theme:

“This year, FITC Toronto explores the theme of rebirth. In a world moving too fast and overwhelmed by AI and shiny new tools, we want to pause, reflect, and bring back the concepts that inspired us as artists. We want to pay homage to our creative journey, appreciate the small foundational things we learned along the way, and celebrate the essence of our industry.”

If this is something that resonates with you, you have two ways of attending.

In-person attendees get full access to all of the presentations, can take part in the Q&A and are able to attend evening events. They’ll also get six months of online access to the main room sessions.

If you want to attend online and for a discounted rate, you’ll be able to do so in real time. You’ll also get six months’ access to the replays after the event.

SXSW Innovation Conference

Location:

• Austin

Dates:

• March 12-18, 2026

What to expect:
South by Southwest (SXSW) is known for many things. Not only is it the host of popular Music, Comedy and Film & TV Conferences, it concurrently runs an Innovation Conference in March of every year. This is the one you’ll want to pay the most attention to as a web designer.

The Innovation conference has a variety of tracks that may be right up your alley, like Brand & Marketing, Design and Tech & AI. You may also find some interesting content in these tracks:

• Creator Economy
• Startups
• Sports & Gaming
• Workplace
• Health

While AI is going to be talked about a bit, you’ll find other interesting subject matter covered at the conference, like “Meet Gen Alpha,” “10 Truths About Technology That Are Shaping Your Life” and “You Can’t Create Cultural Relevance Without Community.”

This conference is only available to attend in-person, but you do have options. You can buy a Platinum badge for access to all the conferences, one strictly for Innovation, or you can mix and match based on your interests.

UXDX

Location:

• In-person: New York or Berlin
• Online

Dates:

• May 11-13, 2026 (USA)
• May 27-29, 2026 (EMEA)

What to expect:
If you’re a UX designer or researcher, then UXDX may be a worthwhile conference to attend. Two conferences are held in May—one in the U.S. and one in Germany. While the content is similar, it’s not identical. So, be sure to check out the agendas for each conference to find the one that interests you most.

Another option is to attend the conferences online. You’ll pay a discounted rate, but only get access to 20 talks instead of the 30 scheduled.

Unlike some of the larger design conferences, there aren’t separate tracks. This conference is solely dedicated to helping product teams deliver better results. So, you’ll find sessions like the following:

• “Shipping Faster With React Server Components”
• “Are We Designing for Humans or for Agents?”
• “Engineering Seamless Journeys Across Physical and Digital Touchpoints”
• “Closing the Design–Engineering Gap (for Real)”
• “Building Inclusion Into Our Design System And Delivery Process”

The sessions might not be as flashy as other conferences, but they’re meant to be actionable and empowering for UX pros.

Web Summit

Location:

• Lisbon, Portugal

Dates:

• November 9-12, 2026

What to expect:
Information isn’t yet available for Web Summit’s 2026 conference. However, this is what we do know about this annual event:

There are 20 tracks to choose from, which include:

• AI Summit
• Commerce Summit
• Creative Summit
• Developer Summit
• Fintech Summit
• Marketing Summit
• SaaS Summit

There are a lot of sessions going on at the same time, so you’ll want to do some planning ahead of time to make sure you catch the sessions that are most important to you.

Also, don’t forget to look into the meetups available throughout the four-day summit. You’ll find them for all kinds of groups, like Robotics Geeks, Spanish CEOs, CleanTech, Women in Tech and Neurodiverse Folks. These are a great way to fill the gaps in your schedule (if you have any) while enjoying some networking.

World Usability Conference

Location:

• In-person: Graz, Austria

Dates:

• October 13-15, 2026

What to expect:
The World Usability Conference is an in-person-only event that takes place over three days in October. Attendees can choose to buy tickets for one day, for the conference or for the conference plus workshops. While there’s no online counterpart, attendees get access to the recordings after the event.

This conference is all about UX strategy and management. During the sessions and workshops, you’ll get a chance to learn about common challenges in UX research and design, and how experts are navigating their way around them.

Tracks include:

• Enterprise UX
• Future UX
• Human UX
• UX Strategy
• Accessibility & Inclusion
• UX Research
• UX Management
• Leadership
• AI & UX

If you plan on buying a one-day pass, make sure to look up which tracks are available on each day. The conference organizers do a good job placing related topics together so that you can realistically get the information most relevant to you and your role in a single day.

Wrapping Up

One of the nice things about having so many conferences to choose from is that you can pick and choose the ones that are best for you.

Do you want to attend online, watch the replay or join in person?

Do you want to go for one day or the whole thing?

Are you interested in the talks or would you find it beneficial to attend the workshops, networking events and other programming?

Also, with most of these conferences planned well in advance, most of them offer special discounted rates for early birds. So, once you decide which ones you want to attend, there are budget-friendly ticket options available.

At the end of the day, there’s something for everyone. It’s just a matter of finding one with the program that interests you most, that fits your budget and that works with your schedule.

Teams are often obsessed with the final result.

But progress isn’t only found in the finish—it happens in the steps between. When we visualize those steps, the incomplete design becomes a powerful tool.

The Illusion of Completeness

When something is complete, it looks done. It suggests certainty. It feels like quality.

But in product development, “final” is an illusion. Just because the tasks are done doesn’t automatically mean the product is good. Dragging tickets to the next column can feel like progress but might hide a serious flaw.

I was building a small LEGO digger with my daughter the other day. It was interesting to see how she was more focused on following the steps correctly than fast-forwarding to a functioning digger.

The instructions were detailed. We used the mobile app with 3D models and animations. You trust the makers that every step is there for a reason. Together with IKEA furniture, it’s one of the few manuals I actually read—and for good reason.

There’s no room for guessing. It’s designed to be assembled in a certain way. Every step is illustrated clearly, and once in a while you get a little overview of your progress.

It’s simplified with micro-success. It’s continuous completeness. The final result is the reward.

The Missing Middle

Most teams describe what should happen at the start and verify what happened at the end. But the middle? It’s often hidden.

The result is rework, misalignment and late feedback.

The solution isn’t more documentation—it’s more visibility.

Wireframes, low-fidelity mocks or prototypes can be reverse-designed. From the current state to the desired state, you can show the progression.

Take a common case: An admin console where you manage access entitlements. The current version has a simple form: email, roles, save.

Now the team wants to expand its features:

• Users can get access by adding them to a group (dropdown)
• And generate an access control report for documentation (button)

All those additions lead to a new “final” state.

But each feature introduces its own interface and backend changes. To design this well, you can accompany each user story with a lightweight wireframe or diagram showing how the interface or system evolves—from the simple form to the new version.

This illustration is very basic. So, yes, it might feel like overkill. But all I did was copy the end state and hide the report button.

That might look trivial, but I’ve seen in real projects that this kind of visibility works. It removes unnecessary guessing. It’s childproof—like LEGO.

And it doesn’t take a lot of time to produce—just hiding a few elements and sharing them.

The result is clarity about progress.

Closure

Progress isn’t all about the finish. It’s made in the steps between.

When you visualize those steps intentionally, you don’t just show progress—you design for it.

Don’t just design the result. Design the progress.

Tabs have been around for decades and I haven’t seen complex enterprise software that doesn’t use them.

In all my years designing enterprise apps, two components have proven to be either the strongest asset or the weakest link: tables and tabs.

I already wrote about tables in my post on why you can’t beat the spreadsheet. Now it’s time to take a look at tabs.

The Friendly Developer’s Shortcut

If you’ve ever built enterprise software, you know that tabs are the default. They’re easy to implement. Nest items in code, separate them in the UI. Simple.

Back in the day, developers were also the designers. Tabs were the easiest way to bring order to complex screens. They stuck because they worked.

Also, much of software design simply mimicked the operating system. It’s no surprise enterprise apps followed Microsoft’s example.

Think of the old Windows settings dialog: a tiny screen packed with tabs.

That pattern became the blueprint for squeezing dozens of options into limited space.

Making use of every pixel was considered an achievement. Mobile-first design? Not even a thing.

The Untabbed Truth

The truth is, you’ll use tabs at some point. They’re too common to ignore. They turbocharge the experience, used well. But there are pros and cons to using them.

Navigation

• Pro: Easy to scan and move between categories
• Con: Too many tabs make scanning hard and moving slow

Disclosure

• Pro: Good for hiding lots of options
• Con: Important info or actions can get lost

Structure

• Pro: Clear structure and focus when used well
• Con: Nested tabs multiply confusion

Switching Tabs: Alternatives

Tabs aren’t the only way to organize complexity. Sometimes other components do the job better.

Accordions

• Pro: Great for progressive disclosure—show one thing at a time
• Con: Expand too many and you’re back to scrolling forever

Panels

• Pro: Easy to read, even with many items
• Con: Take more screen space and clutter the screen fast

Steppers

• Pro: Perfect when groups are steps in a process
• Con: Breaks down if users need to jump around or skip steps

Developer-Friendly, User-Centered

Tabs still have a place. They’re familiar and fast to build and can structure complexity. But they can also turn into a bottleneck—for both users and developers.

User Experience

• Pro: Clear structure and focus when used well
• Con: Hidden content or clumsy navigation slows everyone down

Development

• Pro: Quick to implement, easy to drop in
• Con: Custom solutions require more work to handle states and navigation

Code

• Pro: UI toolkits like Progress Kendo UI libraries give you accessible, tested tab components out of the box
• Con: Writing custom code adds complexity and risks breaking essentials like accessibility

Instead of reinventing tabs, lean on a toolkit that handles the heavy lifting. If you need an alternative, the toolkit makes it easy to switch. That way you can focus on the one thing that matters most: delivering a great user experience.

So tabs are definitely not a taboo—just handle them with care. Use them well, and with a toolkit like Kendo UI, you’re turbocharged.

The Kendo UI component libraries come with a free trial. Give them a shot today!

Try Now

Last year, we started really exploring the designer-developer relationship: from design systems, brainstorming, prototyping and user testing through the handoff, creation and launch process. Where are things working well? Why do we hit blockers? And why can’t developers understand the difference between cobalt and cerulean? (Just kidding about that last one … mostly).

We hit the streets conferences with a whiteboard and a ton of sticky notes and talked to hundreds of designers and developers in-person about their experiences.

Then, we broadened the scope and launched The State of Designer Developer Collaboration Survey, so we could hear from designers and developers all around the world! What we found was super interesting—but no spoilers: Go check out the results and see for yourself!

Now, a year has passed—and what an eventful year it’s been! The growth of generative AI has disrupted our workflows and processes in ways we couldn’t have imagined. Last year, we had a token few questions about AI, and many of our respondents were feeling hesitant about incorporating it into their work. This year, we’ve expanded to a whole section on AI—and I suspect that the responses will be quite different!

There’s only one way to find out for sure, though. Take The State of Designer-Developer Collaboration 2025 Survey: Workflows, Trends and AI.

We want to hear from you! Have things changed in your day-to-day work? Are you a designer who’s vibe-coding more interactive prototypes? A developer who’s asking ChatGPT for color scheme ideas? Have you been over- or underwhelmed by all the new AI features popping up in your tools? Or maybe nothing has changed for you, and you’re still keeping a cautious eye on this whole “AI” thing before diving in?

No matter what you’re experience is, we’re curious to hear about it. We’ll bundle up all the results into a meticulously detailed and (of course) beautifully designed report, and you’ll be the first to know.

Take The Survey

In a world where most of our lives play out online, web accessibility shouldn’t be treated as an afterthought. Designing with inclusivity in mind is no longer optional; it’s essential. Just like a chair needs four sturdy legs to be safe for everyone, digital experiences need to be built with all users in mind.

But when the platform in question is educational, the stakes are even higher. These platforms serve a diverse range of learners—some with visual, auditory, motor or cognitive impairments, and face stricter accessibility requirements than general websites.

That’s why Resolute was proud to partner with a U.S.-based company providing online training tools for frontline employees. The platform had recently been acquired by a leading provider of online compliance and workforce training, further raising the bar for performance, accessibility and scalability. The goal: build a more functional, accessible and scalable web experience.

When Design Slows You Down

The project started with a familiar pain point: fragmentation. The client’s design ecosystem was spread across multiple sources:

• An internal Figma library shaped by years of brand tweaks
• A partially customized theme inside Progress ThemeBuilder
• A live site with Progress Kendo UI components that didn’t always align with the designs

This led to confusion, delays and inconsistencies, especially around accessibility. Developers struggled to map designs to actual components. Theming was brittle. And certain UI patterns weren’t usable for people relying on keyboard navigation or assistive technologies.

Resolute was brought in to clean it up, streamline the workflow and help the client move toward a more compliant and scalable solution.

Fixing the Foundation: ThemeBuilder in Action

Our UX/UI team began by auditing the client’s existing design system. They worked closely with their internal team to unify the visual language and migrate it into Progress ThemeBuilder, which served as the central source of truth for styling and theming moving forward.

ThemeBuilder wasn’t just a convenience; it helped enforce consistency in design tokens like colors, borders and spacing, while also helping to align with accessibility best practices.

The UX/UI team’s work included:

• Consolidating redundant button and form variations
• Fixing visual issues with contrast, spacing and typography
• Helping the design team understand how to use ThemeBuilder effectively to support long-term accessibility

From Visuals to Code: Accessibility in the Build

Once the design foundation was solid, our frontend team began implementing the new UI in code. Over several months, the platform’s frontend was rebuilt with accessibility as a core requirement, focusing not just on how it looked, but how it worked for every user.

This wasn’t just about good UX; it was also about meeting real compliance needs. Since the platform serves a broad user base in the U.S., including educational and government-affiliated organizations, several legal standards apply, including:

• ADA (Americans with Disabilities Act): Particularly Title III, which applies to educational institutions and commercial websites
• Section 508 of the Rehabilitation Act: For platforms receiving federal funding or working with government entities

To meet these requirements, we aligned the build with WCAG 2.1 Level AA guidelines developed by the W3C (World Wide Web Consortium), currently the most widely used benchmark for web accessibility in the U.S.

What that looked like in code:

• Every interactive element was accessible via keyboard navigation (tab, arrows, etc.).
• Clear, visible focus states were implemented for all buttons, links and forms.
• We structured the app using semantic HTML and applied ARIA roles for assistive tech (e.g., <button>, <nav>, <form>). Yet, we applied ARIA roles only when necessary for custom components or non-semantic elements, avoiding over-reliance on ARIA. It’s crucial to use ARIA only when native HTML elements can’t provide the required functionality.
• For use cases beyond the default configurations of Kendo UI or ThemeBuilder, we wrote custom HTML overrides.
• Duplicate labels or screen reader confusion were avoided using attributes like aria-hidden="true" where needed.

Testing was both automated and manual. Tools like axe DevTools, WAVE and ChromeVox helped flag contrast issues, label duplication and navigation traps. But human testing mattered just as much. Therefore, a touchscreen laptop was used to simulate real user scenarios, check responsiveness and validate how elements behaved across screen sizes and input types.

When Customization Adds Complexity

Telerik ThemeBuilder and Kendo UI offer strong accessibility features, but when components are heavily customized, unexpected issues can appear. Resolute helped the client troubleshoot several edge cases:

• Buttons built without the base component didn’t render properly
• Some forms displayed labels twice to screen readers (e.g., “Username Username”)
• Blazor components lacked alt-text bindings, requiring a workaround

None of these problems were dealbreakers, but they showed how expertise matters. Without frontend developers who understand both the framework and accessibility requirements, these issues could have gone unnoticed.

Accessibility = Structure + Semantics + SEO

There’s another benefit to building with accessibility in mind: better search engine optimization (SEO). Many of the same practices that support users with disabilities, like using semantic HTML, a well-structured HTML DOM (Document Object Model) and meaningful headings, also help search engines understand and rank your content.

The frontend implementation in this case included:

• One <h1> per page, with clean heading hierarchies for structure like <h2> for sections and <h3> inside components
• Alt-text for all meaningful images
• Descriptive link text and accessible navigation

The result? A platform that’s easier to use, more discoverable and legally compliant.

Knowledge Transfer Matters

Resolute’s role expanded beyond design and development work. We trained the client’s internal team to maintain and build on the system with accessibility in mind. That included:

• Documenting all accessibility decisions and techniques used
• Providing reusable design patterns in ThemeBuilder
• Running training sessions on WCAG basics and development workflow tips

Accessibility isn’t something you do once. It’s a practice. So, we made sure the team could carry that forward.

Final Thoughts

Accessibility is a shared responsibility—across design, development and leadership. Our client understood that, and, with the right tools and support, made serious progress toward a platform that works for everyone.

Progress ThemeBuilder helped streamline and standardize the design-to-code process. Resolute helped connect the dots by aligning compliance, usability and long-term scalability.

Learn more about how Resolute can help address usability issues, starting with the UX Assessment.

Interaction design is a huge discipline that prioritizes how users engage with digital interfaces.

One goal of interaction design is to capture and direct visitor attention. We can achieve this with animations, transition effects, as well as motion-based designs and media.

Another goal of interaction design is to engage users to get them to click and convert. There are a multitude of components we might want users to click on throughout their experience. For example:

• Buttons
• Links
• Menus
• Videos
• Forms
• Popups
• Chatbots
• Search forms

What we want to specifically focus on today are the buttons and links that drive our users deeper into their journey and closer to conversion. We’ll look at five best practices when designing these key interaction points.

5 Best Practices When Adding Buttons and Links to Your Site

Links and buttons do a lot of work for us, strategically guiding users from one page in the user journey to the next. So that we don’t waste their time or ours, we need to be intentional with how we design these click interactions.

Here are some tips that will help with this:

1. Put Thought into the Design

Here are some questions to consider when designing your clickable components:

Do your buttons look like buttons? This could be in terms of shape, shading/fill or depth.

For example, here’s a screenshot from the Forward Financing homepage:

There are three buttons visible:

• “Apply for Financing” in the header
• “Learn More” in the hero section
• “How can we help you today?” in the bottom-right corner

The two solid buttons in green stick out the most and are clearly buttons. The ghost button in the bottom-right corner isn’t as prominent, but it does have a button-like shape, which may convince visitors to click it.

Are your links easy to spot among non-linked text? Don’t just think about this from a color-contrast perspective. For instance, will readers with vision impairments struggle to make them out?

Here’s a close-up on a blog post from Ramsey Solutions:

There are three hyperlinks that stick out from the surrounding text. It’s not just because they’re in blue font as opposed to black like the rest of the blog. It’s because they’re underlined.

The underline is key as it allows users with visual impairments to be able to detect the links visually without having to notice the color change.

Do these clickable elements fit with your color palette? This goes for both the active and hover state.

Does the click feedback fit with the overall vibe of your site? For instance, do some animations or transition effects feel disruptive or do they flow with the rest of your brand vibe?

For these last two questions, I’m going to use Making Sense of Cents as my example.

To start, they’ve done a good job of committing to a uniform style for the link color transformation. Upon hover, the black text turns to orange.

The main problem I see is with the blocks at the top of the homepage and how they react to hover/touch. The wiggle animation feels out of place when compared to the other interactions on the page. For the most part, their other button and link interactions feel very calm. However, these blocks create tension.

So, this is the kind of thing to think about if you decide to imbue your buttons with animated effects.

2. Provide Hover Feedback

Designing buttons and links to look like clickable elements is crucial. But so is the follow through (more so for buttons than text links).

There are a couple of things we’d want to see happen when someone hovers over a button.

First, the cursor should change from an arrow to pointer icon.

Second, the button’s appearance should change. If it’s a color change, the contrast needs to be significant enough where someone who can’t interpret the colors can still tell that something changed.

On the Chase homepage, for example, we only see one button change in its hover state—the “See details” button in the hero section. The only thing that changes is the background color from light blue to dark blue.

This isn’t going to provide users with an accessible interactive experience. Ideally, we want every button to provide clear feedback when someone hovers over it.

Let’s contrast this with what we see on the Pennie website:

This website’s first button does a similar color change effect, from a lighter blue to a dark blue. However, the buttons also elongate and an arrow appears when someone hovers over them. We see a similar effect happen over the accordion tabs in the section just below the fold.

Not every button needs to offer feedback in the form of an icon. However, subtle animation effects like expanding and shrinking can help give users extra confidence that the buttons are indeed buttons and will respond to their touch.

3. Be Specific and Clear with Labeling

The appearance of our buttons and links will certainly help visitors recognize where clickable components are in our interfaces. In order to give them an extra boost of confidence that a click will be worth their time, take care with how you label the buttons.

In general, we want to avoid vague wording like “click this,” “go here” and “this page.” “Read more” and “learn more” are in a bit of a gray area.

Here’s an example from the PEAK6 website where we see some “learn more” links:

Of the 12 primary links on this homepage, nine of them say “learn more.” Most of them follow a description of one of PEAK6’s companies.

Now, given the context of these particular buttons in the screenshot, “learn more” makes sense. However, there are ways to get around labeling your buttons with vague and repetitive phrases like these—especially when you have so many of them on a single page.

Here’s a look at how Octus handles a similar type of content on its homepage:

In this section, we see four side-by-side blocks describing who the company serves. The “learn more” button would probably be a natural fit for these, even though it’s not an ideal label.

Instead, what the designer has done is this:

• Replace the button shape or text link with a small right-facing arrow.
• Make the entire block clickable instead of a small component below the text.
• Animate the block so it turns from black to blue.
• Elongate the arrow.

This is a great way to signal to visitors that a component is clickable without having to resort to repeating the same vague label over and over again. So long as you mark the heading as an H2 or H3, it should also be clear to people using screen readers where the link will take them to next.

By the way, that’s one of the reasons why we try to avoid vague labels: accessibility. The user experience is another. Also, these labels are useful for SEO purposes. By using a descriptive label for buttons and links, search engines can better determine what the purpose and value of a linked page is.

4. Be Purposeful About Adding Links to a Page

Information overload is a real problem on the web these days. It’s not just because of how much content we throw at someone on a page. It also happens when we give them too many rabbit holes (i.e., buttons and links) to go down at the same time.

Let me show you what I mean.

This is the Start Here page on the Get Rich Slowly website:

There are 29 links on this page (not including the 10 in the header and five in the footer). This is way too much for a page of this size. It’s also too much for a page that’s supposed to be an introduction to the website.

While it’s great that there are so many resources on this site and that it all seems to connect together, shoving this many links at visitors all at once can be hugely problematic. In addition to making the content look cluttered, it could distract first-time visitors from reading through the page in its entirety before getting lost down a rabbit hole.

It’s our job as designers and writers to use discernment when creating pages. We need to decide which content is absolutely necessary and when it makes sense to divert visitor attention to another page. The homepage is one thing. But a critical part of the user journey like this one is another.

Let’s look at another example of a web page with plentiful links. This is the Personal Checking page for Cadence Bank:

There are a total of 32 links on this page. 12 of them point visitors to “Open account.” Here’s why I think this example works:

There’s a cohesive message that these buttons are telling us. Yes, there are buttons that provide supporting information about personal banking services. And there are some extraneous links at the very bottom of the page which should probably be done away with.

However, the top portion of this page is devoted to one goal: Getting visitors to open an account. So while there are lots of buttons to choose from, there’s a good chance visitors will end up in the same place as they choose their next step.

Bottom line: There’s nothing wrong with including a link in each section or block—so long as it keeps the focus on the primary goal and doesn’t overwhelm the visitor’s decision-making faculties.

5. Minimize Links Along the User Journey

Websites contain loads of information for visitors at every stage of their journey. But behind the scenes, we know there’s an ideal pathway that we want them to journey down. If we design it right, they’ll naturally take those steps to conversion.

That said, the amount of options and distractions we put in their way along that path may slow things down. And that’s not what we want.

So, the first thing to do is determine what the key pages are for your conversion pathway. For some brands, it might be as simple as TransUnion’s

This is the hero section on the TransUnion website:

There are only two buttons on the entirety of this page and they both say: “Your Free Scores & Reports.” So does the big yellow button in the header.

There’s lots of info available on the website about the service as well as educational resources related to managing one’s credit. However, the homepage doesn’t bother with any of that. Visitors are actively encouraged to take the next step in the process and to see their free credit score.

This is a great example of how you minimize distractions and click options to help most of your visitors take the right journey early on.

Not every brand can do this though. TransUnion has a very narrow solution, which is why it works. For something like Trumid, however, it would be pretty difficult to build pages with singular calls-to-action.

That said, what you can do is make the first button and call-to-action on each page take users along the path to conversion. Here’s how that looks on the Trumid website:

We know that users lose interest the more they scroll down a page. So, if you feel like it would be beneficial to include other buttons and links on the page, just make sure to do so after the primary call to action has been presented.

This is what Trumid has done.

1. On the homepage, the first button invites users to “Explore Platform.”
2. This takes them to the Trading Platform Overview page.
3. The first button on this page appears just below the fold and says “Get Started Today.”
4. This takes them to the Get Started page and contact form.

Users who are ready to convert earlier can always use the “Get Started” button in the header. Those who aren’t ready have other avenues they can go down on these pages. But at least the designer has presented them with the ideal pathway without having to work much for it—when they’re ready to do so.

Wrapping Up

To help our visitors go where we want them to go, we need to leave a trail of breadcrumbs for them to follow.

For some visitors, that trail is in the header. For others that want more information and context, they’ll hopefully follow the trail we’ve created for them on the pages of the site.

This is why we need to pay close attention to these key interactive components. From how they’re designed to their placement and usage on pages, all of these factors matter if you want to improve click-through and conversion rates.

Design isn’t about decoration. It’s about creating order.

There’s enough chaos out there. Adding more features or new tech doesn’t lead to clarity on its own.

Order takes discipline. Tough decisions. Design is decision-making. It’s about setting constraints.

There are two kinds of order we care about:

• Order of importance – What matters most?
• Order of execution – What comes first? What comes next?

To shape both, you only need two tools: placement and contrast.

Understand these principles and you become a better designer—or design better. No need to memorize all the UX laws or follow every guideline. Learn these foundations, and you’ll start to recognize good design.

Let’s walk through a simple example: a login form.

Make It Flow

Design helps people move—from before to after.

Logging in is a basic flow:

• You’re not logged in.
• You enter your credentials.
• You gain access.

That flow has a few key steps: provide a username, provide a password, submit with a button.

In code, that might look like this:

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text" />

  <label for="password">Password</label>
  <input id="password" name="password" type="password" />

  <button type="submit">Login</button>
  <button type="signup">Sign up</button>
</form>

As you can see, it works!

But it lacks structure.

Let’s reshape the flow.

Placement

There are six elements in the form:

• Label: Username
• Input: Username
• Label: Password
• Input: Password
• Button: Login
• Button: Sign up

Only three of these are essential:

• The two inputs
• The login button

These perform the core action: logging in. The others are supportive—labels for context, a sign-up link for an alternate path.

We can improve the UI flow by adjusting the placement of elements:

1. Stack elements vertically – Easier to scan on the left
2. Center-align in the canvas – Creates focus and adds whitespace
3. Place labels above inputs – Anchors attention to essentials
4. Add spacing between elements – Improves readability

The result: a clear, top-to-bottom path.

But something’s still missing. We need hierarchy. We need contrast.

Contrast

Now that everything is in the right place, ask:

What should stand out?

We want users to focus on the input fields and the primary action: logging in. That’s where contrast comes in.

To guide attention, we:

5. Make labels lighter – So inputs draw the eye
6. Use consistent typography – Avoid unnecessary internal contrast
7. Style the login button – Give it weight, color and boldness
   De-emphasize the sign-up button – Make it quieter, secondary
8. Add color contrast to key elements – Highlight what matters most

Contrast helps establish hierarchy. It’s how we guide the eye.

Because if everything looks the same, nothing gets noticed.

Before → After

So what actually changed?

• Structure – We grouped and positioned elements with intention
• Focus – We used contrast to draw the eye to what matters most
• Flow – We created a clear path from top to bottom

We didn’t change functionality. We changed clarity.

Good design doesn’t just work. It works better.

The Takeaway

Design is about flow. It’s about guiding someone from start to finish.

When you shape both the order of execution and the order of importance, you create clarity.

To do that, use:

• Placement for structure
• Contrast for focus

You don’t have to do this manually. You could just prompt: “Fix the user experience.”

But when you understand these principles, you know why the result is better. It helps you write better prompts. Give better feedback. Design better.

You don’t have to be a designer to think like one.

If you develop or design enterprise software—especially for industry-specific applications—you probably recognize user stories that start like this:

As a user, I would like to … so that I can …

It captures a critical, essential part of software development:

Understand your user. Build for your user.

The reality is that users don’t always have a say in the development process.

As a UX designer, my role was to represent the user perspective. That meant doing research—going out there, talking to users, asking questions and understanding their behavior through empathy and proven methods.

At the end of the day, I wanted to design with the user in mind.

And the same goes for developers. They ask questions about logic, flow and outcomes because what we’re ultimately trying to do is simple:

Build software that helps someone accomplish a task.

But my users were out in the field. They worked under time pressure. They were on 12-hour shifts. They were all over the world. It wasn’t as simple as hopping on a call, sending out a survey or visiting them on site.

The truth is: it’s common for developers and designers to build software from a distance. And, unfortunately, user research isn’t always prioritized enough to include user input as a constant in the process.

So what most companies do—and rightfully so—is bring in expertise. They bring in the expert. As an intermediate.

But that’s risky too.

Because the expert is not your user.

How Experts Show Up in Software Development

Most organizations that build enterprise software have in-house expertise. The form that expertise takes can vary—depending on the project phase, level of organizational support, strategic context, leadership involvement and how design is integrated into development.

In my experience, expert involvement typically shows up in three ways:

Internal or External Business Consultants and Analysts

These people translate customer needs—including those of the end user—into something the business can act on. They’re usually externally focused and available only in a reactive role. Some are full-time, others part-time.

Product Owners or Product Managers

These are usually people who came from the field or domain and later moved into IT or development. They may no longer fully represent the end-user perspective—though a good product owner stays close to it.

The SME—Subject Matter Expert

Let’s just call them “the expert”: someone who has performed the user role themselves—or still does so part-time. SMEs often serve as internal representatives of that role.

In the teams I worked on, we paired each feature with an SME, and typically worked in a triangle: SME, UX designer and product owner. Each brought a slightly different angle, but we shared one goal: discovering, creating and defining the right product requirements.

4 Pitfalls to Avoid When Relying on Experts

Working with experts is a blessing—because honestly, you can’t know what they know. You haven’t experienced what they’ve experienced. And you probably never will.

I’ve worked with many different experts. And there are four things you absolutely need to avoid when you do.

Expert Bias

This is often referred to as the curse of knowledge: assuming others know what you know.

A very common thing I’ve heard from experts when simplifying workflows or adjusting terminology:

“The user is not stupid.”

That simple statement reveals a bigger tension: simplicity vs. complexity.

Experts are used to working on high-cognitive-load projects. They’re comfortable spending energy to understand. But good design is meant to reduce that load—to make decisions easier and help people move faster.

Assuming everyone knows what the expert knows leads to overcomplication. And it often creates barriers for junior users—the very people your product should support too.

Anecdote Over Evidence

Stories matter. Experts help visualize and humanize what users go through.

But the risk is that anecdotes start to sound like facts—and real evidence gets ignored.

An expert might recall hating a flow or avoiding a feature—but that doesn’t mean it’s useless. It just means we need to check the data.

I’ve seen experts become sources of truth, replacing research entirely. And when that happens, data stops driving decisions.

Over-Reliance on a Single Voice

Data gives you scale. It brings in input from across the whole user base—not just one voice. But when teams rely too much on an expert, the product can be too much based on personal preference.

I’ve seen it happen: no room for other perspectives, no space for insights from non-experts. In the end, we weren’t designing for users. We were designing for the expert.

Skipping Market Validation

This might be the biggest risk of all.

At the end of the day, having an expert on the team can lead you to skip validation. I’ve seen it myself: we had the potential, but didn’t listen to the market enough. We iterated internally—but lost the market opportunity.

Without user feedback, we assumed we were right. And we were close. But not close enough.

3 Ways to Make Experts Your Allies

Cross-Check

Validate your assumptions—with testing, with research. Cross-check everything. With data.

Make sure your expert is a real advocate—an echo of the market, not a substitute for it. When that’s true, their input, experience and ideas will strengthen your entire development cycle.

You’ll move faster and smarter because your team already holds a lot of the needed insight. That reduces the need for expensive, time-consuming research phases.

Collaborate

The expert shouldn’t write requirements and expect us to just follow. It needs to be a collaborative effort.

I’ve seen developers shift how experts think about the domain. That back-and-forth made space for real innovation. I’ve also done user research side-by-side with experts. I would interview users—and ask the “stupid” questions:

Why do you do that? What is this? What does that mean?

But I brought the expert along as a translator.

Cocreate

I’ve worked with amazing experts who had a clear vision for the future. They knew how software could change the game. They’d felt the pain. They’d used bad tools. They knew what was missing.

So when we cocreated (sketches, wireframes, prototypes), we built some of the best features I’ve seen. We actually built market-leading, groundbreaking features.

In those moments, I wasn’t the designer. I was the facilitator. The expert led the thinking.

And unlocking that kind of creativity? That drives real success.

Conclusion: Respect the Expert, Champion the User

The truth is, having an expert on your team is a goldmine. It can give you a real edge—but it’s also a risk. A potential trap. Make sure they’re a user’s advocate, not a stand-in for the user.

Collaborate. Work together. But never lose the user representation.

In the end, it’s the market that will tell you what works—not the people who build the software.

And honestly, I couldn’t have done it without an expert by my side.

But without users? There wouldn’t have been a point in doing it at all.

As designers, we often say, “I design user experiences” or “I’m a UX designer.” But the moment we say it, something feels off—because is it actually true?

What is experience, really? And what does it mean to claim we can design it?

You Design the Environment—Not the Experience

Let’s be real: You don’t design an experience. You design an interface. A product. A flow.

But the experience? That happens within the person using your product.

Experience design isn’t about defining what someone feels. It’s about shaping the environment where experience can happen—and likely will.

UX Exists—With or Without You

I’ve said it to my teams before: experience will happen. Whether it’s good or bad—that depends on your work.

But let’s clear something up: There’s often this feeling that if no UX designer is involved, there’s no UX. That’s false.

UX isn’t something you add like a feature. It’s always there. The question is whether you care about it.

We Influence—But Don’t Control

The more we talk about UX as if it’s an asset, a deliverable,
the more it sounds like something we can control.

But we can’t.

Sure, we can persuade. Guide. Assist. We can restrict users. Define the path. Standardize components. We create guidelines and style guides to bring clarity.

But those are just boundary conditions. Constraints. What we call design principles.

We define the room. The user steps in. That’s where the experience happens.

We influence it. But we don’t create it.

Experience isn’t delivered—it happens. The designer controls constraints, the human brings context. Together they create the outcome.

The Human Factor

Why does this matter?

Because it reminds us what the equation really looks like:

1. We create the environment.
2. The user brings themselves into it.
3. The experience is the result—good or bad.

But users bring variables we can’t control:

• How they woke up that day
• Whether they had a fight with their spouse
• If they rushed to drop off kids
• Or had a great workout and are ready to go

They bring their pressures, emotions and fatigue. That is real experience. Always part of the outcome.

Empathy ≠ Control

As a discipline, we’ve tried to understand users through empathy. We use personas. User research. Journey maps.

And yes—those give us insight. But there’s always a limit to what we can measure. Always a part of the human experience we can’t predict.

What AI Changes About UX

AI is reshaping how we use software. So experience becomes more important.

Designers shouldn’t try to control that experience. We should craft the conditions.

Design Conditions, Not Emotions

Don’t try to capture people. Don’t try to control their behavior.

Instead, ask yourself:

• What influences behavior?
• What external pressures shape outcomes?
• What could make someone fail—or feel empowered?

Sometimes, the biggest UX gain isn’t in the UI. It’s in relieving pressure. In aligning expectations. In reducing cognitive load.

Zoom Out: Beyond Service Design

Service design helps. It considers more than just screens. But even there—we have to keep zooming out.

Advocate for the experience. Think bigger. Ask deeper.

Not just: Is the button clear? But: Is this the right time for this feature?

Be the Experience Advocate

To me, that’s the role. Not the experience designer. The experience advocate.

You fight for clarity. You fight for boundaries that empower. You create more room. Better constraints.

You don’t control the experience. But you do help make it better.

So ask yourself: What are you really designing?

Mick Jagger already screamed it in one of the most legendary rock songs of all time:

When I’m driving in my car
When a man comes on the radio
He’s telling me more and more
About some useless information
Supposed to fire my imagination

A protest against consumerism. Against the constant pressure to want more. More flair, more sparkle, more everything—but rarely better.

And honestly? He might as well have been talking about user experience.

Because UX too often focuses on the shiny stuff: visuals, delight, emotional connection, joy. As if satisfaction is just a feeling you can trigger with animations, sound effects and dopamine tactics.

But if you work with enterprise software every day, you know: that’s not how it works.

Dissonance

Most UX theories you’ll find online are built around B2C use cases. Worlds where users are mainly customers, and satisfaction hinges on how an app makes you feel.

Animations. Little hearts that pop when you like something. Confetti when something succeeds—you know the drill.

That kind of delight works in consumer apps. And let’s be fair—it feels great.

But enterprise software is a different story.

These users don’t want confetti. They want their tool to start faster than it did yesterday. To get their job done with fewer clicks. To not crash when five windows are open.

These are people who spend hours a day in your product. They’re trained. They’re in a hurry. They have a goal.

A job to be done.

And yet, enterprise UX is still too often designed through a consumer lens. That’s where the friction starts. Because, while the literature keeps talking about “joyful experiences” and “emotional connection,” the moments that actually add value are often pragmatic—sometimes even boring:

• An error message that clearly tells you what to do.
• A workflow that finally makes sense.
• A search function that … just finds stuff.

What we need is a new definition of satisfaction. One that doesn’t get stuck in delight as a feeling, but instead looks at a sense of control and progress. At the moment when everything just works.

When it functions.

Satisfunction.

So don’t sprinkle glitter. Delight is fine—but only when it supports flow, not interrupts it.

Only when it makes something faster, more reliable or simpler. Then you’ve got a truly satisfied user.

Resonance

That doesn’t mean the visual aspect is worthless. Far from it.

Good design resonates—it makes an interface understandable, pleasant, predictable. It gives structure. It brings clarity.

Visuals, animation, typography: they guide behavior. They make software more human. A UI can bring calm into a chaotic workday. Can make a complex task less overwhelming. Can even … be enjoyable.

And yes—that is genuinely valuable.

So, no, visuals aren’t a luxury. They’re an essential tool for orientation, clarity and trust. As long as they’re not there to cover up what’s broken—but to emphasize what’s right.

Harmony

When you balance it all, when you prioritize satisfunction, you create space. Space for emotion. For feeling. For real satisfaction.

Because a person spends hours behind a screen. Using the tools you design as part of their day-to-day life means your design directly impacts how someone feels—at work, and at home.

So don’t make it all strictly business. Don’t make it just dry and functional. Don’t lose the human touch.

In my career, I’ve often seen friction between researchers, UX designers, visual designers and marketers. Each with their own perspective on what the “right experience” should be.

The solution?

Harmony.

Compose. Design software that has space for every voice. Feel when it’s time to design for emotion—and when it’s time for function. And learn how to make them sing together.

Outro

So, the next time you design something, don’t just ask if it’s “beautiful.”

Ask if it works. Ask if it makes sense. And maybe, just maybe …

It’ll feel pretty good too.

You never forget your first design battle. Mine? A dragon.

Not a medieval beast, but a tiny, pixelated icon squeezed inside a bloated toolbar of a 3D modeling application. It wasn’t even supposed to be a dragon—it was just a 16x16 blob of green and red pixels, hand-crafted by a passionate or maybe careless developer in Paint. Instead of resembling the structural builder it was meant to represent, it looked more like a beast that is usually tamed by knights in shining armor.

The name stuck. No one called it by its function. Instead, people said: “Click the dragon.”

And the wild part? Everyone knew exactly what that meant.

Now, I had to redesign 750+ of these little legends—each with its own strange, nostalgic history.

The Toolbar Tyranny

The dragon was one icon in a labyrinth of toolbars. Over time, new features meant new buttons. More buttons. More clutter. The toolbar wasn’t a neat row of helpful shortcuts anymore. It had turned into a UX landfill, stacked high like the old versions of Microsoft Word, where functions disappeared into an icon abyss.

So, we decided to get rid of toolbars and moved to ribbons.

I redesigned the UI with smarter workflows, contextual actions and cleaner navigation. No more pixelated dragons, no more guessing games.

Or so I thought.

The Redemption

For years, toolbars in older software were a chaotic mix of actions and navigation.

A single row of tiny icons could hold anything from a direct command to a menu that reshaped the entire interface.

This inconsistency made toolbars confusing. As design systems matured, the industry began shifting away from them—favoring new navigation models. I was part of that shift.

When I started designing and implementing modern UI systems, my team embraced menus, ribbons and larger labeled icons—patterns that brought clarity and improved navigation.

As software evolved into web-based SaaS applications, navigation became even more structured, layered and nuanced. We moved toward on-demand actions, contextual UI and interfaces that guided users instead of overwhelming them.

It worked.

The experience improved. But then, something unexpected happened.

I missed the toolbar.

Not the old, bloated version, but a well-structured, well-grouped and well-positioned set of actions—a true toolbar component designed with clarity and context. In many cases, I found myself recreating toolbars without calling them that—grouping icons in a menu bar, placing action buttons together, designing around what was missing.

Eventually, I brought it back—deliberately and thoughtfully.

Taming the Dragon

Toolbars were never the problem. How we used them was.

So instead of eliminating them, we need to design them better:

Actions should be contextual. Instead of scanning icons and guessing, users should see what they need, when they need it.

Icons should be recognizable. Monotone icons and branding challenges aside, a well-placed, well-designed icon can serve as a familiar anchor in complex workflows.

Efficiency should drive the experience. Enterprise and industrial software often requires fast, precise actions. Toolbars, when designed right, accelerate productivity rather than slow it down.

With AI-driven interactions—such as predictive commands, voice-driven actions and prompt-based workflows—some might argue that traditional UI elements are becoming obsolete. However, icons and contextual action bars still play a critical role in bridging the gap between automation and user control. Clicking an action you instantly recognize, at the right moment, in the right spot? That’s powerful.

This dragon may be gone, but the lesson stays: Good UX doesn’t always mean kill it—but tame it.

What is your dragon that needs to be tamed?

The role of design engineering, often considered a hybrid of design and technical expertise, has continually evolved with technological advancements. From the introduction of computer-aided design (CAD) tools in the late 20th century to the emergence of generative design algorithms in the 2010s, the relationship between design engineers and their tools has always been a partnership.

Today, another major transition is happening—one powered by integrating artificial intelligence (AI) into the design and coding experience to provide help and improved efficiency in software production. In today’s article, we’ll explore how AI is being used in the world of design engineering, its potential as a tool or replacement, and what it could mean for the future of the field.

Check out our previous article on how Software Development has changed with AI-Powered Code Editors.

What Is a Design Engineer?

A design engineer (DE) is a unique hybrid role that bridges the gap between design and engineering. As a translator and mediator, a DE combines technical expertise with a designer’s eye for detail, evolving creative visions into functional, practical solutions.

Design engineers play a pivotal role in aligning design and development teams in web and mobile software. By understanding both the creative and technical sides of a project, they enable more seamless collaboration, reduce friction in the design-to-code handoff and enhance the quality of the final product.

For this article, we discuss design engineers (DEs) in the context of software development, particularly in web and mobile contexts. DEs help navigate the complexities of frontend frameworks, component libraries and APIs while keeping user experience and design fidelity at the forefront.

For more details on the role of a design engineer and what it entails, be sure to check out this article in the designengineer.xyz blog—The Design Engineer.

Chat-Interface Tools

The rise of chat-interface tools like ChatGPT, Claude and DeepSeek has influenced the integration of AI into design engineering. These tools act as conversational assistants, providing immediate answers, generating ideas and drafting code or design documentation. For many design engineers, they’ve become collaborative partners in tackling challenges.

Some of these chat interface tools (like ChatGPT and Claude) excel in generating rapid solutions, whether crafting boilerplate code, explaining algorithms or suggesting ways to optimize workflows. Other tools, like DeepSeek, specialize in retrieving nuanced information from large datasets, making it helpful when analyzing historical project data or brainstorming solutions to design bottlenecks. These tools enable design engineers to offload repetitive or time-intensive tasks, freeing up bandwidth for more creative and strategic efforts.

AI-Enhanced Design Tools

While chat-interface tools make it easy for design engineers to quickly interact with AI, pivotal platforms like Figma and Builder.io have embedded AI into their workflows, improving the actual design process. Figma AI, for instance, introduces advanced features such as automated layout suggestions, instant mockup generation and intelligent alignment recommendations. These features empower designers and engineers to create better designs faster, all while maintaining the creative vision.

Builder.io extends this innovation by enabling developers and designers to work collaboratively on dynamic user interfaces. Its AI-powered components simplify complex workflows, allowing teams to iterate faster. With Builder.io, the line between design and engineering blurs even further, as engineers can integrate their work with the visual assets created by designers.

For design engineers, these AI-powered capabilities bring more efficiency. They facilitate experimentation, help avoid common design pitfalls and reduce the cognitive load associated with manual design iteration. Integrating these tools into their workflow allows DEs to focus more on innovation and less on repetitive tasks, fostering a culture of rapid prototyping and agile development.

Prototyping and Design with Code

As the boundaries between design and engineering continue to dissolve, tools like bolt.new and lovable.dev are taking center stage. bolt.new and lovable.dev (among other similar tools) are AI-powered web development platforms that allow developers to prompt, create, edit and deploy full-stack applications directly from their browser, all through an intuitive chat interface.

These tools empower design engineers to bridge the gap between static designs and functional applications. By leveraging AI, they can iterate on designs in real time, test ideas instantly and adapt quickly to feedback. Features like real-time previews, integrated deployment capabilities and support for importing assets from design tools like Figma eliminate much of the friction often associated with the traditional design-to-code workflow.

Can AI Do It All ?

While AI tools enhance productivity and efficiency, they raise questions about whether they could replace design engineering altogether. The truth is that while AI excels in performing defined tasks, it falls short in areas requiring human intuition, creativity and contextual understanding.

• Contextual judgment – AI can produce somewhat accurate designs or code snippets but often misses the broader project goals, such as balancing functionality with aesthetics or considering user experience nuances.
• Collaborative strategy – Design engineers are essential in bridging teams, aligning technical execution with business objectives and facilitating communication between designers and developers. This collaborative and strategic role remains far beyond AI’s capabilities today—and likely will be for a long time.
• Ethical and cultural awareness – Designing for diverse users involves ethical considerations and cultural sensitivity, areas where human judgment remains indispensable. AI lacks the understanding and adaptability to navigate these complexities.

Rather than replacing design engineers, AI is a powerful augmentation tool, enabling them to work faster and more efficiently. It frees them from repetitive tasks, allowing more time for innovation, problem-solving and collaboration—something we all want in our daily lives!