Sean 0:05
I think we’re ready to get started. Let’s go around and say where you are from, and what your name is and your interest in Nocode. That helps us tune the talk. I’m going to start and I’m going to demo is a quote for [unintelligible speech], Marla, we can look at balsalmic probably won’t get too deep into it. And then we’ll see [unintelligible speech]. So I can start on Sean, got a degree of deserves a second meeting. So it’s it’s still very young group. The idea is to basically teach no code and the tools that advance the cause it’s such a powerful thing, to not have to hire a developer to build a MVP that,

I think No code is getting to the point like I use Bubble is a full production apps like it used to be a thing of like no code, getting just the first version out there. But like the site that I run automatic, it’s fully built in Bubble for taking signups. And so it’s looked at . Anyways this group is how you guys, you tell me what you need, I’m happy to take this thing direction, I will just make it most useful. So

Lucia 1:40
make sure my name was on the production with no call them kind of using Webflow, which is web development. And basically the design so my my workflow or payment, once again, good design. So that’s my goal, and payment systems. So pretty much I wanted to read more of a service from a playing film us to more remote stuff, because filming therapists all over from Canada, background and finance and non financial publishing. So it’s a couple months ago, and we’re just starting a new SAS project. So I’m looking to see how we can help with that sort of thing. [unintelligible speech]

Sean 2:51
yeah, I mean, I was a developer many years ago, but I haven’t coded you wouldn’t want me to.

Unknown Speaker 2:58
So ya know, it’s it’s very difficult. [unintelligible speech]

Lucia 3:07
And originally from Thailand, I’ve been against him for a while, probably three months or so. And so we’re waiting on us. And I’m here to focus on design. And I want to learn more about other teams. I have a portfolio of webflow like one thing. And then I’m curious of what like Bubble and others. Yeah, I’ve been mainly focused upon using Figma.

Unknown Speaker 3:44
I am from Germany, after living in Lisbon for two years, even though I sit in the dark. I just graduated from a master’s in political science very far from no code. has been there for the past year, like you get a scholarship, that right now I’ve been looking to integrate a grating project of my own. And since I have no background in coding, we’re just talking. It’s yeah, my goal is maybe try and Dallow. I’ve been with Melodyne to try out like for for iOS apps and stuff. So might have questions, some questions about that later. Yeah, I’m just here because I’m curious. And I don’t know too much. And yeah.

Sean 4:27
I haven’t. So Adalo was what I use prior to a whole actually the first version of our app in Adalo. Okay, so I can definitely tell you to get questions about like

Sarah 4:40
I am Sarah. I’m from Portugal. And I have no idea how to coach but I have a lot of ideas for apps and things that I need to use. So no code seems like a really good option. My name is Rosa. Sorry, my English is very simple. I Understand. I am graphic designer. I am lead user interface. I am heren to learn about that. Yeah.

Unknown Speaker 5:12
Hey, I’m Abdullah. I’m from London and I moved here just on Saturday. So just getting around Lisbon so far. Over the past few years, I’ve been working with startups and pretty much mostly on sort of scale ups in a sense, where we’ve had our product team, we’ve had a tech team. So it’s not been somewhere that I’ve been involved in. I’ve been more on the on the business side. And now that I’m remote, I have a bit of time and ideas sort of swirling through my head. And I think this is a great way of taking ideas to to sort of action and seeing if it’s if it works in a rapid way, sort of thing. So let’s begin. So

Sachi 5:48
I am Sachi, I’m from Japan, I used to communicate with the designer and the development team using FEMA and balsamic. And now I’m selling b2b, b2b SaaS products from overseas to Japan. So no, coding is definitely a major genre to be focused on some robotics.

Sean 6:14
So I mean, I think the theme here is that we all see this as a way of kind of short get get to something real quicker than its immediate. So I had, what I find here is, again, I’m open to doing something different, but I was just going to show you kind of how I did, I did this blog post, they got a bunch of traction in a while that I’ll be uploading some really good one. But basically a big summary on Yeah. So this is just kind of a silly analogy, but I just went through and I broke out my design process into various steps and make all the details. But I’ll kind of give you kind of a condensed summary of this and show you just exactly how I design I figure we can just kind of prototype on the fly make up an app right now bring in the bottle app, make a clickable prototype and show you the whole process. So it’s all good. Okay, all right. So let’s do this. I’m gonna change the screen

Lucia 7:29
What’s up everyone I think we can just make a

Sean 7:40
stab at making a prototype Yes,

Lucia 7:47
cheap property

Sean 7:58
property finder site. Okay, so what I do and I’m the single the maintenance to basically wipe my office and I just take a warning and trace it to make some empty strings I’ll do it by hand right now but like basically you know Mason blank screens and can use roughly the size of

Lucia 8:23
the phone let’s just do a portrait and then

Sean 8:30
we got to think through Okay, so the property management app so it’s going to have we’ll just call it I don’t know

this cheap properties.com

and we’re probably going to have like a featured property here one big one when it’s on detailed about it and maybe See More

button and what else

maybe like join our newsletter

map Maybe I’m not actually a baby like yet so let’s do that on the see details maybe takes us to a screen where we got like a main picture of the property maybe some sub pictures a map down here

what else is details? Contact info

right man Yeah, like contact us Do I request a quote or something I always

do this like when I make fun I found that like put a little shadow behind it kind of makes it fun. Okay so then this go to a screen where we’re calling the last name

where we’re from a message and say message and then this would might let’s just say that this is our thank you screen share on social media

Okay, so let’s say that this is just like the fourth grade graphic we want to mock up. So what I’m gonna do this we’ll see if this works here. I’m going to try to mirror my phone to this appears and share during recording there’s training so once again

use the look at my screen right now, while I do this. So, what I’m going to do is open this marvel app. And this is free. And I’m going to create a new

a new design here to the photo lab or call it’s Lisbon cheap property. This is Bubble? This is not Bubble this is Marvel app. This is just the prototype. Okay, so at this point, it wants us to add the design. So we’ll go ahead and take some products. So let’s go here stakeholders vision is

the aspect ratio wrong, but it’s close enough. So this time, let’s have a strong look at how they are. Okay, so now, right? Yeah, cool. So now we’ve got all our designs. And now what we’re going to do is turn this into a clickable prototype. And this is something that we can now give to our friends this simply make them to read the link and get their feedback on the graph and try it. So it’s a really great way to actually go from like nothing to something in power long sticks. So okay, so the next thing we’re going to do though, is add the link. So let’s go back through wind surfing this one. We’ll say let’s add a link, link this button. Oops, this one is the more details.

We’re going to leave that to this screen, which is this one. Okay, we’re gonna go to that screen. And we’re gonna say this. Request a Quote button. Here. Let’s try that. And let’s make it to this and then on that last one

this one let’s learn that one. to the [unintelligible speech] Cool. So now we got

all of our links setup. And let’s see what it looks like. So you hit play, and then this is where you now generally like it’s, and to see what things are click slowly to touch the screen. Oops. Just touch the screen and it highlights the woman’s level. So, yeah, so this slide was saying to go through and say, Okay, any more details, great. Let me request a quote. Sounds great. Let me fill it out and submit it and give you that. And so you can see, as long as there’s now a clickable app in the web based version, as well in the mobile version from here, you can then shares the share buttons, and it gives you your copy that link creates a unique URL, and you did that. And we’ve [unintelligible speech] similarly and that gives you like a link send people to I’ve actually use that we use it as a thing. I’ve showed that we actually made an entire website, and then redirected the domain to that link to be able to basically fake a website and show it to people as if they weren’t real design the whole thing. None of it was real. It was just it was super easy. So any questions on that so far? [unintelligible speech] So this thing is called Marvel app. switchbacks and we’re going to know that now let’s go back to Yeah, so that is all the nuts. Was the model this marble app

Yeah, what do you think about a free app that covers reCAPTCHA hotlinking. The feedback election displaying I mean, it’s pretty, pretty incredible what you can do with that. So

Unknown Speaker 17:38
[unintelligible speech] What about the browser?

Lucia 17:44
websites as well? Yeah, I think

Sean 17:47
I think Marvel Well, I don’t see why you couldn’t use it. I guess you’d have to take a different organization for a website but the same thing should work right if you want to design websites, you’re right. Yeah,

and balsamic which is the other tool which I actually don’t use anymore, I find myself measuring everything so there’s just so much faster balsamic I kind of show you in seven hours on the traveling side, so I was doing surely I did. So I started

out trying to, I was planning basically prototype at the new version of the website that I built, and kind of spell that out all things and then realize this is just I should just draw it out on the whiteboard. It’s way easier. And so I basically give up on this but this is like a way of kind of politicking same thing only sort of drawing that you’re bringing into app and once I received the message Okay, so Alicia can be here any moment. What else so she knows your figma, which this classification of prototyping is just called one file open early. And I think for me the benefit of this is like obviously less time you can do it immediately. But if I implies that you know, a lot more about like the UX and the button colors and all this other stuff. Whereas this is purely conceptual and it lets you kind of leave people’s imagination that like a lead a lot more open to interpretation and a little more compensation. Okay, this this kind of basic functionality we want to go to i Bye

Lucia 20:03
once heard of like a tool is called UI thoughts like wizards. But anyway, it works like a similar thing. But as far as I understood, I never use it. But as we saw, it’s quite new. You can take pictures of like, white writing, but you actually draw that recognize this and translates them I don’t know, in half of Marvel does that to actually think of all kinds of things? What’s sort of the negative is to do? Yeah, but with a UI instead of wi?

[unintelligible speech]

Well, I think that’s it. Yeah. That was like a feature I just stumbled upon like some Yeah, that’s the one. Well, they did pretty much say, Okay, this is supposed to be a picture, there’s supposed to be a button or like a switch on switch off kind of thing. And it will translate that to well, some UI.

Sean 21:02
Interesting. Oh, so you drive out and then it converts it to exactly. Yeah, interesting.

Lucia 21:08
So maybe like a step further than Marvel but I never tried it out because I figured it was quite new. And I don’t know how, how long lasting it is in the world, like Bubble and thing.

Sean 21:18
So it’s its own, like it has its own objects of drawing canvas thing, and it converts your drawings into its thing exactly like that, for example, you take the pictures.

Lucia 21:32
I think you can also click it on someone’s been on this website for longer it just popped up? In my hand, actually, yeah. Well, yeah, I mean,

Sean 21:47
that basically, like, balsamic becomes irrelevant. Because then the quickest way to get input is to ask the guy out, and it converts it to the objects that you can then drag around and use that something that’s very important.

Do you know how far like it’s interchangeable to for example, create a prototype Bubble and then use it for further and figma or these kind of tools. Also be the other way, like figma is the prototyping tool and Bubble’s and functional applications more so Okay, Bubble has a way where you point it at a figma app getting data and turn it into a Bubble I’ve never used it but I’ve seen that but that functionality is seamless yeah. yeah, big file important application

Lucia 23:00
but it’s not that they’re kind of useless that they’re all kind of like it has the same code in the background and production extracted and then put it somewhere else and it’ll pick it up

Sean 23:11
I mean, free will doesn’t have any application code is it’s purely UI layout so we’re all [unintelligible speech] has workflows.

So I’m not sure exactly how that would work. I think this maybe just like brings in the screens and like kind of creates each one as a screen in your application but nothing was wired at that point. Thanks things using ions

[unintelligible speech] everyone this is Lucia by Laura. She’s gonna [unintelligible speech] [unintelligible speech]

Lucia 30:00
okay yeah so if you Want to test an idea? I need to have that. Okay, if you want to test out an idea today at Kunis token

Sean 30:28
your mics on? So yeah, my microphone distributed. Okay. Um,

Lucia 30:36
so today what to say? Somebody else is something that you think, oh, maybe it’s where’s the microphone

Sean 30:49
like this, but we’re just gonna go Yeah. Okay okay.

Lucia 31:12
So we’ll use it daily for things like iterating features really, really quick and people’s comment. So the comment tool is really helpful, you can tag people in there. So yeah, so today, what I’ll show really quickly is the how to prototype some, like design interface really quickly for mobile for the mobile device, and how to prototype a very interaction really quickly. So um, so I already prepared some sort of assets. So these assets are in figma, you can create visual assets, and reuse them later. So they they’re good components. So I already created some components. So we can just drag and drop them in there, because it takes time to create them. So you don’t need to watch that. So the first thing you do is to create an artboard. So an artboard is something that is a canvas, and that can be set to any device size. So for this for this exercise, we’ll set it to iPhone eight, which is a very common size. So as you saw as you come here, you can choose the size. So now you can see that the frame here is set to iPhone eight, you can change that to any device says that you’ll like and so I’m going to drag the common component in which is the status bar into the iPhone. And for this for this app, there’s an app bar at the bottom. So this is the default navigation bar. So plug that in here. So as you can see already have a skeleton, sort of like the canvas now you can put content in there. And so what we’re going to prototype today is something that will look like this. So what we’ll have three screens, we’ll have a timeline has a scrollable, vertical, scroll scrollable content, and we will have a favorite, which has collections of different assets. And then we will have search tab, which is just a search bar. Is that quite easy to do that here. I’ll try to create that in real time. So I already have some ready made content components. So I’ll just make like a header. So making a header is very straightforward. You create blacktop, so you create a rectangle for the header. Make it dark, make the height 60. And then I’ll drag a logo, some searching in the asset list to find my logos with here’s the brand logo I already made. And so for for phones or mobile devices, you want to leave a safe area. So that is the content the edge. So the best practice is something like at least 16 pixels. So you can inspect that by looking at how proficient you are on the ligaments if you press option, you can see how far you are from the edge and how far this Google counted is from the edge. And so now I have the logo. What else do we need? We need a hamburger menu so Oh, come here, search for the hamburger. So this is a oops. So here, this is a navigational component that can be prototyped. So this is going to be a button that can be prototyped. So things down here that are button. So once again, we’ll try to see that it’s 16 pixels. So these are also buttons. So we will add interactions to these buttons, but we add at the bottom. And so the next thing is we are going to rename this according to slate online. And we need some scroll content in here. So I’m going to drag this in here. And I’m going to

actually, I think I want to just show you how to do this. So one thing that’s very neat about figma is you can use a lot of plugins.

Okay, so you have to position everything very carefully to make sure that they show up is in the right order. So just now because the navigation bar was sort of, not at the top, it was covered by the content. So so now we have the skeleton calculate. So you can wireframe stuff like this. And to fill this stuff with content, we can use some plugins, so we can use this plugin here called Content real. And if you click on these things, and say like, I want an avatar, we’ll just fill in avatar for you. Nice, right. And you can fill out the name, their names. The last thing is how to find some images. Okay, so get this. Alright, so we have the content tag on screen. And what’s next, so I should keep a kid the whole thing. Okay, so next up we have

so for this gay bar, I made some different variants of the same thing. So in variant is something of the master component is something like this. So just different buttons being active so they can be reused. So I will just copy this over. So it’s the same thing, but I’m just gonna choose a different active state. Another favorite is active, but it’s still the same component. So if I make any changes, or if I change the background of this, of this thing, everything will change. But it’s not published. So this is published in a library, because they’re linked, everything will change it will change one property of of the same master component. Okay, so now we need to do this. So once again, we can change the content with some placeholder content found the plugin

so I’m just going to click these and use the plugin to swap out different photos.

Unknown Speaker 39:28
Excuse me, all the things that you’re adding now? Are they already linked to the database? Are you going to do that?

Sean 39:35
I’m

Lucia 39:36
sorry, what do you like public content? Okay, it’s in a plugin is kind of pulling these from, like royalty free websites like up slash Unsplash. Yeah, or from Flickr. But you can create if you create some kind of account in here. You can upload your own content. So this what we’re doing inhouse, like we have our own content as kind of ready made, and you can just plug it in. But these are just publicly available content that you’re not, you’re allowed to

Unknown Speaker 40:10
use, oh, what I meant is more like, when you’re ready to publish the app, you would probably link, all these different, I’m gonna call them like, images to, to a database, and that database refreshed with new data or new content.

Lucia 40:29
Right. Um, I think this is a prototype. So we’re not using real content if you have a database. Like, this isn’t to the front end at all. So we’re just giving this to developers to to show them this is what the interaction could look like. And you can also test it on on the user. But to make the app, you have to kind of have a developer to develop everything from your common or backend database, because this isn’t a journey at all, this is just a design tool. Because it looks it looks really nice that you know,

Unknown Speaker 41:06
This lined up, basically where you link everything to the database, and then you publish directly to the different

Lucia 41:14
marketplaces. Oh, yeah. Okay, [unintelligible speech] That does the job. Okay, so those are the conversion. Yeah, I think there are tools that can convert figma prototype into real like coded apps, but not directly in here. Like, this isn’t linked to anything. This is a one time use image. If that’s, if that answers your question. Okay. So just keep populating constantly here.

Just these are randomized things. Just to make the app look real. And then the last thing is to know we’re going to rename this is is to make a search bar. Oh, and these apps have background colors. I forgot about that. So this is not them color.

Okay, so change this to the search component, variant. I’ve already made a search bar salary structure in here. So this is a search. We can also style it a little bit with some legal.

Okay, yeah, that’s good enough for now. And we’re just showing how to protect these different tabs. Okay, so I think that’s everything

Sean 43:45
I have a question so when you make. So was that the data like the Twitter card or whatever you call that like that thing that looks like Instagram, this was that an object was already in your library? Like already pre built? Yeah, yeah. So you can design something, though, and then freeze it as an object and then make it available to others. So yeah,

Lucia 44:05
in a library, where like this is this, this came from an internal library. So if you’re working with a team, multiple designers will have other team members, you can have a shared library. And you can publish the view made something like this, like a reusable component. So this can be used in different pages of the app, or you want to make sure that the styling is consistent, it’s better to publish it. So it becomes a reusable thing that other people will use. And also, they’re not going to override it too much because they like the build where the responsive rules constraints are already set. So in this case, like the title is this color that’s already been set, so they’re not going to override it too much. So that makes sure that you kind of look and behave consistently. Even when you like it You added features were adding content. And so yeah, these things are made beforehand. And so this came from a library. And so what else so this can we can already see something. So here, I’m enabling vertical scrolling. So you can already see that when I’m scrolling this it kind of looks like this is loves to be lots

Okay, fixed position. Okay, so there we go. Oops. This is small exposition Alright, so now it’s scrolling like how it should be, everything should be this also needs to be fixed.

Just some sort of small things about figma is that there’s lots of like quirks that you need to kind of just troubleshoot on the go. You need to make that.

Sean 47:04
Does anyone else used figma?

Lucia 47:07
Yes. What’s your experience with it? Yeah, I think Big Six, when you have persuasion, ready to make [unintelligible speech]. Okay, so now the scrolling is working. So it’s looks like this. Yeah. Um, now the other thing we want to protect is, so when they click on this timeline may go to the right page. So it’s really, it’s really slick that in figma, you can just add an interaction here. So this blue thing appears to drag it to this page. I can also add a bit of animation. Interaction, that’s not really animation. And so the key is to link everything. So they’re all sort of linked. Okay. So the search, there’s going to be a link to this page.

The timeline is gone to the link to this in our favorites. Awesome. Question.

Sean 48:40
If it’s a reusable element, can you use like one of them in the middle of inherit? Or does it get to link to each instance of the?

Lucia 48:49
Yeah, so for this one? Because it isn’t, the content in the tab are separate things. So the content could be dynamic. So you don’t want to lock them into the same thing. Okay. Yeah. In some cases, like, what is example like, if this so that this hamburger menu, like if there is a expanded menu, you can make each of these menu options to like page, so that could be fixed in the master component.

Sean 49:27
So maybe that doesn’t

change can do that. But it’s because you have these active states that need to be separated, treated as like separate.

Lucia 49:34
I tried to do like, link them in the master component. It didn’t work because these are three different components and they have states so it’s like, because they have an active state is kind of hard to make them. Yeah. So now if you do this, it will just work them If you can go to a user with this, and show them and do some basic interactions and and show them, what just ask them to navigate the app, you can validate your app idea very early on. And this actually what we do our company like we predict very kind of complex interactions, and we show them to users to do usability tests before development team will build because building is a lot more expensive and a lot more time consuming than protecting something like this. So yeah, my laptop managed to hold any questions?

Unknown Speaker 50:42
Do started design with figma or you start somewhere else, and then you trasnfer your designs?

Lucia 50:57
Yeah, very good question. So actually, we just have anything from like, a sketch of a pencil sketch to a wireframe, it’s more common for us to use wireframes because you have a bit more content in there that a sketch wouldn’t really do very well, like especially if you’re drawing the button, it’s really hard to to know that that like that’s a button unless you have like an iPad and colored some some elements. So I can show you like what we do, like, on my job, I would do like web based stuff. And we do wireframes of this fidelity. So things like this is not super. This isn’t this has no visual styling, but you can tell that okay, that was like we’ll come to me here, sometimes to screenshots like the sidebars a screenshot. And it’s just really quickly validate some interaction with users. And this is really helpful. And because it’s so quick to change that. Whereas something even like this takes a while. If you want to be like, Oh, we want all the like headers to be a different color, add a new tab, like that takes a way longer to change.

Sean 52:27
You ever work for anything?

Lucia 52:30
Yeah, you can live for me big mouth. And there was something called Big Jam, which is really great. So big jam is was big Jam Jam Session. Like we use big jam to do a lot of weight whiteboarding brainstorming, but you can also use it for prototyping stuff, like we did this whiteboarding the other day, but you can also prototype things in Big Jam. And there are lots of community files. So people are publishing things down here all the time. And you can just go see what’s available.

The cost of something like that. And so then you choose sort of the best way forward. And then the designer would prototype a higher fidelity thing that can be tested with users for usability risks. So after that, that could take a few weeks except that we will consolidate the findings. And we will change the design based on what we’ve handed off on usability tests. Like often that change the our assumptions a lot. Sometimes it changes direction a lot. So yeah, so from that when I was the VM or a project owner would then take the sort of validated design prototype, and then chunk it down into releases or roadmaps, and then and so engineers can like take techniques to develop. And then the whole team would have more confidence that they’re doing the right thing, because it’s been validated.

Yeah, yeah.

Sean 55:46
Yeah, like for anyone who’s built an app, then you’ll know it takes like to be able to do this kind of thing and have the conversation the next day with five people and then just see like an aha moment, like, Oh, we don’t need to build that thing. We need this other thing. Like, it’s invaluable. Like to short circuit, that whole learning process, instead of waiting a couple of weeks, or even months to build it and deploy that app only to learn that later. Like, this is why figma is a $20 billion company.

Lucia 56:12
Yeah, yeah, the earlier you can have the conversation with real people and get, like true insights into what it is that they need. And sometimes people only know it when they look at something, and they’re able to feedback on the real thing. And that’s why a design prototype is so valuable, rather than just talking to them like, Oh, what do you how do you want your recipe book to be made? Like people aren’t able to answer that question, but if you like, design a recipe app for them and be like, Does this help you save time and money every week? They’re in a much better position to answer that.

Sean 56:49
Do you guys go straight to the high fidelity prototype? Or do you ever do like just a low fidelity? Like, draw it out?

Lucia 56:54
Yeah, yeah, we often start with wireframes. And sometimes the ones we can already validate a lot. And it’s it’s better to sometimes validated wireframes because people don’t expect it to be real. They look at something that looks like handdrawn. And they’re like, oh, okay, we understand you’re just testing an idea. But sometimes we prototype like design something so high fidelity that they’re like, oh, but it doesn’t work. We’re like Yes. So something like what I just showed, like, it looks like a real app. Right? And that can be tricky sometimes, because they expect everything to

work. Yeah.

Sean 57:35
Cool. Do you is there anything else you need to show on there?

Lucia 57:38
Um, I can show a bit more advanced interactions, but I don’t know how valuable that is. It’s just like, a bit tips and tricks. So yeah, maybe no,

Sean 57:49
would it? I guess what I was going to show the last thing is if you guys want to see the Envision app, which is another tool, to my knowledge, it doesn’t do what figma does, in terms of like mocking things up. But it’s good at collecting user feedback on an existing mock up. Do you guys use it at all?

Lucia 58:06
Um, I used to use envision, but now figma kind of replace a lot of that. Yeah. Like, the thing with Envision is, yeah, like figma kind of does everything they do now. Yes. Okay. But the standard workflow used to be sketch slash, sketch plus envision, that used to be the standard workflow that you couldn’t have in sketch, and you add interactions envision, and you collect feedback in there. And you hand off the vision as well, because they can inspect developers inspect assets in envision, but now you just do everything.

Sean 58:45
So this is just something like when I mentioned earlier that we redirected a domain at the link to show an envision app. This is the site that I was referring to, I don’t know. So I don’t pay for it. So it looks like maybe they’ve changed the model since then. And you can actually preview it maybe. See [unintelligible speech].

I’m not seeing actually how to preview it anymore. So it might be I take that back, I can’t show you. These are the screens, at least, you can see what it’s in there all linked together, just kind of like we did in Marvel app. What I like about this tool, and I’m sure I’m assuming figma does this as well, but you can actually collect inline feedback. So if you give it to 10 people to do rather than like, like they can inline leave a comment like a post it note on that thing and say hey, I understand this button or whatever. And it’s just like inline relevant feedback, and

Lucia 59:52
then I can show how that’s done. You just click this comment button and [unintelligible speech]

Anyway, yeah, you could just like pinpoint. Like, there’s like a precision tool in the comments you can pinpoint anywhere in interface and leave a comment. That’s yeah, and there are some other tools, I think one of them is called was forget, because we never use, but there was some other tools where you can create a figma or envision or sketch prototype, and send it as a link for evaluation. And at the end, you can ask the user to then answer a few questions like How easy was it to use on a scale of five so they can leave some kind of evaluative feedback. And they can click back and forth on a prototype. I think it was something called and

Sean 1:01:07
I’m just collecting all the links. And I’ll post every all this stuff is just like a little summary as a comment on the meetup. Anyone have questions got access to world class UX designer? And by the way, you guys Lucia does this for free? I just did it completely volunteer. So can we maybe like give her a break? [unintelligible speech]

Lucia 1:01:45
The big, the big differences, like startup, just skip all the research, they will just go straight to build, it’s really hard to convince people. Because startup wants to kind of have something to show to the world and sometimes external investors and stakeholders, so they have way less patience for that researchers results come in. Whereas in like an enterprise company now we have, like way, like longer timeline for anything that’s about to be like, there was no real because we’re b2b. So there’s no real sort of deadline. And so yeah, we have luxury to do more discovery one. Discovery one, um, depends on how. So there are two types of discovery work because valuated just like usability tests type of work. And there is more quantitative. They can do with surveys and stuff, so that quicker, and surveys way quicker to do usability tests or interview the second thing, you have to schedule, the session, so that can take anywhere between one week to a month. Depends on how quickly you can ban people. And we’ve been really lucky that we didn’t have to spend money on recruiting people, because every time we reached out, they were very happy, happy to help us and happy to talk to us, but you’re taking that means an hour of their time, which is, you know, like we’re talking user, so billable hours. So sometimes you also need a bit of budget to do this kind of research. Because you know, people need to be incentivized to spend time with you. So you have to find the right people as well. Like flower software, not everyone can do what they asked them to do. They have to be accountants so but if you’re doing like something in the consumer app, you can go to certain websites and recruit people.

So what would you say is the best startup friendly methodology? You know, to stay lean and not, you know, stay much researching, evaluating?

If you can find anybody like someone, like your neighbor, your friends, family, colleagues, and anyone to validate, like, you can’t skip that ideation,

would you have the founder work directly with like, like a researcher, such as yourself? Or would you have them just mock up something and get coding right away, and then make changes down the line?

I would say that if you can get a designer to design something to design a prototype, and then test the prototype is always better than just coded. Because you can never see like, the risks in development and any any engineer giving you like an estimate, it’s never accurate. So even if even if you think something’s gonna be very simple is always taken, it’s always going to take longer so yeah, I think you should always put it out. Build design test with design as much as you can, even if it’s just like, drawing some action or wireframes, again, even if it’s done by the founder, himself or herself, is still better than just coders.

And then like, like, some

people are like, Oh, we just, you know, like, go live and see how people interact with it. But that’s still, like, a lot riskier than you were saying.

Sean 1:05:35
Yeah, I think it comes down to like your budget and risk profile and all that stuff. I can tell you that, like, what’s worked for me is like, I mocked it up, I built it and Bubble threw it out there. And I’m just iterating week to week like, figuring out what we need adding features removing features. That, to me, this is why this is like why I do a grip on no code. It’s just because I think it’s so powerful to be able to like control your own destiny not be beholden to the developers and have this long dev cycle where you have to communicate your idea and then wait for it to be built and then get in front of users and then find out it’s not the right thing. And then you just short circuit all of that

Lucia 1:06:11
so much. Question figma or envision the pros and cons do they come like uploads downloads functions, we have not natively the maybe there are plugins for that. Yeah, most likely, like there are lots of plugins for figma not so much for Envision, because figma is like an open source community. So there are people building things tools, you can find any tool in figma, really. So I would recommend it. I know we’ve used some plugging for like a traffic light that changes color. So you can tweak something like that and make it work for you.

Sean 1:07:00
Yeah, Bubble’s the Same was just the whole ecosystem of plugins, a lot of which are free, and just being able to like, like I’ve built this feature, I’ll just show it real quick. So this, by the way, is the site that I built in Bubble. It’s called problematic. And the thing that I rolled out two weeks ago was this page. And then last week, so what this is, is like we have these projects that we work on, I deconstructed them into like individual project needs, and then coated them against skill sets. And here, I added this last week. So you can now nominate, it’s open. In other words, like it’s not just me setting the problems and setting projects, I opened it up. So anyone can come in here, search for something, if it’s not in there. Add it, make sure that it complies with all of our rules.

specify which SDGs it addresses. And then if there are any upstream problems, you set those here. So you can do this. This is what I’m sorry, this is why I’m going to show that with the plugin. So when you nominate a project, you specify what problem it’s addressing, give some details. You get at least 100 characters and they’re like 200 characters. So now this is a plugin that I added that in the in the span of like, two hours to set this up. The last for browser based recording, to record a 62nd pitch video right from your webcam or your phone to pitch your idea. It uploads it saves it in the database. I mean, it just blew me away that this is this was a I think it was like $50 plugin, but you know, to have a developer create this for you. I don’t even know how many weeks we’re talking about. And here, I was able to pull that off in two hours and then add it submit it. So I mean, it’s really like the plugin ecosystem is just absolutely incredible with what you can accomplish.

Lucia 1:09:22
Now, I mean, took me around. It’s more like a prototyping sale. So it feels like it feels like for me like, Oh, I’ll build this one, I’ll get more money, but I’ll do it properly. It still feels like it’s not a proper way of building.

Sean 1:09:37
I think it’s a matter of scale and opinion like it’s been perfectly adequate for me. Granted, I don’t have a ton of traffic, but I know they’re serving like a Twitter clone that’s able to do how many hundreds of 1000s of requests per second or whatever. I mean, like you’d be surprised they can actually handle a lot of scale. I think if you get to some point like, should all be so lucky is to get to the point where we’re having scaling issues, because then that means we got traction. And you can go to a VC who will happily write you that check to have it built, you know, natively. So I don’t know I would have agreed with you a few years ago. And I think now it’s totally adequate to deliver production apps. And also things like Zanna, which is a database where you can last meeting Tonya showed us a good primer on Bubble. And she is also teaching a course on Zana, which is like, once you outgrow Bubbles database, you can hot swap out this other thing called Zano. And it wires up really easily. And now you’ve got like a whole production scale database to even handle more transactions. And that’s

cool. Anything else? Did I? Did you want to see? Adalo? I know.

Unknown Speaker 1:10:55
Yeah, I mentioned that I was doing some thinking as well, because I noticed [unintelligible speech] which I kind of understand this this spider app. Yep. Which is kind of a sad thing to talk about before that. Like a database to your prototype that you follow, or maybefigma, or they work together.

Sean 1:11:26
Yeah, I was thinking do something in OCR, you know, that OCR like, yeah.

Lucia 1:11:35
Like when you take a picture and recognize the text, and you can use it with and that was, yeah, not familiar with that some back and open pitch about how to use a dowel to raise something like

Sean 1:11:47
that. So the OCR portion of it would definitely be a plugin. That’s not something natively, you’re not talking about, like either uploading an image and having that processing happen on the server or something in the client, that OCR

Unknown Speaker 1:12:03
[unintelligible speech] OCR services. Okay. So far, I’m connected to them. They sound like they were done by engineers, for engineers. So I understand some technical there.

Sean 1:12:13
Okay. So let’s see.

Lucia 1:12:20
[unintelligible speech] For mobile apps. Yeah, I

Sean 1:12:26
can show you real quick. Let’s see here. This stands for optical character recognition. That’s pretty much what you pay for [unintelligible speech].

Lucia 1:12:44
camera onto like a screen or like a small can reach startup school, I’d say the next step would be okay, like use that kind of data and put it into some sort of database, you like to start on this island. And

Sean 1:13:00
so So zapier and Integramat would be another competitor, which is what I now use more than Zapier. Yeah, both of those are really, I think of them just like glue that can like take data from one app and send it to another and process it and just triggers that automate things like it’s really you can link to other 20 apps that way, if you want. So this is I’ll just show you real quick, while I got it open. So this is Adalo. I built a few dollar apps, the previous version of problemattic I built in here. And I would say it’s definitely more intuitive. And Bubble or it’s easier to get started with like the bar is much lower to be able to just go in here and like it’s kind of nice, just have you have this giant canvas, you can just literally like zoom in and out of two screens, and then make stuff. And then kind of like figma, you link it together. And there’s a database behind it. So when you get into the database part, there’s more to it. But it’s very doable to build an app in here. But I would also say it’s also a lot more limiting, like Bubble, you’re not going to hit the same cul de sac that you will with Adalo. Like I just got to a point where there was things I couldn’t do in it that I was trying to do. Whereas in Bubble, it’s a blinker, but there’s literally nothing you can’t build in Bubble. [unintelligible speech] it’s a steep learning curve, and like,

steep, like, Quick Time to effectiveness, shorter learning, but quicker to hit a wall where you can’t get, you can’t actually do what you’re hoping to do. It’s also very optimized for mobile. And building like desktop apps where I was aiming, I was targeting the desktop more than the mobile first. So you can do it all like Adalo makes it really easy to generate native apps, whereas a Bubble requires some plugins and extra work. So it just it I think you’ll find blog posts out there that compare them. But I think it really depends on what you’re trying to do. And you might get what you need out of Adalo. If you can do it in Adalo, then it’s way faster and easier to get there. But I just found that I couldn’t get what I wanted done. So, but I’ve been very happy with Bubble. Digital, for example, download, just like a Bubble on site from scratch, how to start from scratch. Yeah, I had to start from scratch, but I was planning to re architect it anyways, like, requirements changed. And so I just basically went back to the drawing board, and yeah, thanks. Yeah.

Anything else? Does anyone have any problems they’re struggling with or things they want to, like? Any challenges or anything that we can help you bust through? Like to me building no code, it’s always like, have these like spurts of productivity, and then you’ll hit a wall. And so it’s really helpful to have a group like this where we can like collectively help you get through it? Yeah.

Lucia 1:16:04
Do you have a recommendation for a good community? No code developers. It’s obviously insane. A lot of time, but there’s still a little bit of a learning curve. It saves a lot more time, somebody that’s maybe a little more more experienced. But it’ll still cut down on the time of development, or an MVP?

Sean 1:16:26
Do you mean like to hire or to like a community to surround yourself with and get answers from?

Unknown Speaker 1:16:32
No, maybe like, more of a freelancer, you could hire an employee to focus on one of the local top ones like Bubble, so then you can just feel faster with your new development?

Sean 1:16:44
Yeah, I mean, I recommend Upwork. At this point, it’s what I use for most freelance outsourcing stuff.

Unknown Speaker 1:16:50
That’s been pretty good for Bubble. Yeah, I

Sean 1:16:53
mean, let’s see how many people

Lucia 1:16:56
on Upwork. So if you want to search for like, specialists, when you search for that [unintelligible speech] Elance [unintelligible speech]

Sean 1:17:47
Bubble, depending on what plan you have, you can also in Bubble, invite collaborators. And it’s really good about like having like a development version, a live version, and then you can just very easily clone it and create like, you know, a forked version that you give you say developer good, do your thing. And then we’ll merge it back in to the live version and pull those changes to data. Like it’s very flexible. And you don’t have to like give your developer your login. You can like hire five developers on Upwork given me each access, let them build something take the best one fire the other four like?

Lucia 1:18:27
Do you think it was safe to get familiar with Bubble, you know, far? Anyway? I think like there’s basic functions and all the proper platforms to share. But they go different ways. I think these are handled poorly, I think we’ll take to actually always reinforce you know, some blog or severity. case, my wall right now.

Sean 1:18:58
You guys. Yeah.

So since I am a member of this, which is called pro no coder, so Tonya, last meeting is she’s the founder of this. And this is like essential at this point. Basically, they have office hours every day, I have their this bookmarked. And so this is their calendar, and I’m drilling here every day. Like to know that you’re never gonna go more than 24 hours without an answer to a question you have is fantastic. And it’s just all the it saves all the, like getting bottlenecked for a week at a time and you know, going through forums and getting frustrated and banging your head on it. This is just like literally every evening, I can go join the off South show the problem I’m struggling with and she’ll be like, Oh, this is what you do. And she’s got a few people who work with her. Now, so yeah, so that’s invaluable if you’re doing Bubble. For more umbrella, this is called maker pad. And I’ll put it again I’ll put all these links in the in the comments. But yeah, I would say this community is like, in general, there’s no code. So tool agnostic, you can go here, they have a ton of tutorials. It’s not the same level of access. You don’t have people like taking you individually through your specific problem every day. But this is more like if you’re trying to just go get up to speed. Just it’s invaluable to go and like, say, Okay, how do you build a Airbnb clone? And I guarantee you if we look in here and search for that someone will have there’s a search Oh, yeah. Yeah, there we go.

Airbnb clone, like, so there’s multiple, multiple tutorials that show you how to do this probably in every tool. And so that’s just like such a great way to learn to just shoulder surf, watch someone else develop, see how they do things? It’s. Yeah. Any other questions?

I’m going to show this while we’re here. So

I am a huge fan of Startup Weekend. And we are doing something similar. It’s a hackathon we run periodically. Lucia has been to. So we’re doing our next one on October 15. And this is at 42 Lisboa, it’s a beautiful space. It’s like a giant free code coding Academy. And so they’re letting us use their space and giving us access to students. And if you think you learn a lot today, go through and try to build something real with like for other people. And it’s just like, your mind will explode. Like she learned from like four different people of all different skill sets, building a project that attacks us the societal issue, and yeah, it’s just, it’s a fantastic thing. So do you have any questions? It’s, I’ll leave the link for this as well. But we’ll be there. And yeah, we provide the meals, and it’s all free and meet a lot of interesting people. That was two and a half days. So this one is just a single day. It’ll be a Saturday, all day events. But we also do a dinner on Wednesday night, just like a meet and greet strategy planning, try to form teams and then Saturday, go to town. It’s everything like so they’re their students are all in a coding school. So they’ll have a lot of engineering talent. Hopefully, we do have some note code people too, because we can like accelerate it a lot if we can use that.

Lucia 1:22:51
But the ones that? Neither.

Sean 1:22:59
So yeah, no, we invite like, copywriters, videographers, SEO experts, like we need people of all walks, and there’s just a number, you can if you want to see the projects that are listed, you’ll it’s all coded by like, needed skill skill set. So you might find something on there that that matches your skill set.

I guess well, if there’s no other Yeah. Yep. Agreed, like worksheet showing our list of the bills from [unintelligible speech]

you’d I don’t know of that. I mean, you might find that out there.

Lucia 1:23:55
[unintelligible speech]

Sean 1:24:06
One of the websites. So maker pad has this tools, things you can go in here and see all the tools and quickly get, like a rundown of what it is they got the link to their website. I don’t think that pricing because pricing changes, as we all know frequently. Yeah, GT that’s a good idea.

I don’t think this is specifically no code, but it’s SOS ops, some of which are no code. So yeah, if you find it through maker pad, you could probably go here and get like reviews and whatnot.So yeah. So yeah, all this that in

[unintelligible speech]

yep. Yeah, I can talk to you after it’s Ableton as a music program. So it’s mostly for DJs. I use it for like guitar looping. So it’s just yeah. And I actually used to run a meetup in Arizona on that tool as well. Yeah. Well, alright, well thank you guys for coming. If you enjoyed it, leave a positive review, tell friend, whatever. We’re just doing this, trying to help teach the community no code. So cheers.