Introduction

So, hello, I'm Pevi Meili. I'm a senior UX designer, user experience designer for Epignosis for the last nine months or so. Very happy to be here.

Much progress has been going on around Epignosis regarding AI and of course it has affected how we work at product design. Today I would like to describe how I get from a user experience request to a user experience solution end -to -end.

Before AI, this process that I will describe today would take one or more sprints, that means two weeks or a month, because of the necessary hand -offs between various roles, including customer facing teams like customer support, researchers, designers, product managers and front -end engineers at least.

So don't get me wrong, all of these roles are still essential but with AI and the process I will show you, the back -and -forths are minimized and the quality is maximized.

Any UX designers in the room? One, two. Okay, great.

So if you have any questions, if... You're not included. If something is not understood, please do interrupt me. I'm happy to explain everything.

From UX Requests to Solutions: The Traditional Workflow

What do we have here? I don't want to bore you with how I used to solve and deliver user user experience solutions before.

If you are in any role, not only UX designer, involved with product development in any role, you already know the drill. It takes several hand -offs between different people.

The User-Deletion Case Study in TalentLMS

So let's assume that we have a concern that is coming from a client -facing team like customer support. An issue that collects multiple tickets.

I want to get into the user's shoes in order to replicate their flow and understand what the problem actually is. Let me describe the problem.

We have Talent LMS, a learning management system, and we have a standard process how to delete a user that already exists in our system. This is pretty standard.

So, let me walk you around.

We have a list with the users. We have a quick action for deletion. We have a model that pops up and confirms that you actually want to delete this user.

There is a confirmation button and also, sorry, a confirmation model, but also a button not to ask again when you do such an action, deleting the user, that is.

You can delete the user and extra we have something called timeline that allows you to go back in the system and restore the user or permanently delete the user. You select the user deletion event and you see all the users deleted and you have the option to vanish them from the system or bring them back.

Pretty standard, right?

Nevertheless, it has many, many issues, and this comes from our customer support team. So they come to us and they say, we have a problem with user deletion. And I immediately say that, okay, let's see how the flow goes.

Long story short, there is a problem. There is actually a problem, not just user complaints here and there. There is actually a problem with how we handle user deletion on Talent LMS.

Capturing the Flow So AI Can Help

What's the value in capturing the way I presented with these screenshots, this flow? AI can actually understand what happens in these screenshots. It's not just an image for AI. It's a whole story.

It completely understands how the flow goes and what the images describe and how I get from one action to another. So there is much value in getting the flow in order.

This will help me analyze the problem in several steps that I will describe later. So, we have everything documented.

Framing the Problem: Domain Knowledge and User Evidence

Now the next step is to think. What are the problems? How I can solve them?

I have to bring my research, I have to bring my domain knowledge I have to bring user evidence in order to have a real conversation with AI and handle the problem and go through a solution.

Here's the step that my interaction with AI starts and it's very essential because my expertise at this point now, I don't know what happens the future, surpasses what AI can offer at this point.

Why This Is an “Ill-Defined” Problem for AI

No matter how knowledgeable it is, this problem I present is what we call ill -defined. Anybody that have already heard this term, ill -defined problem.

Okay, it's not a problem that I didn't describe well. It's not my description that is ill. It's a problem that AI cannot solve because it doesn't have enough information for this specific context.

So for AI, me saying that I have a problem with the user deletion experience on talent LMS, it's something that AI cannot deal with it immediately. It doesn't have the specific context for talent LMS and for this specific flow and what I'm thinking as a problem on this experience, it doesn't know anything about this.

It only knows very generic approaches about user deletion and flows and learning management systems at large. So, for it, it's an ill -defined problem because it doesn't have enough context to deal with it.

I feed AI with user evidence, I prompt for analysis that serves my specific needs, I interpret the results the way that makes sense for my own context, for my own product, and I apply UX practices that I know that work based on my experience.

AI doesn't have any of this before I give it I give them to it. So it cannot work a solution if I don't describe everything explicitly and if I don't guide it to go to a very specific direction then I only get very generic results that don't work.

So here it's my human in the loop approach I cannot be excluded from this process right right next step the conversation has saved the solution this takes time I have to admit and I have to feed it with several let's say resources in order to get somewhere but now it's It's time for AEI to do the heavy lifting, actually the thing I don't want to do.

Using AI to Produce a Detailed Build Prompt

And that is that I want to develop a high fidelity prototype and I need a detailed prompt to do so. And I am pretty bored to write a very detailed prompt like this one and this goes for lines and lines and pages and pages and I'm not going to write it.

this prompt will go straight to a vibe coding tool. Does anyone know? The opposite.

Who doesn't know what vibe coding is? Okay, so that's cool, that's cool. This is all new.

What “Vibe Coding” Means

So long story short, In short, vibe coding is how we use natural language to produce code and with this code we can produce apps or web pages or you name it, things that you actually need code to do but now I can just order this code.

I want to develop this presentation, this is through vibe coding. I just asked a tool, Claude, actually, for this one, to produce an app, an HTML file, so I can show the things I want to present today.

So there are tools, Lovable, I think, is the most famous one. I have also worked with vZero. These tools take your natural language and convert it to code. Sorry, to code, and this code is transformed into the app you want to develop.

So this prompt, which I ordered based on the files I shared in the discussion we had, give me a prompt for lovable dev. So give me a prompt suitable for a vibe coding tool.

So, I replicate the Talent LMS environment incorporating the solution we propose. It produces this prompt, very explicit, very detailed, in a way that I could never do. And what I get from here, it's close enough to produce code itself in order to feed the the next tool, Lovable.

It's very detailed and the question is, why don't you go to Lovable in the first place and describe what you need and get what you need?

It's not the same because now there are so many information, hello, there are so many information including here like font size or in which line I should put something or whatever that I could never imagine

and I could never describe even if I had a day or so to do.

So I create this prompt with Rebel actually, the tool that MindStone has offered to us to create a prompt as close to code as I can.

Turning Ideas Into a High-Fidelity Prototype (Fast)

And then, the big moment, the best ideas survive the conversation. Now they become a high quality prototype in minutes.

And I mean it because I go from this prompt to a clickable, very usable, very user -friendly prototype that I can show everywhere, even for user testing. And this is, it gives a value I cannot describe because I can start today and tomorrow I can have results from users using this prototype.

So same product. It's the Talent LMS environment as we know it but it incorporates the new flow, the experience I imagined that should work on Talent LMS.

Let me check my notes. In minutes I get this replicated product experience and I can do minor iterations or add some new ideas using natural language in lovable.

It doesn't need a so explicit prompt anymore. I can go here and there and adjust. Until I have reached a satisfactory result.

And what now?

Bridging to Delivery: Specs, Estimation, and Code Handoffs

Okay, I'm the UX designer. Yes, I can give this to the product design team. They can recreate it in Figma and follow through the standard process that we usually do.

but I have another competitive advantage lovable doesn't only give me the preview of the prototype it also gives me gives me the code that's behind this prototype so I can take this code and I can compare what I had before with the existing product and what I have produced now with the enhanced enhanced experience.

Having this comparison done, I can create some kind of a report that I can share with the product manager. And I say, here's what we already have. Here is what we need to change.

That's the effort estimation for these changes. And I have already set the priorities, so you guide the engineers to do this in the correct order.

And now with the product manager, we have a common ground to discuss that includes user insights translated into flows and the product manager can actually see them in front of their eyes product design and some specs that can get the discussion started with

engineers which is commonly enough the bottleneck how to get from designing a product to actually building it.

Then I think this is an already enhanced workflow but we are going to illuminate it because this already optimized workflow can become even better when it comes to the time we need to change a product but also how to improve the quality of this change.

What’s Next: Prototyping Directly on the Real Product Code

We are now experimenting with prototyping directly on the actual product code, not the prototype, not the replication, the actual Talent LMS code that is locally installed.

We are not going to break the entire production. We connect this version with an AI tool that can code and change the product using natural language prompts.

That means that I go to the Talent LMS code and I say, you know, I I don't like this dashboard, let's do something else. And it is transformed in front of my eyes.

And what do I get as an extra? As an outcome, we have the pre and post code that we give not only as specs to the product managers that I mentioned before, but also as a head start to front -end engineers at least. and in some cases back -end as well.

So they have ready -made code to get them started and we speak the same language in order to understand what we need to change and some ideas on how to change it or at least an inspiration on how to treat the code.

So one workflow that will soon be obsolete and and another workflow that I hope that will maximize our work and get the changes, the design and code changes much, much faster in our hands.

Conclusion

That's about it. Thank you.