Prasanth Reddy

Welcome to this episode of WaveLength, where we discuss trends, opinions, and goings-on in the space where enterprise software developers lurk. WaveMaker combines open standards, component architecture, and low code technologies to offer enterprise software developers a high-productivity, high-speed platform for custom software implementations. With AI added to the mix, there are many opinions on how it can sharpen our focus even more on improving the iterative developer experience in custom software implementations. We spoke to Prasanth Reddy, senior director of product management, on what he thinks WaveMaker should do next.

WaveMaker: We have always been in the business of reducing the grunt work involved in writing software applications. Isn’t all this AI buzz more of the same?

Prasanth Reddy: Reducing grunt work is an outcome. AI is really about increasing the level of abstraction. If you consider abstraction a ladder, WaveMaker’s existing widget library is the first rung. What we are doing with AI is moving up the ladder of abstraction. This is a way we hope to get closer to the intent in the user’s mind and convert that into working WaveMaker app code.

So what I’m telling users is: don’t think about tables and lists anymore. Think about what you want to build. You want a leave management app with the usual approvals, privileges, the leaves you can take, and so on, with some analytics thrown in. Where do you start if not from some boxes and arrows on the whiteboard?

WM: We can take the abstraction higher than just canned interaction components and workflows, is what you are saying.

PR: Yes. So, AI has taken the abstraction level further up. And that is where we are now with using it in low code. We leverage LLMs (large language models) to convert that intent into working code. It also means we find the right LLMs to use, right?

Our philosophy has always been moving the abstraction level up so people (developers) become more productive. With AI, we are moving even further into layers where users directly interface using their spoken language with a generic platform. We are not thinking of vertical solutions for finance or healthcare – many products do that – of providing a way for users to build their abstractions in prefabs (called packaged business components by some analysts).

WM: Products like Unqork and Temenos are domain-specific and are also abstracting. How is our approach different from a product with a domain model built in?

PR: Yeah, our approach has always been that we will be a generic product that enhances the productivity of ANY developer. It allows them to create their own abstractions. At the same time, a vertical product leans into a particular area and has entirely converted its product to address only those features that are relevant in, say finance, industry. Even the way the product is marketed and sold, all of that adds up to that vision. Our vision is more on increasing generic developer productivity.

WM: Having a domain model may clarify how AI can be used. WaveMaker aims to simplify life for professional developers, for whom higher-level abstractions are essentially use-case scenarios or specifications. But these are a wide variety and non-specific. How does this pan out for WaveMaker?

PR: Our strength has always been our user base of professional developers. We understand them well. We belong to the same tribe. We are now trying to swim upstream to expand our total addressable market by getting business analysts and designers onto the platform. After all, innovation does not happen in isolation, it happens at the point of interaction. The more meaningful we make that interaction, the higher the chances of closing the intent-to-code gap.

WM: Ah, this is really about team, not individual, productivity.

PR: I must state this here: this is not just about the productivity of individual developers but whole teams. Whether they are Figma users designing wireframes or business analysts writing specifications, the iteration with core developers is still very long and frustrating and riddled with losses in translation.

This is because of how abstractions have been set up in WaveMaker at the widget level. With AI, we are breaking through to a higher level of abstraction, opening our product out to more people but at the same time keeping the interaction with core developers meaningful. That’s when we feel we enable whole teams to become productive, not just individual developers. We expect this to result in unprecedented iteration velocity.

The iteration cycle between teams – whether designers and developers or business analysts and developers – the time it takes for the iteration to complete determines the time to market.

WM: Why AI? After all, the low code mantra has always been about abstraction, acceleration, and productivity.

PR: We couldn’t have done it at a generic level without AI. We would have had to pivot and choose a few domains and just completely lean into it. But now, we think we can achieve higher-level abstractions and continue taking a more horizontal approach – precisely what AI enables.

WM: You can go wide and deep at the same time.

PR: Yes, absolutely. And we are uniquely positioned because we already have a product that allows customers to develop their own abstractions. And now we have an AI play with ChatGPT (and similar) that is voraciously feeding on all kinds of data. We’re perfectly placed to put these two together and create a generic product that at once addresses a large amount of surface area. So that’s what I meant when I said “converting intent to code.

WM: Will we implement this as a one-pass activity that gives users a headstart? Or is it going to be with them through the lifecycle-that is, actually complete roundtrips?

PR: Well, even if you take a single iteration, AI involvement is getting more done because there is less lost in translation. This is particularly impactful when each feature is in a different sprint. We have seen this when working with ISV product teams on low code. To me, with every iteration, more gets done, there is less frustration less chasing of bugs, and higher chances of being pixel-perfect.

Today, when you look at iterations that involve hand-offs among business analysts, designers, and front-end developers, there is a loss in the quality of code output. This generates a long list of bugs, which generates grunt work, which burdens the team and affects their code quality. We have to break this cycle.

Reality is nobody wants to manage a list of issues or prioritise because that is the real grunt work. Everyone is talking about grunt work in coding, but the work that people actually hate is prioritising, maintaining lists, allocating work, who gets to do what, etc. If we reduce this, we will achieve a lot. We reduce management overheads and focus on real work.

WM: Our first step is to build a WaveMaker component plugin for Figma users. Will the approach hold when we open up to all of Figma? Will it be too wild to guarantee 99% accurate app code?

PR: The two worlds of designers and developers are different. The semantics are different. The developer side of the equation is more deterministic and syntax-driven, while the designer side – yes, they follow a process but is largely heuristic and imaginative. There is variety. But you really don’t need to be 99% accurate in the translation because our strength is our low code editor, where code can be fine-tuned or corrected easily. Even if I give you a leave management app with a table and you want a list, it can be easily changed on our studio’s canvas. Having said that, we have some guardrails.

WW: Round-trips will be cool, right?

PR: Though it will be cool to round-trip, I am skeptical about that. We need to think more. The customers we deal with do not want to subsume the designer’s role and play at the edge of user experience. They have teams that are dedicated to doing these things. Also, ideation and implementation happen in two different parts of the organisation. They do not want to short-circuit that. Not yet.

Actually, you should not be asking me about round trips. The question we should ask is: What happens if you shorten the iteration cycle and our tool lets you do eight iterations instead of four in the same given month? That’s more than acceleration. That’s the compounding of gains and value you’re building on top of what you already did. This brings immediate and real benefits to team productivity, not just unlocking an individual’s potential to round-trip

WM: That’s what WaveMaker AI’s goal is: help multi-disciplinary teams unlock their potential.

PR: Yes, because right now, WaveMaker is really designed for individual developers. Of course, teams using WaveMaker see overall productivity gains because of component reuse, templates, drag-n-drop interface, etc. But the real unlocking of value will happen when you’re able to bring in teams that are currently working together but are outside WaveMaker.

WM: Finally, do you think this constant demand for speed is tenable?

PR: Yes, the human potential is unlimited. It is the “iteration cycle to value” that constrains the speed. If you don’t see value, you won’t be interested. This has been the thing since the Industrial Revolution when groups of people worked together, and they just got better at working together. They got faster at creating something because they could, like I said, iterate and create value quickly.

WM: In the low code world, what’s the bottleneck for speed?

PR: There could be more than one. But the “Design to Code gap” is where we are at now. There are also compliance guidelines. Did you do the right thing by security? Did you do the right thing by accessibility? Answers to questions like that mean various guardrails have to be put in place when a project is being coded. So that in the end, you don’t pay the tax. But unlike design, these are deterministic and easy to set rules for.

WM: Assuming most want cookie-cutter UI, especially mobile, and my LLM model is well-trained on a million files, will iterations go away eventually?

PR: That’s difficult to imagine, though AI gets better at second-guessing as it evolves. But people still would want to iterate because it is a way to clarify what their intent is. There is a bit of wandering in all creative processes, which is never straight. “Design to code” iterations are how teams can meander, discover and pivot their way to an end product.

Coding up something and getting it to work is an intense process that does not leave a lot of time and mind space for more ideation. There is also resistance that grows to making changes after something is implemented. Having a designer role that is protected from this, with a bit of freedom, is a good thing to have in the team.

WM: While AI becomes better and better at second-guessing what users do and what they want, what lies ahead for WaveMaker?

PR: The key is how we work the abstraction ladder we spoke about in the beginning. Yes, in the shallow end of the pool, AI will democratize access to creating cookie-cutter apps. You may also have a GPT-powered phone that does everything and anything for you. Yeah, that could be one outcome. But in the deep end of the pool of developers, teams will continue to look for ways to deliver value with faster and more productive iterations. There is always room for providing more value. That’s where we dive in.

W: Thank you, Prasanth. That was an illuminating session of WaveLength.

Deepak Anupalli & Prashanth Reddy

Welcome to this episode of WaveLength. Who is not talking about AI today. If you are not working on it today, it’s surely on your roadmap. And if it’s not on your roadmap, it’s surely on your mind. So it was for us in WaveMaker too. The possibilities of using AI to make imagination a reality and what it means for low code have been on our minds. But they are endless. So we put our heads together and distilled it down to a few challenges that we think are stopping low code from realising its full potential.

One of them is the effort it takes to convert an idea or intent into working code for enterprise software. The intent is best expressed not as words but as pictures. We started by finding a way to convert Figma (just because it’s popular) files into a working app in a single click (complete with mock API signatures and data). It’s not perfect but it resonates with early-bird users and has shown us that we are on the right path. Our goal is to give users pixel-perfect UI with the continued acceleration of low code and a strong foundation of open standards. This is central to WaveMaker’s AI roadmap. We decided to sit down with Prashanth Reddy, Senior Director of Product Management and Deepak Anupalli, Chief Technology Officer and Co-founder of WaveMaker, to shoot the breeze and find out their rationale for using AI this way.

WaveMaker: Prasanth, let’s start with how app development is generally evolving with AI and how AI is influencing developers. And, of course, where WaveMaker fits into all of this.

Prasanth Reddy: I would say we already know that “generative AI” is generating code, right? Everybody is saying, you know, when Microsoft Word arrived, all the typists employed in enterprises just got fired and their jobs went away. So, because AI is generating code, the programmer’s job will also go away eventually, and with it, no code will also die. This is what people are thinking. I am generalising here for a reason. A lot of people who have seen technology demos think that way. But take custom or any application creation. It differs from just generating code for spooling out prime numbers, which is basically a single function. But we know that application creation goes through iterations, and different people collaborate, right? So there are people from the design team, there are people from the programming team. This is how enterprises work. The IT team is not in charge of ideating and creating designs. There will be a team that is ideating and creating designs, and then someone else makes a decision to take it to market.

So AI is all fine, but if you want to really adopt it within your enterprise, within your existing workflow of creating applications, you need a platform that allows existing teams to play well, and that is what AutoCode lets you do. Custom application creation needs iterations. You don’t know everything up-front. You only have a sketchy idea of what you want to build, and what you want to take to customers ultimately may change as you go. You simply don’t have all the information. So first, you create something and implement it with, say, WaveMaker, and then iterate. That’s how things get done.

Deepak Anupalli: So yeah, with this approach, Prasanth, are you indicating that one knows why one needs a low code platform, that is to basically quickly put the pieces together, but now using AI? Is that what we are trying to do? Or are you saying that, okay, in the AI world you get some code but now how do you use this code, together with other bits of code, to create an application? That’s my first point. Two, now that you have assembled something, how do you iterate, how do you make enhancements? Whenever you make a change, a new piece of code is generated. How do you handle that?

WaveMaker: I think that is true, right? Maybe AI is not there yet in terms of providing you with a whole application, because an application is somehow not the sum of its parts, right? Yes, you can generate bits and pieces, but really putting it together and giving an experience? We probably are not there yet, are we?

PR: Yeah, for custom application development, the best expression of what you want to develop, the intent of what you want to develop, is a design. It can never be expressed as a spec. The whole ideation process, all the whiteboarding and everything, ends up as an artifact, which is a design.

WM: I agree but even before a picture, there are words describing the intent. There are discussions, there are sticky notes. Text prompts in a way.

PR: But at the end of it, there is an artifact that captures the intent, and that is not text, it is a visual. A picture speaks more than words, to use the cliche. So the information bandwidth that is communicated with a picture is much wider than anything you can do with text. So we are not simply what is possible with AI, instead what we are saying is that low code with generative AI gives you the ability to create custom applications faster using your existing teams, the way they are laid out, and your existing application architecture.

WM: So customers don’t have to change anything to start using AI?

PR: Yeah, if you leave out a certain upper echelon of programmers – I challenge any typical enterprise IT or programming team working on custom app projects to have the agency and bandwidth to create and implement ideas. Most are “Okay, tell me what to do,” right? And that’s where most of the custom application projects need attention.

WM: Isn’t that what low code had set out to do? A level playing ground among software developers, the democratisation of software development?

DA: No, wait. I think we are generalising too much here. Look at the different segments of applications. What does general low code target? If you take typical citizen developers and business users, most want to automate routine tasks and execute faster. Naturally, many low code platforms indeed make it easier to automate daily work. They focus less on design and more on automation because they were helping users who really didn’t want to go through piles of data and multiple screens to make decisions, but instead wanted to build an app that does it for them.

PR: So that is workflow automation that you’re talking about. I think AI will consume workflow automation. In that space, one actually knows what one wants to build as the process is known ahead. AI can eat that lunch. But we are not caterers of that lunch.

DA: Yes, custom applications are where we are focused. It is important when we say building custom applications, we are assuming a well-defined design is available for it. But we are not talking about iterating the design. Yes, you are building a custom application but you are not creating a new design. Neither are you revising the existing design in your iterations, moving buttons around, changing an interaction design of a widget or whatever. So given a UX design, we have an AI way of arriving at a real working application. That’s what we are doing here.

PR: Both from a marketing point of view as well in terms of actual product offering, we do not have to necessarily stick to custom application development, though that’s the target use case. In general, WaveMaker is now AI-powered, inside out. It can not only convert working designs into working applications really quickly. You can further keep working on the code we generate – it’s open standards and all that. With Co-pilot and other AI, you either have to accept or rewrite the code that’s generated. You know you can’t really work on improving that. Whereas with WaveMaker, we use AI to generate code but also give you a Studio where you can continue to tinker and continue to refine the code.

DA: I think this is where there will be value in WaveMaker, Prasanth. Typically iterative development is where you have people writing code and also modifying it, repeatedly. While AI gives you a higher ground to kickstart your app creation process, low code makes it easier and faster to iterate. The big plus is the visual interaction model of the Studio which offers an intuitive way to fine-tune the experience – or refine the code.

PR: Yes. The code refinement process is frustrating with prompt interactions currently raging in AI. Nobody knows how to write the exact prompt, and the process of seeking it can be a long one.

DA: Currently, AI is a great start because it has the potential to take you from what you have imagined – your intent – to close to a real application very fast.

WM: Is it true that the flipside of the great start is that depending on how you write your prompts, it can expand the problem set rather than converge on the solution? While this may be good for research and ideation, it is not ideal in a production scenario.

DA: That’s true.

PR: See that’s why the expression of intent is best done with the visual design and not a prompt that nobody knows how to write. You may need to be a Linux command-line expert to grok that kind of thing.

WM: Even that may change. Thanks, Prasanth and Deepak, for another episode of WaveLength. Everything is pivoting faster than one can say pivot, so we must meet again and continue to discuss how AI-infused low code changing developer experience in enterprise app development.

Kuldeep Chandel

Within the world of digital-product development, the collaboration that exists between UX designers and developers is a dance. When this dance flows smoothly and harmoniously, the result is a masterpiece-an exceptional product that delights users and drives business success. However, when this vital collaboration falters, this dance becomes disjointed, leading to missed steps, frustrations, and ultimately, a product that fails to meet expectations.

The Business Imperative for Designer-Developer Collaboration

Smooth collaboration between UX designers and developers is a must-have for business success. Designers focus on the user experience, workflows, aesthetics, usability, and accessibility, crafting products that not only look great but also work flawlessly. Engineers, on the other hand, focus on what is possible and where they can push the limits of technology, ensuring design solutions that are both feasible and efficient.

When the two disciplines of UX design and development collaborate closely, the result is a product that not only meets but exceeds users’ expectations. This holistic approach to product development leads to higher user satisfaction, increased customer loyalty, and a healthier bottom line. By bridging the gap between UX design and development, teams can create products that look amazing, function seamlessly, deliver exceptional user experiences, and drive business success.

The Cost of Poor Collaboration

When designer-developer collaboration falters, the negative impacts can be severe. Miscommunications, conflicting priorities, and a lack of role clarity can result in delays, cost overruns, and, most importantly, a product that fails to meet users’ needs. One common issue when UX designers and developers fail to communicate effectively is that requirements get lost in translation. Picture this: UX designers are envisioning one thing, while developers interpret their designs differently, and chaos ensues. This mismatch leads to confusion, unnecessary rework, and a frustrating cycle of revisions.

Teams that don’t establish a united front on goals and requirements can get stuck in an endless loop of revisions, causing project timelines to spiral out of control. Then, when collaboration breaks down and people start playing the blame game, the project really suffers because the result is a toxic work environment, which is the last thing anyone needs.

Barriers to Effective Collaboration

Achieving effective collaboration between UX designers and developers is no easy feat. Several common barriers can hinder designer-developer collaboration.

Different Working and Communication Styles

One barrier to effective collaboration between designers and developers is their different working styles. UX designers and developers speak different languages. Designers are fluent in the language of creativity, aesthetics, and user experience, while developers are fluent in the language of logic, algorithms, and technical implementation. Their different languages can lead to misinterpretations and misunderstandings between them.

To overcome this barrier, teams need to become bilingual. Designers and developers must learn each other’s languages. This involves fostering a culture of empathy and open communication in which both try to understand and appreciate the other’s perspective. By becoming bilingual, teams can achieve seamless collaboration and create products that are both beautiful and functional.

The Handoff Process

Another significant barrier lies in their handoff process. In many companies, product managers and UX designers take the lead in defining requirements and creating product designs, but developers are essential for bringing their creations to life. After all, users interact with the final, functional product, not a product requirements documents (PRD) or prototype. When UX designers pass their designs to developers for implementation, the handoff process can lead to problems.

When UX designers work in isolation from developers, neither has the full context. This lack of context can result in development constraints and overlooked edge cases that the designer hasn’t considered. The issue is not just with the handoff process itself but also with the mindset behind it. Effective collaboration requires UX designers and developers to work hand in hand throughout the entire product-development process. This means involving developers early on, during the design phase, to ensure that everyone is on the same page and that the final product meets both design and technical requirements.

Strategies for Improving Collaboration

While achieving effective collaboration between UX designers and developers can be challenging, it is not impossible. By fostering a mindset shift and leveraging technical tools, teams can overcome these barriers and achieve seamless collaboration.

The Mindset Shift

Despite sharing the same end goal, UX designers and developers all too often operate in silos, with designers working independently, then handing off their designs to developers. This lack of collaboration can lead to developers’ prioritizing technical implementation over design details or adopting a not-my-job mentality. Effective designer-developer collaboration should span the entire lifecycle of feature or product design and development rather than being limited to the design-handover stage.

When both UX designers and developers communicate a clear why, this fosters alignment and creativity within the team. Therefore, it is crucial to involve developers early in the process, starting with the definition of the problem space. Taking this approach helps the entire team collectively develop a shared understanding of the problem at hand and empathy for one another.

Simply asking developers to implement a designed screen overlooks the importance of their understanding the problem space. This approach is limiting because it encourages their focusing solely on the solution. When developers care too much about a particular solution, they tend to stick to it. Then it becomes too brittle for potential future development. Developers’ caring just as much about the problem space as the solution is crucial to ensuring flexibility and adaptability in the development process.

The Design System

Developing a design system is one key to enhancing collaboration between UX designers and developers. A design system serves as a central repository for design assets such as UI components, styles, and patterns. These assets provide a shared language and tools, bridge the gap between the two disciplines, and enable more effective collaboration.

The aim of creating a design system is reduce confusion, speed up prioritization, facilitate the planning of roadmaps, and increase the team’s efficiency and velocity. By enabling UX designers to quickly create prototypes from prebuilt components and enabling developers to easily implement designs using the corresponding code components, design systems streamline the collaboration process. They also foster a culture of reuse and iteration, enabling both designers and developers to contribute and improve components based on their teammates’ feedback, strengthening collaboration, and improving the overall quality of the system.

AI-Powered Design and Development

AI is revolutionizing the collaboration between UX designers and developers, particularly within these realms:

• Design-to-code conversion
• Design implementation-difference detection

Design-to-Code Conversion

The traditional handoff between UX designers and developers has long been a bottleneck, often resulting in time-consuming, error-prone translations of designs into code. AI is revolutionizing this process by automating aspects of the design-to-code journey.

By leveraging machine-learning (ML) algorithms, AI tools can analyze design files and produce code snippets that closely resemble the original design. It is crucial that the AI-generated code respects the design-system components and accurately represents these abstractions in code. This alignment ensures that the code AI generates is consistent with the established design system, observes design standards, and is consistent.

This automation not only speeds up development but also guarantees a higher degree of harmony between the design and the final product. The resulting reduction in manual effort also enhances the team’s overall efficiency, benefiting both UX designers and developers.

Design Implementation-Difference Detection

Maintaining design consistency and quality requires meticulous attention to detail, especially when detecting the differences between designs and implemented code. Advanced AI-powered image comparison tools have streamlined this process, offering a more efficient and accurate alternative to manual inspection.

These AI tools meticulously analyze design mockups and implemented user interfaces, pixel by pixel, swiftly identifying any discrepancies. By leveraging AI for design implementation-difference detection, teams can ensure that the final product aligns closely with the original design and delivers a polished, consistent user experience.

Moreover, AI’s role extends to ensuring accessibility compliance and flagging potential issues such low color contrast and inadequate text sizes early during the design phase. This proactive approach enables designers and developers to make the necessary adjustments, ensuring that the final product is accessible to all users.

AI-powered tools present a new frontier in enhancing collaboration between UX designers and developers. By automating tedious tasks and offering insights that improve efficiency and accuracy, AI is reshaping the design-to-development process, leading to better outcomes and more seamless collaboration.

Conclusion

The quality of a team’s work reflects its alignment with the specific context and goals that were established in a project’s requirements. If we focus solely on the designer experience and overlook the needs and perspectives of engineers, we not only risk creating inefficiencies, delays, and inconsistencies but also compromising the quality of the overall product.

Effective designer-developer collaboration is essential to delivering truly exceptional products. By recognizing the importance of this collaboration, understanding the barriers that can hinder it, and implementing strategies to overcome them, teams can achieve seamless collaboration and deliver products that both delight users and drive business success. So let’s embrace this collaborative dance and create products that truly shine in the eyes of users and win in the marketplace.

Pronoy Roy

In any application development project, designers and developers often find themselves in a constant back-and-forth, striving to meet launch deadlines. While tools like Figma and Storybook have improved the hand-off between these teams, they are primarily geared towards speeding up development. Though these tools also benefit designers by providing measurable guidelines, the real challenge lies in maintaining those guidelines effectively.

The only way to standardize designer-developer handoffs and to make sure people agree on the processes is by having a design system that has been designed by designers and then implemented as a design system in their development framework by developers.

This is where design systems come into play, filling the gap that often exists between design and development. By adopting the development approach of reusability, design systems offer a structured way for designers to define the limits and scope of a project. Utilizing design tokens and variables, they significantly reduce decision fatigue for both designers and developers, leading to more efficient and cohesive workflows.

For developers, understanding design systems isn’t just about knowing the tools – it’s about comprehending the concept and applying it to enhance their development processes. The foundation of any design system rests on four central pillars:

• Colors and Themes
  This pillar is the most fundamental aspect of a design system. At its core, it involves defining a set of color variables that will be consistently used across the project. These colors aren’t just for aesthetics-they define the visual hierarchy and user interaction points. By using CSS variables or incorporating them into frameworks like Tailwind, developers can ensure a cohesive and dynamic design experience.
• Fonts and Typography
  Fonts are more than just letters on a screen – they are crucial in guiding users’ attention and conveying the right tone. In a well-crafted design system, fonts are not chosen arbitrarily. Instead, they follow specific guidelines that dictate font family, weight, size, line height, and letter spacing. This ensures that text elements are consistent, readable, and aligned with the overall design intent.
• Layout and Spacing
  Imagine a tiled floor, each tile’s placement affects the entire pattern. Similarly, in UI design, spacing and layout are critical. Design systems standardize these elements by providing a limited set of values that dictate spacing, padding, margins, and more. This not only simplifies the developer’s task but also ensures that the UI is visually balanced and predictable.
• Building Blocks or Components
  Components are the true embodiment of a design system’s principles. Built upon the first three pillars, components are reusable UI elements that simplify development. Instead of reinventing the wheel for each new screen or feature, developers can use these predefined components, ensuring consistency and reducing development time.

Understanding and implementing these pillars in your development workflow leads to a more efficient and standardized process. Developers no longer need to worry about creating everything from scratch-instead, they focus on how to best utilize the existing components and styles to achieve the desired outcome.

This guide is not just for designers or developers; it’s for any team looking to improve collaboration and streamline their design and development processes. Whether you’re starting from scratch or looking to refine your current approach, the concepts discussed here can serve as a valuable framework for building your design system.

To dive deeper into each pillar and see practical examples of how they can be applied, read the full blog here.

Kuldeep Chandel

Picture this: You’re starting a new app-design project, and instead of initially staring at a blank screen, you have AI tools at your behest that can generate wireframes that are tailored to your project’s requirements. These layouts aren’t random-they’re based on your users’ data, tailored to users’ preferences, and aligned with what’s working within your industry domain right now. Throughout your design process, an AI can suggest real-time tweaks that are based on user-behavior patterns, helping you refine a product’s design at lightning speed.

This isn’t some distant future-it’s happening now. AI is fast becoming a UX designer’s best teammate, helping us work faster, think smarter, and create more meaningful user experiences.

A Shift in Focus: From Tools to Strategy

Since the advent of the UX design discipline, our success has hinged on mastering technical tools such as Photoshop, Illustrator, InDesign, or Axure-or more recently, Sketch or Figma. UX designers have spent years perfecting their ability to manipulate pixels and craft visual details. But the world of UX design is quickly evolving, and with AI’s rise, UX designers must now focus on more strategic elements such as user psychology, behavioral economics, and data analytics.

Instead of laboring over every visual-design detail, UX designers now have a skilled AI assistant to handle the manual tasks, letting us focus on the overall architecture and design vision.

Tip: To adapt to this shift in our design approach, UX designers should focus on learning how to interpret data and analyze the reasons behind users’ actions. More importantly, they must translate these insights into human-centered designs. While AI enhances efficiency by processing vast amounts of data, the UX designer’s role is to understand the context behind the insights. Only in this way can we ensure that every design decision we make genuinely serves users, addressing their needs, understanding their behaviors, and crafting experiences that users can connect with on a personal and meaningful level.

AI as a Creative Co-Pilot

I want to address a common concern right off the bat: AI is not here to take over our jobs. Instead, it acts as a creative co-pilot, augmenting our abilities and helping us to speed up the process and make better design decisions.

I remember the first time I used Framer AI to build a Web site. It didn’t just churn out random designs, but created user-interface (UI) layouts that felt purposeful-as if someone who deeply understood the user journey had crafted them. While the time I saved was a great benefit, what really struck me was how the AI’s suggestions helped me see new possibilities.

By analyzing user behaviors, AI tools can predict user interactions and suggest design tweaks. Thus, they can automate repetitive tasks, allowing us to focus on more complex, strategic decisions. While you’re still guiding the ship, the AI helps you navigate the waters more efficiently.

Actionable Insight: Start small. Use AI tools for routine tasks such as generating design ideas, writing copy, or organizing design components. Once you’re more comfortable with AI, explore how AI tools can support more strategic tasks such as predicting user flows or making data-driven design adjustments. Let the AI handle the repetitive tasks, so you can focus on refining and enhancing the user’s overall experience.

Practical Applications of AI in UX Design

AI’s impacts on UX design are already tangible. Let’s consider some concrete ways in which AI is shaping the future of UX design such as the following:

• Personalized experiences-Spotify uses an AI-driven recommendation engine to curate personalized playlists such as Discover Weekly and Daily Mixes. The system analyzes users’ listening habits, preferences, and even how they interact with certain songs-for example, skips and replays. Spotify leverages this data by using collaborative filtering and natural-language processing (NLP) to recommend music that is tailored to individual’s tastes. For example, a user who listens to a lot of ’90s rock would see playlists full of lesser-known bands from that era and genre, as well as more modern artists with similar styles. Fresh, personalized music recommendations keep users engaged with music they might not otherwise have discovered.
• Predictive design-AI analyzes users’ behaviors to anticipate their future actions, making user experiences smoother and easier to understand. For instance, Amazon’s Buy Again feature predicts what users might need based on their past purchases, thus enhancing their convenience. In my case, Amazon has learned the typical interval at which I need to purchase diapers for my baby and sends timely reminders through Alexa, ensuring that I never run out. This kind of AI-driven personalization creates a seamless, proactive user experience.
• Automated user research-Imagine combing through hundreds of user reviews or survey responses. AI tools such as UserTesting can analyze vast datasets, spotting trends and identifying users’ painpoints to help us shape more effective design solutions.
• Accessibility design-Inclusivity is key, and AI helps UX designers create more accessible experiences. Tools such as Axe DevTools can scan an app to identify accessibility violations, ensuring that designs cater to all users, regardless of their abilities.
• Data-driven design decisions-Instead of guessing, use AI to analyze user-behavior data. For example, tools such as Hotjar and Lookback can provide insights into where friction causes users drop off, enabling you to adjust your designs based on actual interaction patterns.

A friend of mine was working on a retail Web-site optimization project. Initially, accessibility hadn’t really been factored into the design. Later on, they realized they had to meet compliance standards, which meant going back and redoing large parts of the Web site-a lot of extra work they hadn’t planned.

Today, not addressing accessibility up front presents serious levels of risk. Some companies have faced public backlash or even penalties for noncompliance with government standards, especially when this affects users with disabilities. Thankfully, there are now AI tools that can diagnose accessibility issues such as Web Content Accessibility Guidelines (WCAG) compliance violations and even make the necessary fixes automatically. These tools are a huge help in avoiding such pitfalls and creating a more inclusive experience right from the start.

Breaking Through the Blank-Canvas Struggle

Every UX designer has faced the daunting experience of a blank screen, not knowing where to begin. AI can transform hesitation into action by instantly generating a starting point for a user interface. Tools such as Uizard and Figma AI can quickly produce wireframes or full, high-resolution layouts from minimal input, providing a solid base to build on. They can also create entire user flows, not just individual screens. AI-powered tools such as Miro and FigJam can map out complex user journeys, streamlining your design process even further.

Pro Tip: Let AI jump start your creativity! It’s much easier to refine and enhance an existing design than to start one from scratch. Use AI-generated wireframes, mockups, and user flows as your inspiration. These time-savers can help you overcome your initial creative roadblocks.

Ethical Considerations in AI-Powered Design

AI’s reliance on data introduces a layer of responsibility for UX designers. However, bias in AI models could lead to unintentional exclusion. Plus, data privacy remains a top concern. How we source, use, and protect user data must be at the forefront of any AI-driven design project.

Imagine AI as a powerful, but untrained assistant. While an AI can accomplish design tasks at lightning speed, without proper guidance, it could make mistakes that a human being would never overlook. UX designers must act as stewards of ethical responsibility, ensuring that AI tools respect users’ privacy and avoid reinforcing harmful biases.

Tip: Prioritize data quality and ethical AI use. When training AI models, ensure that the data is diverse, inclusive, and free from bias. Review AI outputs regularly to spot issues and make adjustments as necessary.

Measuring Success: How to Evaluate AI’s Impacts on UX Design

Adopting AI is a significant investment, so measuring its success is crucial. Some Key Performance Indicators (KPIs) that you should track include the following:

• Efficiency-Measure how much time AI saves in your workflows.
• Accuracy-Evaluate how accurately AI predicts users’ behaviors or identifies design flaws.
• User engagement-Track whether AI-driven enhancements improve user satisfaction, engagement, or conversion rates.
• Financial ROI-To calculate the return on investment (ROI), compare the cost of implementing AI tools against the time you save and the resulting improvements in design quality.

A Bright, Cobotic Future

The era of the AI-augmented designer is here, and it’s changing how we approach UX design. By leveraging AI in our tools, we can gain access to data-backed insights that can inspire new design directions and ideas. However, it’s crucial that we not follow an AI’s suggestions blindly. While AI can handle repetitive tasks and provide valuable data, it’s up UX designers to interpret that information, adding our creativity and tailoring designs to specific use cases

I see AI in design as a helpful co-pilot, offering inspiration and freeing up my time to focus on what matters most-understanding people and crafting user experiences that resonate with them. The real magic happens when we build upon an AI’s suggestions by adding our unique insights to create truly user-centered designs.