🎥 Claude Designer is USELESS Without Strategy | The BMad Code Podcast

Hey everybody, my name is Brian and this is the BMAD code and I am so excited because today I have Martin Angger here. He is a designer and the creator of the WDS or the whiteboard design system. This is the first official community module in the BBA method ecosystem. Martin's a UX designer and a digital product manager from Stockholm, Sweden. And he started out as a UX designer back in the early days of the web, way before AI even. and he's have an impressive 26 years in the field. He founded the Whiteboard Studio in 2003, but what he's probably most known for by many in this community, like I said, is the WDS or the Whiteboard Design Studio method. It's a full AI agent assisted design workflow that runs inside the BMED method with specialist agents for strategy, UX, and design. Morton built it, used it with his clients, and now with many other people like me, using it, getting so many great designs out of it, realworld UX professionals using the Whiteboard Design Studio to get the best apps and frontends that they can build great experiences. Dave Orton writes, "I tried Stitch without WDs and then using Freya and Stitch MCP. I was blown away with the difference." All right, so let's bring Morton in right now. Hello Martin. How you doing? >> Hey Brian, I'm so happy to be here. It's awesome because spring is coming to the north here in Sweden. >> We just have some had some warm days. So we are defrosting here. >> Probably ready to get outdoors and do a lot of things. I am so excited to have you here. We've been talking for a long time and Morton, you probably know this. You are the first official community module that's been released for the BMED method. And so many are talking about the WDS and what it can do and how it's integrating into BMAD. But I think people are going to be very interested in just your story and how we got here and how you discovered AI and the BMAD method and came up with the uh WDS system. So I would love to just hear more about that from you. back in the heydays of uh of UX design 99 um in the u wild um web era there I started also u to bring other freelancers together so I was running my own show and I realized quite quickly that UX design needed some mythology right I started in 2007 seven to draw interfaces by hand. And then I started teaching people how how to do that. So I'm actually taught 2,500 people how to draw interfaces by hand. So um that and then agile came along and I've been working a lot with as a designer and my work as a designer most of the time is actually communication. So I understand what the client needs. I draw a picture and then I go around talk about talking about this picture to the whole team and then I get some changes and then I do that round all again. So uh communication and design has been really close to me and then now when AI came along I of course panicked like everybody else in the design community. I tried, you know, this love co coding tools a little bit. It was like a 20 minutes love story for me and then I realized that this is not going to work. >> When was that, Martin? When did you um discover that these AI tools were coming? >> First, of course, I'm amused. I mean, it's really cool to type something and you get something. And uh but I didn't really think so much about it at first. I was going about business as usual. But then when when these uh love code love coding tools came out uh I started to get nervous like am I going to be replaced now and um uh so I tried that and I was really really disappointed with that technology. It's uh it was like I was expressing something and then I got something that was rather good and then I wanted to uh tweak it and make it perfect and then my monthly credits were gone. So I realized quite quickly that that was like a veas, you know, just like slot machine uh AI, right? So I I started to look for something that was more professional, more, you know, thought through. Why were you looking for something? Because I I have noticed a lot of designers, they felt when the image generators were coming out and where pe people were vibe coding websites, you know, like like a year ago, a lot of designers saw that as not really a threat or a joke, but not something to really even be looked into or embraced because they saw it maybe as competition or I'm not sure. But it sounds like you were actually intrigued by it and interested in it and you wanted to find out more and really see what it could do. So I am curious what really drew you to want to find more. >> What I realized was that uh these tools you know you prompt and you get something that that was not really compatible with the way I was working as a professional with 20ome years in the field. I have a lot of processes and methods and things that works basically for bringing products to the world and >> Mhm. >> none of that was fitting into that model. You know, it's uh and I wanted something more structured. I wanted something where I could have an intent, an intent, an intention, and then I could predict how the outcome was going to be. So, um I was looking for something more u useful for me as a professional tool and then I came across one of your videos and I was um just blown away by the principles in the BMAD method. It was so close to how I work as a designer. M um so um that's how I got curious. Um but then you know I got git faced basically. >> Yeah. You found BMAD. It sounds like you found the method and then you tried to jump into it and did you find it overwhelming because you were coming maybe from a design background and not necessarily a developer background. It sounds like >> yeah, my first few days was complete chaos where I'm needed to get into all the tools and um starting to code for the first time and >> all of these tools that's just, you know, it's like a wall of text and I don't know what's what's what. But, you know, if you're really motivated and you uh you have a purpose, it's um a designer is kind of hard to stop. So, I got into it and I started and I had a lot of help actually from the Discord forum. Uh I had a lot of uh helpful people there uh help me when I got stuck. And um uh it's I mean it's one thing with AI is that it's a tool that actually teaches you how to do it. If you ask nicely, I learned uh step by step started running your analyst agent. Uh that was when it clicked for me when I not tell the agent what to do but the agent comes and ask me really really tricky questions >> that kind of draws out of me my best ideas and challenge me into finding clarity in the product that I'm building. At first it was more like when I was done with the analyst, now I want to do the same thing with a UX agent and u and then I saw right away that here is an opportunity for me to take all my professional knowledge and upload it as agents uh to uh spread to the world. Basically, I have my specific methods for strategy and for how I uh create UX that is a little bit peculiar and a little bit different than most people might do it. >> Do you mean non-designers or do you mean even you have a method or a unique approach that's different from many UX designers also? Yeah, I think many UX designers kind of really are good with the graphics tools. They are really savvy in Figma and um Photoshop and other kind of picture like um drawing applications. >> Mhm. >> So I guess a lot of uh designers want to start there. I also the other version is that you have a developer who are doing the technology part and then just want to slap some nice interface onto it. >> So and those approaches they have their major downsides when you are building a software that should work for people. In my module, I help the user to kind of think first and find clarity first. And actually what I'm usually telling people is that when you go through the using the Saga agent which is the analyst in WDS and then you switch over to Freya which is the UX um agent. It's not so much that it does design for you but it changes you. The process is making you better because you will find out what you want to do with users and you want to be able to see what you're doing from the users's perspective and what comes out is a totally different piece of software than if you are you know churning out features with in the speed of AI. Obviously around August when you started using it. I think it was September or October where we actually met >> and we started talking about this module system that was coming and I think that gave you the spark to say like oh there is something I can add to BMAD uh which is the WDS we call it now which is an add-on module and we actually have users of it but what does the WDS in your mind really add to people or to the to the BMAD method that people can take advantage of right now and maybe some of these people are designers. >> Yeah. Well, BMAD has the uh awesome opportunity to present to uh our users two solid and proven ways of doing uh software, right? um the classic version that uh you created when you take the approach from a very agile standpoint, you're talking about the product that you want to build and you make a solid PRD and you create a product requirement document, a PRD. >> Mhm. >> And based on that you will then create users uh epics and stories, >> right? And when you have your epics and stories, then you have a really cool way of getting into the software because when you're doing something for the business and then you're doing something for the users and then you can kind of fit it together in the terms of the story. Um the other method that is available in WDS is more that you start from a strategic standpoint. You're starting from so where are you going as a business and how the software is going to help you reach out to users and fill new opportunity. And in that way we're going to use the interface as a drawing board for the front functionality. >> I do want to ask you is this for designers or is this for anybody to use this? Oh yeah, I have done it in a way so that the module and the learning section which is super detailed and the tutorials is going to take anyone who is you know interested in users and software and use of software into a place where they can actually make design. The advantage that you have is that you can stand on my shoulders and uh start where I'm ended up and you don't have to make all of my mistakes. >> Part of the magic of the WDS then is that you're actually not just setting up these agents to ask you questions, but you're taking your experience from 25 plus years and you actually have it baked into the modules. So, it's like I actually have my own personal Morton >> helping me with Freya with Saga building up my own design. There's something that you told me a long time ago that I'll never forget. Everybody what they get wrong is that they're doing UX backwards. >> When I say people do do UX backwards, it's like everyone wants dessert first. Healthiest thing is to start with a salad, right? And uh everybody want the pretty buttons out of the get-go is going to very very easily lead you astray and put you in a situation where you get stuck in the details and you are spending hours and hours and hours creating something that is very very nice on the surface that but nobody would nobody would use. Right? So when I go into a project like this, I realize something that I think is really important for us now when we are um using AI to make our products, right? And it's that you're not supposed to use AI like slot machine, right? Because if you are there in front of the computer prompting and you see the result and then you deal with it, then you're actually going to design and develop slower than if you didn't have AI at your disposal. Now specifications is the new code, right? You are what we are doing with the BMAT method is that we are giving the recipe to the agent. The whole principle for uh all of the listeners that hasn't been like digging into BMAD a lot. It's the you're not with BMAD. You're not prompting to get code. You're prompting to get the document that will make you add clarity to your idea and to make what you want more sophisticated. And then you do that two, three, four generations where you get more and more details. What you're going to do is that you're going to take all of the assumptions that AI might have and you're boxing AI in with these documents. So that you will have a very clear path where the agent can do God's work. Right? So the specification the your ability of specifying so that AI can do its work is going to set how effective you are because if you learn how to specify then AI can work autonomously for days or weeks creating your product while you're focusing on something else. >> So that's where I think there's definitely some overlap between the BMED method and the WDS. It's not just about getting the right specifications, but I think what your magic is with the WDS is not only coming up with the specifications so we can feed it to the machine, but your approach >> to actually coming up with the right specifications is such an interesting take on it. And I I like your analogy of like not starting with the dessert. They just want to start with the design up front and I know what my UI looks like and then let's add a button and oh, maybe we should add this here and this here. And this is what we've seen failing with vibe coding all along, right? So if we can actually break it down and come up with a good idea for a project, we come up with something better in the end where we have the specifications and then the machine can do our bidding. But I really love the uniqueness of the WDS approach to actually come up with that design is even many designers get it backwards is they jump right into Figma and they're laying out a screen and maybe they have an idea of the app they want to build but they're starting with well let's put a let's put a window here and let's put a chat box here and let's put this here. >> But I think what you're saying is is that's all wrong. So, I want to let you get back to your presentation, but I like is is that the premise that that is what you're saying is backwards is even starting starting with the visual layout is not the right approach. >> If you're diving into the details on the top right corner on the first screen, the first thing you do in a project, I think that you will be on your knees staring at the grass when you need to be standing up looking at the horizon. design in AI needs to be captured in code. This was very much my biggest aha moment when I realized that all of these things that I do in pixels and and drawings and lines, all of that needs to be in code because AI works with code. So the the quicker I come into code, the better. And I see Figma and other graphics tools more like agent training tools. When you are going to be able to scale design in with AI, you have to work with a design system. And the design system is basically a component library where you tell the AI the visual and interactive language of this business that you're running or this app that you're building. You start maybe in green field from nothing and then you will design a button somewhere. And when you do that, that's going to be your opportunity to start making your design system. Like, okay, so here's a headline. We put that in the design system. >> And then we have a button and then we have a background image like a hero. And then we have something else. And as you are building, you then put it into the in to the design system in code. And the next time you're making a screen, it turns out pretty solid right out of the gate. So designers have really been the gatekeepers of UX, right? Gatekeepers of the screen because we were operating the the pixel programs, right? So it had to go through us in order to get on the screen, which is a pretty big responsibility. And now AI does that for us. So me as a pixel pusher is just less valuable now. But me as a strategist has never been more important because with my 26 years of designing software, I know what good looks like. I met over 1,000 people in usability studies with eyetracking. So I can kind of see what people think. And if you take any UX professional with a few years under their belt, they will have the same the same eyesight, right? So when AI doing is doing the heavy lifting, I need to uh take a few stairs up in the project and be able to look longterm into what might be valuable for the users moving forward. So if we have a look at the process in the WDS as a whole, it starts as it does in BMAD method with the product brief. It's going to be a little bit more detailed because we are leading with the interface as a way of outlining our software. it's going to be uh needing a little bit more information early in the process because we need a little bit more information up front since the interface is going to drive the the outline of the whole product. What we also are doing in our strategic phase is that we're doing something that is called a trigger map. And trigger map is the most well spent time and attention you can ever do in a project like this because the trigger map is going to answer to you why we are doing this software and uh what we are doing and for who we are doing it and they are going to use it because so when we have these two document collections we're going to have also the platform requirements. So with WDS we're separating what goes into the software that doesn't have any interface and we're going to uh separate what actually facing the user. So we can branch out the project and you can start developing the backend features. Basically, you're going to do the the the UX in the form of scenarios and as you are completing your screens, you create front-end code and then you develop the complete product. >> So, where are the requirements actually defined in the WDS? Is that in the product brief or is that going to come in where I see these other phases such as the scenarios and the backend and architecture or is that the trigger map? >> No, what's going to happen is that as you have the platform requirements that is going to um go nicely into the standard BMAD uh process. When you have defined your platform requirements, this is going to be connecting nicely into the BMAD method development side and your John your uh project manager is going to take care of those and fill them in normal way that you will do with normal BMAD. Each page is really a requirement document in itself. >> Mhm. >> So the each page is then going to work have that shape a little bit. The product brief is going to of course makes you uh focus and get clarity on your project. We also have a content and language part where you talk about the what you're going to the content of the site. We're also going to have a visual direction document where you provide your inspiration or you provide what you want things to look like. Like we have our corporate visuals that we want to use and then we might have specific documents for certain projects. So if you're making a website for example, it makes perfect sense to kind of feed your keyword strategy into this and it can be any number of documents that has to do with your specific business or the specific product that you're going to be uh going into and then of course the platform requirements. And my experience is that you can actually come really far when you are in the product brief motus let's say in what you want the product the the platform to be you can choose your technology you can choose what kind of services are you using Google or are you going to use some other kind of you know APIs or something like that. >> Mhm. And it's it's solid work to get those things to work and it doesn't have anything to do with the interface. So it kind of makes sense to to separate them and do them parallel with the graphics work. Yeah. So a trigger map is going to be encapsulating your idea that you have uh got clarity on in the product brief straight state. Yeah. >> Mhm. So what we're going to do with the product is that we're going to take one step back and we're going to start asking us the question why are we doing this software in the first place >> as a business because a software is for to do things differently, right? You have a current way of doing things and then you have a better one, right? And when you have a business and you have an offer and you want people to use your way of thinking, let's say, then you want to do that because you want Yeah. What do you want? And the the goals, the the the vision that you have a world when people are going to be using my website instead of having to call somebody or something like that. that's going to be connected to your business goals. And they might be something like, I want to be seen as this forward-looking company or I want uh people to look at my videos or like watch my videos or um there might be a number of things, but what it all comes down to is money. Well, it's not just as simple to say we want to make money because then how do you want to make money? Mhm. >> Lots of companies they have peak hours. Let's say everybody comes on a Friday. Well, you have the store open Monday to Thursday as well. So, bringing them to the store on other hours might be a good idea for your business. So, we might have an idea of a piece of software that will make people order from you all week long, right? So, that might be a driving for um a why, a business goal, right? M >> and then you have your product like this is what we want to do. You already talked about that a lot in the product brief. But then we take a step forward and we ask ourselves a very important question. So the question goes like this. Who in the world out there will by using the software in the intended way make sure that your business goals is going to happen? And then you have your target groups. A beginner mistake is to say, well, our software is for everybody. Like, well, yeah, but then you're pretty much designing software for nobody. >> I mean, even if you take a product like Facebook, for example, that large portion of the world's population is on. You're going to have some people that really care and hang out all the time and get you all of the ad revenue and you have other users that you know hardly cares. Who are those people who's going to care and you have maybe two, three, four u different kinds of groups that will interact in different ways. I mean sometimes you will have something like influencers that will not bring any substantial income but if they come everybody else comes so maybe that's your target group. We figure out how to design for these groups by exploring their driving forces like >> Mhm. >> why are they doing things? You know, they're going to be using the software because of what? And in terms of usage goals, their driving forces, we're going to have positive and negative. And the positive is going to be what kind of um benefits will they see? And the negative is going to be what kind of u fears they can avoid. And in many cases actually in digital software the negative forces is much much much stronger than the positive ones. >> Oh wow. Why is that? How do you how do you figure that? >> Yeah. You know we humans we are loss averse >> which means that we are people are going to go to great length to not lose something that you have uh and much stronger than actually getting something uh that has value. So if you can um and and there is both um uh positive and negative at play all the time. If we take the Facebook experience like oh I don't want to miss out on >> you know the what the events or something like that like FOMO is really strong there. >> Okay. Yeah. So uh oh everybody's doing it >> polit political advertising right it's all based on this concept I think of >> oh yeah it's fear of missing out it's all fear right >> right it's all fear based and it's interesting right fear is a motivator um >> of course it is very >> so this is this is really fascinating and so what you're saying here really I've tried to do some of these pieces before starting with why it's a very famous book right start with why >> and it's not easy right like it sounds simple you say why what, who, and because. But thinking of these things on your own is difficult. And I bet this is probably one of the great ways that the WDS in BMAD is helping you with this process. A, I didn't even really think of this as part of the design process, right? I I'm the naive designer or developer. I have an idea for an app. I come up with a brief and then, like we said, I just start slinging stuff on a page. But if I haven't taken the time to even understand who would even want to use this, I could end up wasting my time building something for six months and maybe the AI even helps me build it, but I got a I got a dud that nobody wants to use because I didn't take the time to understand who is going to use this. Why are they going to spend their hardearned money on it? >> And why is it going to be sticky that they're actually going to be coming back? It is Saga, if I remember correctly, is the agent that is going to really be pushing with you hard >> to come up with these answers and probably not just accept crap surface level answers, but really push hard on you as the expert >> to figure out what the hell it is you want to build and why it's worth building. So, this is so exciting. I'd love to see this. >> Yeah. Many people think that UX is Figma. Like, it's it's called user experience design. Mhm. >> And if you're going to make a a worthwhile experience for a user, you better learn uh more about those users, right, you better figure out how to make them tick in order to be able to serve them with something that they will find valuable. >> I like that. And I I really like your, by the way, I really appreciate your Facebook example, too. Your idea might be this is for everybody. I like to think about that. I have an idea for a product that the whole world is going to use and maybe the whole world is aware of it and uses it but you have to narrow it down to who is that core interested group that loves your product and wants to keep using it because if you don't >> design for that you really are designing for nobody like you said right and this is going to help you >> if I understand the trigger mapping exercise itself in the WDS is going to help you nail that down >> rock solid so you know who you're building for. >> I mean, if if nothing else that you have to start with one user and then add another one and then another one after that. >> And that was going to be my next question. Maybe this gets into the scenarios, but is it one user >> that you're doing in the trigger map or are you coming up with multiple personas or groups or types of users that would be interested or do you really need to narrow it down to one and start with one first? Normally I have three maybe four. I think that one of the brilliant things with the trigger map is that it should actually fit on one piece of paper. ah >> so uh one you know letter size uh picture because if you have uh really ambitious material for your target group analysis it's going to be in a drawer somewhere and nobody's going to going to care about it. So >> that's that's why it's important to have it on one screen so that you can you can have it you know do good for you. Now I want to show you an example of that. So in this case, you're looking at an app that is going to be household name in Swedish dog families and they're actually fair number even in a small small country as Sweden. So >> we see that 30% of Swedish families should use this app and so that's the main uh why the main business goal. Also, we one business goal is to change the change how teenagers relate to the family dog and then you have the software in the middle and then you have the different target groups. >> I love that this is a a visual diagram that you can actually see how it's all connected and flows into each other into your app in the center. Did you have to lay this all out yourself >> or did the WDS help create this? >> No, this is one of the templates. So it will make a mermaid diagram >> and it has that template into the in in in the system. So this will come out of the process and in this case is the parents. We have actually bundled the parents as one unit here because >> maybe it's the uh parents they are in dialogue with each others all the time around the dog and then they want to they want to make sure that the teenagers take more of a responsibility for the dog. But here what they really want is the real time visibility. They want to be at work and not have to care about if the dog is taken care of. Right? So that's a that's a strong driving force. What they don't want is to have to to rush home from a meeting because somebody forgot to walk the dog, right? So that's that's basically the driving force. And you can you can feel that, right? you can feel it in your body a little bit like you can see yourself in that situation that that wouldn't be nice. >> Mhm. >> And that it would be worth investing the time and effort into an app even if even if it's free just investing in that kind of infrastructure might be worth it. Right. >> Right. >> So >> no, but how did Saga push you to actually come up with the needs for these users? What type of questions did it ask you to come up with this? So it it asks you to imagine >> who would benefit. >> Okay? >> And then you make a list of people who might be benefit and then you kind of prior prioritize them >> uh with their engagement and how many they are >> and Saga is pushing you to come up with these personas and helping you define why they would be interested based on the product brief I assume. >> Oh yeah. Yeah. it I mean it it helps if you have imagination. >> Mhm. >> But if it will it will do do a great job even if you're even if you haven't done these kind of strategic >> so it'll help you fill in the gaps. That's great. Yeah. Because I think a lot of non-designers coming to this for the first time >> they might feel a little bit overwhelming like me. >> I need help and guidance probably figuring out I I never thought about this. Who are my target users? So will it help me kind of through that process if I haven't done this a lot of times? >> Sure. Sure it will. >> Very nice. Very nice. I love that. >> When you have this, >> the cool thing with this information that we have in the in the trigger map is that it will help you to design a page pretty much mathematically. H. >> So I will I will I will show you how this is done. >> Yeah. I would love to see how the math plays into this. >> Yeah. So when we have the trigger map when we actually start designing things, we are going to do it in scenarios. And a scenario is basically your the first scenario is probably going to be addressing your primary target group. And you have a usage situation like where are they when the software is going to be used. Are they on Google or are they in front of a bus stop or are they where are they in the world? That is going to also inform you on what devices that you probably need to support. Like are they at home doing their taxes? Then they're probably in front of a desktop computer >> uh or a laptop. But if they're out and about, you making a brilliant desktop application is not going to help much, right? The scenario is informing us about these things. What it also does is that it slows you down to think about the visual order of things on the uh page or the logical view that the user is going to meet, right? Mhm. >> What is meeting the user? What's facing the user? The first thing that happens, it should be connected to your most prioritized business goal, right? That would make sense, right? >> Mhm. >> And imagine you have a big button there on in the hero picture. >> Okay. >> That button should lead to something that will add value to your most prioritized business goal. Yeah. And we have already decided that the primary target group is the people who is going to the most likely to get into and uh uh click on your buttons, right? >> Mhm. >> So, it should be targeted to your primary target group. The words and the pictures and everything on that piece of real estate >> screen estate needs to be aimed at tickling their driving forces. We are being intentional about what goes where, what it leads to because it is the user journey to get your ideal users that you define in the trigger map into your application and through your application based on what their needs are so they will continue to want to use it. Is that a good way that you would descri or is that how you am I getting it right what you're what you're describing? >> Oh, you're getting it perfectly right. If you don't manage to tickle their driving forces on the opening on your start page, then you're designing a so what and who cares piece of >> Nice. I like now how does this translate specifically to doing this in the WDS. Now what you're doing is that you you start by by either you have some kind of sketch, you have some kind of visual idea that you have made a rough sketch >> or I mean if you are uh a member of the Figma crowd maybe you have done your pretty you know solid Figma sketch >> which is perfectly fine. You place it as a picture on your scenario step. If you are in an app for example, there might be a lot of things happening in front of you and it's hard to define what's pages or not. >> Got it? >> You'll be on some kind of logical uh space in the software and that's what you're going to visualize. >> I finished the trigger map saga. >> I'm not a designer. I don't know what to do this yet. How is the WDS even helping me know what visualizations I should be creating in Figma or sketching myself? Is it going to guide me through this process? >> Now, there's good news for you here because you can discuss what's going to go on your start page >> and then with our with our Excaliraw for example connection It can wireframe for you. >> Oh, wow. Okay. You >> Yeah. So, you discuss with it what the start page should look like and then it does the wireframing for you. >> Well, at this point, how do I know what pages I even need? I mean, I guess everybody needs a start page maybe. Because what you do is that you actually discuss and that's the that's the point of the scenario is to force you to think about where everything starts. Is it on Google? Is it in an ad in Google? Is it in uh in a post in Instagram or how do people end up where you want them to end up? Right? >> Okay. If you have a lot of ads on Google, then you know they they click on an ad and that means that they the starting page might not be the start page even it might be your landing page in within your product section somewhere. >> Got it. Okay. >> So it starts from the natural starting point. And what you're going to do together with the agents here when you're running this and doing the scenario is that you're going to do the shortest possible journey from the natural starting point to the place where you as a business is happy and the user is happy. If you're selling tires, right? >> Yeah. >> How can you possibly make this as simple as possible? And and we have one really important guiding principle when we're working with scenarios and that's selective ignorance. >> Because we are guided by the trigger map on what is important like we are selling tires to tired uh stay-at-home moms um and they are afraid of ordering the wrong product let's say. >> Okay. Okay. Well, now imagine what that person needs in order to get their tire delivered, right? So, and in that selective ignorance, you're going to focus on only what makes them happy. >> You're selecting intentionally what to ignore. >> Do they have to change their password right now? Do they have to install something? What do they don't need right now? Can you can you make the screens be about what matters? And then you put everything else in my in menus to decide. >> You started with a actual persona, what their fears are, what they're looking for. And so that's going to help you really design a good interface that doesn't matter to this specific persona. We might talk about another persona later where something else might matter to them, but by focusing on this one, you're building the interaction that makes sense to really get them to the point, which I guess in this case is buying tires. >> Oh, yeah. And and if you think about now how BMAD works and how the WDS is kind of building on that because you you you're you're boxing in what you want to have the system do, right? >> Mhm. >> So if you say to the to AI that this is a stayathome mom, they actually the the models know what that is. They know what it means. And if you then ask them to. Okay. So the words on the screen should be something that ensures that they will do something correctly. I bet they will come up with something like Yeah. And it has a guarantee to it or something like that. >> Right. >> And and when you ask it then to wireframe for you if you're not, you know, skilled in fancy sketching or anything like that. Mhm. >> Then it will do a surprising good job at at making these principle wireframes really nicely. >> And that's one of the most exciting things for me because I am not a visual design type person, but I love having the conversation with the WDS and it can build these wireframes out for me. >> Yeah. >> But if I'm a if I'm a sketcher, I can sketch and I can take a picture of it or I can give it to the agent also. So this works for graphic designers or people with no feeling of artistic nature in themselves to be able to work with the same process. I love it, man. I love it. That's so cool. >> Yeah. What happens after when you when you have your your wireframe and you're kind of happy with it and it's actually a point to make lowfi prototypes >> has a very important purpose because everybody knows this that if you make a sketch you will work faster later right? >> Sure. If you put your principle down, so you know your visual hierarchy, you're going to design something that is much cleaner and it's going to be designed much faster than otherwise. >> Thinking about it now, that makes sense. So, I always assumed the importance of of wireframes was just because it was easier or quicker to do up front. But you're saying something really interesting here that I want to highlight. You're saying there's an other purpose for doing lowfi wireframes beyond just that they're easier to produce up front. C can you maybe just highlight that again because I've never actually heard that before. That's interesting. >> Well, being a designer is having wrong 95% of the time. >> I mean, you know, ideas that they sound very smart inside of your head and then when you speak it out loud or you draw it into physical form >> Mhm. you're going to figure out that it wasn't so smart after all >> or that there is a much much much better way of doing it or you did it backwards or something else. So making a lowfi prototype will make you fail with grace, right? It's going to be very low rate of throwaway, let's say. So what goes in the wa waste bin is not going to be something that you have, you know, really put a lot of effort on. So you can throw something in there. You get, oh, here's a menu, four items. What should that be? Yeah. What should that What should the item be? If we if we have space for four things here, what should that be? Right. It sounds like a very psychological a very psychological process at pray play here that I think you're getting to which is that um >> if I spend a lot of time like really making these beautiful maybe even HTML rendered we'll call them still wireframes or ideas I'm going to get attached to it and maybe be less likely to throw out and follow the selective ignorance that you're getting to. Whereas if you're doing these low fry wireframes, I'm not so attached and I won't I'll be more likely to throw out what I don't need. Is that >> is that part of what you're doing yet? I love it, man. That is >> absolutely correct there. Yeah, you're absolutely correct. >> That's awesome. >> But this is this is only one part of the scenario step >> because what's going after is the specification. And here is really something where AI has made this possible because I I tried to uh annotate my sketches before. Of course, I've tried to do, you know, specify I draw something and then I specify and then I give these to the developers and the developers, they throw away the text and they look at the picture and they just go bananas, right? So, but with AI, you know, the developers don't care about the specifications, but you know who really cares about the specifications? The AI agents, they love it, right? Mhm. >> And what's possible now with AI is that you can draw a picture and then you can ask the AI to describe in painstaking detail how every single piece of object on that sketch should work. And every piece of text they can generate for you in 16 languages if you want to, >> right? And every field has error texts, right? And it has um fringe cases and there is parts of the screen that maybe should be, you know, uh animated in some way. And then you can draw a storyboard for that and you can describe that animation in detail. So that the design that you have is going to be the description of the product. And this is what I'm talking about when I'm saying that the specification is the new code. Because with love coding, you're going to find something that you don't like and then you're going to prompt it a few times and then it's going to rewrite the code >> and after that everything is just spaghetti and it's going to be, you know, just fall in its own absurdity. >> Yeah. Or it's going to be very generic. We've all seen that with lovable and replet and and just vibe coding in general, right? Yeah. 100%. When you use this approach, you have the picture, you have the text and that is a very very compelling prompt for the agents. >> And what we also do here is something that is really unique that we provide unique names for everything on the screen in the specification. Yeah. So okay everything that goes on the screen >> through our specifications has a name >> and that's that is useful not only for you know JavaScript components and stuff like that. It's also really useful when you are giving feedback to the system. If you know that this little widget has this name you can easily say well this widget should be a little wider which will help you prompt. It would be super super useful also when you do use Figma and make your design system stronger as you're working. So I can show you exactly for this for the start page of this dog app how the process actually went down. So you can see that and this is >> this is Figma. >> And here you here I showed you the sketches that I made and uh I sketch by hand. So this is my own. I sketch those by by hand. >> Uh but you can you might as well use the um the Excaliraw uh integration that we have. It works beautifully. you prompt and it creates for you and then you can go in and make changes and then you can collaborate with the agent in a really nice way. >> Um you will get something like what you see in the screen right now similar fidelity >> horribly ugly but it will capture the principle and the hierarchy of what you want on your um composition. Yeah. So from this uh you will then see here is the start page. It has a little bit of a navigation to it. So you can then go through your um scenario step by step. >> Mhm. Uh and in this case uh signin page you know we used a screenshot as a wireframe in this case because it's a pretty standard layout that works good too. Uh so here's the sketch and then the specification starts with what this page is for and so on and then you start digging into the page sections. Uh each section has a name, each object has a name, the uh uh everything has the content in this case it's two languages. So all pieces of content is described when we uh come down to what kind of heading it is. Then in WDS we do have a specific category in the code for the the design system. The design system also has a little HTML presentation of your different objects and your um fields and buttons and all of the different uh tokens that you have in that system. >> So, where did that come up with the the colors and the typography there? Is that something that WDS worked with you on or it just proposed something? >> Of course. >> Yeah. Yeah. So what happens here is that we go from specification into code and here you see basically Tailwind standard. >> Uhhuh. And >> there's a there's a really cool little browser plugin called HTML 2 design. Shout out to you guys. You're awesome. um it takes anything on in the browser and opens it in Figma for you. So you go to code and then you go to Figma and now you can't you can't have an app that looks like this. this is, you know, like, >> right? >> Um, so I started to work a little bit with different I played around with different things and I asked Nano Banana to come up with the uh color palette for me and like how would how how could an app look like? and I um uh worked back and forth with Nano Banana on this >> and we also have Nana Manana integration of course so you can you have specific skill that will that will guide you through these types of processes. The cool thing here is that all of these objects they are they can be opened maintaining the ids that you have in the specification. So you see this is start illustration hero. >> Mhm. Now when you have the start illustration here and you have the name of it on the layer that makes it possible for the Figma MCP when it downloads the code and each object to actually place it correctly in the code. >> Mhm. So this is the key to get the Figma workflow to work is that you start with a with a specification. You open it in Figma when you need to, but only when you need to. You don't need to have your whole product in in Figma. You open it and you make it and you save it because you want to save design in code when you work with AI. Um, and that's the big shift. I think >> a lot of the users of the BBN method that are discover discovering WDS, they are not designers obviously. >> Um, and they don't have Figma, they don't have Sketch, >> but it still helps them to come up with these assets. You mentioned Nano Banana. >> So, they could be using that and then feeding those assets back into >> the BMED method or the WDS. Are you suggesting though that people do have some type of tool like Figma or something else to help them through this process? Is that required? >> Oh, there is so many many uh opportunities out there. Um we we talked about stitch. >> One of our users uh used um WDS together with stitch. I have done that extensively and we have a specific skill for Stitch and this is my goal is to have all of the different services that can help us um supported within WDS. So I'm testing these services out and I'm helping the users figure out not just a review where you show a shiny example but actually how it works in real life. Now what you want to do and this is the principle that I mean it's almost like a theme in this whole conversation is like you want to box the AI in. M. >> So if you go to Nano Banana and you ask for a nice color palette, >> brilliant. >> Okay. >> You go to uh some place and you find, oh, on this site they have a cool looking input field >> and you you take a screen dump of that and you put that into your reference library. And then you have a conversation step by step with the AI where you say well this input field and then it can make it for you and then you make a drop-own menu and then that drop-own menu is going to be you know based on the lead of the input field and so on. Mhm. >> So >> even if you're not a skilled designer, you can still work, you know, strategically here to give AI as little room for assumptions as possible. And this is what I'm this on the screen right at this moment. It's showing my point of the drawing application like the Figmas of the world. >> Mhm. is really agent training tools because what you see here is that the to the left is what the what the agent created and you see that it little bit plasty feeling I would say. >> Mhm. >> I think the rounded corners are a little bit too rounded for my taste. So then I had the agent put all of the buttons on a page and then I used the HTML to design plugin to bring them into Figma and then I copied them and made graphical adjustments on them and then I used the Figma MCP to take it back. And since all of these objects have the correct names, uh, the agent can find the changes >> and it can update in code what this kind of orange and this kind of text is going to be and this kind of rounding and it saves it into code and the next time I build the application, the buttons are different. So that's how we work with the design system and that we each screen we are making the design system gets a little bit more you know elaborate a little bit more detailed a little bit more sharp and in the end you're going to come to a situation where 75 80% of your screens are designing themselves based on the sketch and the specification. >> This is so powerful. I love that we have the WDS that can help an experienced person or a beginner work through the trigger map, the product brief, the trigger map, but then actually guidance through coming up with a good, beautiful design that doesn't just look generic and vague. Morton, there's I bet a whole master class you could do just on UX design, especially for beginners, and how to use this. Oh, yeah. Just to kind of take this home and wrap things up, let's talk about how we then take this design now that you have this and maybe get it and actually build the working roh prototype and how that then feeds into the to the BMAD method. I'm working more and more vertical which means I you I follow my scenario and as I am exploring one step I draw the picture I make the specification I do storyboarding I uh define all the components in the design system I get the ids of all the things and then I just get code right away and I think you know I See, I know everyone on the planet would agree with me if I'm saying that design in a design application has a zero business value on the users because you have to show your design in the realistic scenario in the real device. >> Mhm. >> And in order to do that, you need code. And it makes so much sense to me to take and show what you have in code as soon as possible because something that looks brilliant in the picture format might work really horribly in the mobile phone, right? >> Mhm. >> So if you can't see it in the real device, it has very little value, very little utility. So you want to get into code as soon as possible and then you do your visual you know finetuning as you go and also I mean especially if you have a team where the developers you know with AI superpowers are you know waiting for the interface >> right >> it's like yeah just a few more days in Figma right it's it's not going to fly it's much much better to get your principle get the code say at the principle of the page work and then you apply your your uh fine-tuning. >> I work with designers in my dayto-day also and we're going through the transition of you know rolling out to >> the AI to the to the design team and to product managers and everybody in the organization and I see this across >> I'm so lucky >> I am lucky to actually work with some amazing designers. I I I do I do feel really lucky. But one thing I see across the organization, excuse me, across the industry right now, Morton, is a lot of people tell me >> their designers are in very different places. There are some that have not embraced AI at all. And we kind of started the call with this, right? And then there's some that are kind of in the camp that you are, but maybe they're using Lovable or some of these other things or they're still in Figma and they're using Figma Make and some of these other tools. for the designers that are either maybe a little bit afraid of AI or they're just starting to pick up AI whether they use BMAD or the WDS or not which I hope they'll try it out. What is like the one message you would want to share with them and what is the one shift that you think they should be trying to make on their own? I I know because in August last year I was a complete beginner and there is a there is a threshold and it is powerful and it is painful to go from a picture first to a code first environment. Mhm. >> I mean, it's like it's you're talking to people that are generally visual and you're forcing them into textbased systems that is going to be a transition. So, I think if you are if there is any design managers listening here listening to this like allow that transition to take time. Um, it's and if you if you think about it a little bit in the organization, you're going to have a little nice triangle when it comes to AI adoption, you're going to have your absolute scouts, you know, people who picked up AI a week after Chat GPT came out >> and they are burning passionately about this and they're doing awesome things. And then you have people who just hate the guts of AI, right? >> And then you have all the people in the middle. Your organization is not going to fly before the people in the middle starts adopting this. And >> a good way. Yeah. >> For for this to happen, you need frameworks. You need something like BMAD. You need something that can unify you. you need to have a way of thinking about uh skills and tools and templates. And I think one of the brilliant things with BMAD is that we have agents that has a name that has a home that has a part of a a workflow because you can easily remember seven agents names but you cannot remember 200 SL commands and and you know like finding a way of sharing this knowledge and making it available for everyone and then just make sure that people that don't have access normally to agents and don't know what that is. Like you have to let the first steps be really really slow. Like >> have an have an agent day a week where you take people through the principle of of u you know gits and branches and everything you know. So you think that's important for designers to start learning these tools. Where where do you feel the line is for the designer in a mixed organization like this where you have product, you have design, you have engineers, >> do you feel like designers should be at this point or very soon expected to even produce working prototypes outside of Figma? What what you make powerful through the WDS and we make powerful through BMED is to go one step further. And we should be clear, the WDS and BMED, you take these designs, you take everything we've gone through and you produce working I don't even know if I would call them prototypes. They might be prototypes or they might be the groundwork for you to keep building out features and actual applications or a whole new application or website or mobile app. Do you feel this is the future of the design space UX designers that they really need to get comfortable with actually building working software and prototype beyond the wireframes beyond the Figma? >> Yeah. What I would say is about iteration because when I make a design 90% of it is trash is just just fooling around and uh finding what works is done through iteration and you get you know you you get confident by increasing your confidence that what you're doing is is correct. And when you have something in a pixel program, you're very very far from actual getting user feedback. Right? This is also why I think designers are is super super important right now is we have talked a lot about the design part but we haven't talked about the the research part. We haven't talked about the testing part because it doesn't matter how nice your your software is. If you don't get it in the hands of users and if you don't get feedback, you're not going to be you're not going to be successful. So >> Mhm. >> and doing usability testing, meeting users, interviewing users, understanding your target groups and making quick iterations and taking the experience that you have and putting them into working code. That cycle is still important. And since we are working with people now compared to the speed of the design process getting user validation is so much slower right now because it is about people and um that's not going to be faster with AI. So designers need to be more of strategists and they need to be more of user researchers. And the design part uh what is beautiful right now with AI is the speed of my iteration. You know I used to design something and I get to see it after three months right >> that's my first glance. And I normally not very happy with how it ended up like a lot of my design was disappeared through development and then I kind of you know and I have to talk about talk to everybody again why the button was orange and why it was there on the screen. >> Mhm. >> Now and then half like six months later it's in the intended way. Right. >> Yeah. and then it get get deployed and it maybe it doesn't fit into this month's you know release. So it then you know we are like 8 months in >> m >> and the code is showed for the users for the first time when we have like a year to do the first iteration classically. >> Mhm. >> And now I can do the iterations like 10 of those in one day. >> Wow. Of course, that's going to be amazing, right? >> Just a year ago, Morton, >> as we were just starting to adopt AI, >> the way organizations worked is a product manager or somebody or the business, right? The business goes through a lot of the processes we're talking about to figure out what we should be building for the business >> and then we'll go to the product manager and the product manager comes up with the requirements and then we realize, oh, we need an interface. Let's set up a meeting with the designers. And then the designers are doing exactly some of the things you've just talked about, right? Doing user discovery and interviews and trying to figure things out. >> And then they put a wireframe together and then that comes back to us and then maybe we're talking about the wireframe and you have no idea how hard it is. Or maybe you do, but it's hard for developers and product to really visual visualize when looking at these wireframes. the fact that we can now have designers building something quickly interactive maybe even the same day that they get asked and we can rapidly prototype and go back and forth together. Um, >> it's a magical experience and I I love it as AI is not replacing designers. Um, just like we've been talking about, it's allowing us to collaborate quicker and easier and speak each other's language. as an engineer or just not a designer, >> the best thing you can show me is a working prototype of your vision and I can actually click on things and see how it works. I don't care if the code underneath is is garbage or not, but I can actually see how it's working together and then I can take that from you and actually harden it and make it production ready. It's it's it's it's magical. And now as AI even helps even further produce like good working code, >> you know, you can actually feed it the good specifications and it's it's building the things that are almost production ready. >> That's just making designer >> jobs even easier. So I I love it. I believe AI is actually helping us collaborate better and everybody that embraces this just is going to move move further and quicker. In a couple of projects, I have been in a spirit of like faster is always better. In organizations where you are kind of supposed to release two times a day, three times, four times a day. >> Sure. >> Where you are keeping the pace up. The risk is that we release fast and stay ignorant. Right? What we don't think about so much is that brilliance takes brain cycles. AI can help you get clear, but it can't make you smart. It can't make you understand users. It can help you, if you kind of have an understanding, it can help you. It can it can draw this understanding out of you. But I have seen projects and organizations where we don't have time to think anymore. Sitting down and actually, you know, putting your different experiences together is just not, you know, go make a lovable prototype instead, >> right? That's that's not it. >> This is the anti-thesis of what I want to accomplish with with WDS. I'm not doing WDS to churn out stupid things faster. >> Exactly. It's actually it's actually to slow you down long enough to actually put the brilliance out of you >> because you need to be thinking you need to be understanding. You need to be um thinking hard about the tough questions that your users are facing, the problems that your software is supposed to solve and the vision that you are going towards. I think with AI since code is faster of course >> but strategy is also faster. >> Yeah. So in order to in order to adapt to this organizations they need to put systems in place. They need to have frameworks and they need to have processes and give a driver's license for strategy to everyone in the company. Y >> in order for that to happen, if you're going to do strategy, you also need to follow a strategic framework, right? And and that's really the vision that I have with WDS. I would be very happy if a company comes back to me and says, well, we have given WDS to our designers and they are free to innovate if they follow these steps. So if they go through all of Saga's questions, if they ask around to find what kind of business goals that we have and what our target groups are up to and what they want, like if you have sat down and gone through that framework, those questions and your idea are still good, maybe you take it to a colleague. >> Yep. >> And you get feedback for a colleague. to have someone co-signing on your idea, then you can go to prototyping and then you take it in your immediate group. If they sign off on your idea, then you go to production, right? Something like that. Because this, you know, committees, everything goes to the steering committee, you know, that is going to kill productivity with AI. then we're not going to make use of this fantastic tool that we now have a position of. >> Yeah. You know, Martin, that's one of the things that I think really kind of aligns the WDS with the BMAD method and why I am so excited to have the WDS being the first official module of the BMAD community ecosystem. And that is because you really get I think what makes the BMAD method special and you're building it into the WDS. It's not about AI helping you move faster or do things for you. It's helping you analyze and think through and make sure am I building the right thing? Should I build it? Does it serve a purpose? And then it can help you build the thing. I think the magic in the BMAN method itself is also in the an analysis phase. And these analysis tools that we're building for people to use, I think is what really resonates with people. And I agree with you 100%. If people just want to sling some crap out there and get something done, I can name two or three other things that I will gladly tell you to go use instead. But if you want to be thoughtful and really think through something, there is nothing better than the BMAD method and the WDS. So I want to thank you for being here with us today, Morton. But first, I want to give you a chance to share with everybody where can they find you online. Obviously, you're in the Discord all the time. We have a dedicated space for the WDS and designers. So, please come and join us in Discord. >> Oh, yeah. So, um my website whiteport.com would be a a good place to start. >> Okay, great. >> Uh you're welcome to add me on LinkedIn as well. Uh Martin. Um you I have um Facebook and Instagram as well where I'm uh posting things and um BMAD stuff. I think actually the uh Discord server would be the best way to connect. >> Okay, great. There we have all the resources and so on in the GitHub repos for the BMAD method and white port-design studio. >> Um you will find the learn section uh where you can get into depth on all of these things that we have touched today and also the the future where things are going. Like one of the things that I really like with the BMAT method in general is that we are working so hard with following the capabilities in the models. like uh last August it was a whole different beast and the type of instructions that you had to do to get the result is very much different from they are from what they are today. So investing in your sort of agentic capability, you can be sure that if you learn BMAD method as a designer or a developer, you will have something that will develop with you and with the um language models and um not be you know uh thrown out in the next uh version bump in uh claude code, right? The pace of AI does not slow down. It keeps getting better and better. The tools and the models are changing. But if you look at some of these other platforms and products out there, you'll see they have not even had many changes over the past four months. And yet, we've had three or four major shifts in the technology come that we're keeping up with. So, if you stick with BMAD and the WDS, you're going to have a platform that continues to grow and evolve. and all the cool design applications that comes out, it's going to be tested by our uh awesome people and um if something comes that that that is useful, we will put it into the system so that you can utilize it in the best possible way. >> Very good. Okay. Well, we're going to wrap it up here. I want to thank you so much for joining me today. I was so excited to talk to you about the WDS and just share it with the world because everybody needs to know and try this out. And for designers out there, please check it out. Check out the BMAN method. Check out the WDS. Check out Morton's website where he also has training videos and Morton will also be doing more videos, I'm sure, also training how he goes through the >> the whole process of design. He has so much to share with the world and I hope everybody really checks it out very soon. >> Thank you so much. >> You're you're very welcome and I'm happy to have you as part of the BMAD ecosystem also. So, thank you everybody.