Framer Updates are Replacing your Stack: Design, Data and CRO in One

Hi everyone. Welcome back to our new episodes of 20 Minutes, the show where we take one design topic, we cut the fluff, and then we give you everything you need to know in less than 20 minutes. Today I'm here with Jelle, head of design as always at Noco. How's it going, man? Yeah, good, man. Good, good. How about you? Good, good. Days are getting longer, sunny outside. Really looking forward for that season. Yeah, it's been a long, long winter actually. Yeah, well, you had a pretty good one, I think, in the Netherlands at least, because there was a lot of snow instead of rain, what it sometimes can be as well, like, you know, gray winter with rainy weather. It's funny because we are always talking about the weather, which is nice. It's also something typical Dutch. Dutchies are also always complaining about the weather. Yeah, also Italians actually. Yeah. Oh, that's funny. Yeah. I think similarities. I mean, it's good. It's good. It's getting, it's getting better, man. And that's good. Longer days and more sun. Um, so yeah, I think we're looking forward to that season again. Yeah, definitely. Definitely. I really need some vitamin D here because yeah, man. Yeah. It's, uh, it's great to have it, I guess. Yeah. I mean, we're, uh, we're sitting at a desk. And inside most of the time. So, so I think it's good to have that sun outside so you can just walk and get in some vitamin D. Yeah, that's, that's— Yeah, in our design, design trap, basically our designer room trap. Yeah, so perfect. What we're going to talk about today, we're going to talk about Convert, which is a new update directly from Framer. Which is really, really exciting, to be honest, is something that shifts Framer from a design developing tool into something that is more complex, right? It's something that you can optimize things, you can see analytics, which usually involves marketing teams, but now you have everything that is centralized into one single unique tool. And I think it's pretty awesome, to be honest. What do you think about that? Yeah, it's cool. I think it already started with Webflow, of course, first. Webflow Analyze, which is very nice because it's a more visual way of showing your data. Yeah, back in the days, we always needed to do that via Google Analytics, which is fine, I guess, but still, it sometimes can be a little bit overloaded of information, overkill. And these tools really make it easy because you can just basically analyze everything inside of your builder, inside of your CMS, which is cool. I think it's a really, yeah, really good tool. I'm really looking forward to how it looks. We want to present, of course. But yeah, I mean, it's nice to see that those big builder tools, that's Figma, oh sorry, Figma. Framer and Webflow. Framer. Um, it's, it's nice that they move towards a more visual way of showing your data. Um, and, uh, yeah, I can't wait to see how it looks and how it feels and how it works. So, um, yeah, yeah, definitely. Also, I think it's really like valuable for self-employed because you have like everything that is really centralized into one single tool. You don't need to learn like Google Analytics or use tools, marketing or data analyst tools anymore. You just have everything that is really centralized into Framer. And it's something really unique because it's also really, really simple and easy to use it. We're gonna take a closer look at it like in a bit, but it's really, I think it's really valuable for not only for marketing teams and for big teams, but also for self-employed. Yeah, back in the days, of course, you need to, you need, and still some, a lot of people do that, but you, you need to set up a lot of trigger events, quick events, and then you need to build out the flow yourself in order to track buttons or clicks. And now, I mean, everything's being already being done for you. So that, that's great. And then it's, and it's straight from the, the CMS, you can just see it., in a visual way. So I think it's, it's really big improvements. Data's becoming more and more important. Uh, it always was and always has been, but I mean, now the, you know, there's so much tools. Yeah, definitely. So much stuff. There's so much different things going on on a website. And I think it's really good to, to make that part visual and, and in a nice way. So yeah, good stuff. Yeah, definitely. And sometimes I think that. Numbers and metrics comes from personalization. So you show to different, you know, teams different stuff because, uh, everybody has their own needs. And I think that one of the biggest things, uh, in the Framer update is, uh, right personalization. So we have like this new tool where you can basically, um, you can show to different marketing people or maybe data analysts or whatever, a different banner or a different homepage based on their needs. It's really, really valuable to me. And I think it's gonna be really like game changer for a lot of other web tools out there. What do you think about that? Yeah, no, definitely. I think it's really good to target your, or basically personalize your pages focused on your target groups. Every target group is different. Every country is different. We also see that from our data. And I think it's very good to test that, A/B testing, but also, yeah, shaping your design and changing your design based on what your ICP needs and what your ICP is searching for and what your ICP is basically going through on the website. And if you can shape up these funnels based on data and you see exactly where they don't click on and where they do click on. Yeah, that's really valuable because then you can create basically the best layout possible. And we as designers love that. Of course, we are constantly into this conversion flow and how to optimize it. And I think it's really good to have it. Yeah, right at your fingertips, right? Yeah, definitely. We can take a closer look at this new feature if you want to. Yeah. I can show you something. Let's do that. I'll show you my screen. There you go. So here we have the FlowStack homepage, right? At first glance, as you can see here, everything like looks normal, but there are actually two versions of the header. One that is default. And one here that is with a banner, with a little page that basically if someone lands on this page from Product Hunt, they will see like a different version of the other. Hey, with this page that you can see. Sorry about that, I'm a bit sickly. No worries. So, Yeah, so if the visitor comes from anywhere else, they will see just the default version, right? Okay, so it's the same page, it's the same layout, but it's slightly different on the context. So what happens now? If I show you another screen right now, which is the browser. So as you can see here, we're on the actual website right now. And if we want to add a little patch here on the URL, which is /ref/bh, we can see clearly the new page, which is really, really impressive. I mean, in the default version, we don't have anything, and the other version for marketing teams in this case, and for someone who's coming from, uh, on Product Hunt, they can clearly see a new page, which is, I think it's really impressive to be honest. Yeah, it's cool. It's cool. Just add like a reference, uh, reference piece behind URL with the parameters and then you can actually show or hide stuff based on that, which is Kind of cool because it's a very easy way of showing a different layout or add additional stuff based on where people come from, right? Yeah, and I'll show you how it's easy to do that. It's really, really easy actually because it's just like you have to add like a new variant that you can see right here in this little part where it says menu. We have the variant, which is default right now, and then we added a trigger that it says that from Product Hunt, it changes from Product Hunt. We added like this little pages, all the variables, and then that's it. It's just really, really, really easy to do that. Usually before this, you needed to use like, Google Analytics and stuff. But right now it's really more, more easier to, to digest, I would say. Yeah, yeah, exactly. And, and it can just, you took the, the variant, you, you just created that in, in Framer, right? Like the, the banner and the product, the product and banner somewhere. Yeah, exactly. Yeah, exactly. Everything is, uh, built inside Framer. Yeah. No, really cool. It's really, it's really cool. Yeah, it might seem like a small detail, but it changes, yeah, how relevant the experience feels. It's really, really, really cool. Instead of generic message, you're acknowledging like where the user is coming from, which is really, really valuable actually for a designer. And this kind of things years ago or months ago used to require like custom scripts or developer involvement, a lot of overhead. So we really had a lot of things and now it's, everything is right here inside Framer. And I think it's really, really valuable, man, because I think that most SaaS websites, they show the same message to everyone, but your audience is not the same, right? So we have like a founder, we have like a marketing lead,, someone who's like coming from Product Hunt, um, and they all have different expectations, right? So I, I think that with this kind of setup, um, you can really start designing for that difference directly. I think it's really, really valuable. Yeah, exactly. That, that's, that's nice. And, and, and also you can just, yeah, again, you can also shape up the messaging different from, from, ah, from your target audience. So who, let's say a product owner or a CEO or, you know, a marketing lead is visiting the website, you show different copy exactly shaped on their roles. And I think that's very, very interesting, to be honest. Yeah, yeah, definitely, man. Definitely. Back in the days, you needed to create unique URLs, A/B testing, et cetera. And right now you can just easily set up the variant in Framer., which adds a reference to URL and you're done. And that's cool. That's very cool. It's way faster way of, uh, of, of, of showing different variants. Yeah, we're living, uh, we're living in a landscape where everything is becoming more easier and, and easier to do things, but the core thing is actually how your design thinking goes through every, but everything. And I think right now the most valuable thing is that you can think as a, as a designer and not anymore like just someone who do stuff online. Yeah, yeah, right. I think that, that the heavy weight now, or at least the weight itself, lays more into the hands of designer and, and the creativity is— there's more room for creativity because you can just the building stuff and the stuff that's required normally to set this up, that's covered right now. So you can actually focus on your messaging, focus on strategy, focusing on how design looks instead of being busy with, you know, all these connections and what do we need for that? How do we build it? How do we test it? Et cetera. That's already covered right now. So that's good. That's cool. That's nice. That's really good. These days of design. Yeah, definitely. It's really, really good. And another thing that is really, really cool about this new update is dynamic filtering, right? So right now we have, I've created a new page for a blog page, as you can see here. And dynamic filtering is basically when you can put filters that are dynamics, which means that it's something that is smart within the page. So it can just understand if you have like labels or just text, you can add some dynamic filters to it to basically keep everything consistent and more smart. And I'll show you what I mean by that right now. For example, we can just, I've created, as you can see here, a list of blog articles, which is really, really simple. Here on the left panel, we see that we have a CMS with all the information that we need and then a title. If we select on this entire blog page, we can go right here. Sorry, but this page, which is the article page. Yep. The article section, sorry. Layer, we have the content, and in the content we have source, states, filters, and we can add right here, like, new filters. For example, a search field. There you go. Yeah, this is nice. This is really nice. This is really, really nice. And also you can drag it, like, everywhere. Right now it's in a stack, but if we gonna like put it in absolute, we can just put it everywhere, which is really, really cool. That's really nice. And what does it actually, so that's based on the, on the blocks overview, right? So whatever you search, it will filter out the results of the, of the, of the blocks. Exactly. Right now, if we like add a new filter for this layer, we have filters and then we can just like add in a new filter. Which is basically on title search field, it appears a new blog search field and it's really cool because it actually works. We're gonna change the color because otherwise we will not see anything that we're writing. But if you want to search like design systems, there you go. It's really, really easy and, uh, it's really valuable. Yeah, this is, this is really cool because it's pre-made filters, which just, and it's dynamic, which is just very nice because I mean, it all exists, of course, but normally you needed to build that with quite a few steps. And I mean, this is another example of cutting out time being spent to build actual functionalities. This is just pre-built and it works. You can do a lot of filtering. This example is, for example, a search box. Uh, but it's so cool that you can just add it right within the stuff that you are building. Uh, it saves a lot of time. This, this one example as well, the date function that you're just showing. It's, yeah, definitely. It's just about, it's just about time savings features, which is really, really something that I really enjoy. And I, I really like that. As a designer, I mean, I really like that. So for example, all, only inside Framer, all of this inside Framer, it's crazy. It's really crazy. Let's see. Ah, 25. There you go. Now, of course, we need to change the color. Otherwise you won't see it. And then there's also a date picker. Hi. Cool. This is crazy. Good stuff, man. What other filters do you have? This is like, sorry? What other filters do you have? Is it this date search box? Do you also have other stuff there? Yeah, we have. Let me check. Let me discover this with you. So we have the title for search field. We are, we have article static. We have date, date picker, image checkbox, categories. Can you do tabs, for example? So category tabs. Yeah, here we go. This is also nice because normally, usually you need to build this, this stuff yourself. And right now it's all there. It's very cool. This is This feels more closely, more close to like a product than more than a, like a website. It's really similar to like a product experience. It's really, it's cool. It's really, really cool. Something that we needed as designers and developers. Yeah. Yeah. You can, and I'm also a big, big shout out to Framer because they're shipping a lot of stuff lately. For example, if you look at their product updates for the last 7 days, they ship every day a new feature, which is very nice and highly, highly appreciated. And yeah, I think it's very nice to see this stuff growing in Framer because yeah, as we all know, of course Framer is design first and yeah, we both use Webflow and Framer. Webflow's a little bit more technical. Framer is there for designers to make sure that they have everything they need in order to, Yeah, basically design a website right within the builder. And yeah, these extra features, they just, they work because again, it saves us time to ask a developer, you know, can you help me out? It, you can just literally focus on your design and add this stuff right within your designs and it works. And that's nice. I think that's a huge improvement. And all these features that they drop is really into that. I mean, I mean, yeah, we will probably record another couple of 20 minutes zooming into this specifically. Yeah. But these two are already really big wins. And again, what you said as well, it's all about time and not only time, but also focus, right? As a designer, you don't want to be busy with, hi, how can I actually make this work? How can I make sure that the tabs work? No, you just wanna build the design right within the tool and you can just click and add the function yourself. Yeah. Yeah, definitely. Definitely be focused on design. Especially, especially for this kind of things because it's like a pattern is, it's like a design pattern having the tabs for a blog article or filters in general. And I think having something that is really like quick as dynamic filtering is really, really important for a designer because you can like focus, as you said, on the creative process and the creative part. Of the websites instead of going into like asking for developers for some filters or, you know, for like a search field or something. I think it's, yeah, I think it's really, it's all about the creative process. Yeah. It's all about giving more context to the creative process. So shout out to the guys from Framer. Yep. Really cool. Good stuff. And good stuff. Nice little 20 minutes. I think we just marked it. Very good to show everyone these updates. We will continue doing that. I think these ones are really nice. First of all, of course, the analytics, very good. Personalization with triggers and variables. Very nice. Good update. And this one as well. So again, yeah, we will, we love to, yeah, to record more 20 minutes by showing, yeah, more exciting updates and continue to do so. Yeah, definitely looking forward for that. Really, really looking forward for that. Nice. Alrighty. Thanks, Leo, for today. And thanks, guys. Yeah, as always, Subscribe. We will, uh, again, uh, show way more functions and features and updates, uh, both for Webflow, also for Framer. Subscribe to the link down below. Subscribe to our button. Up to the next one. Yeah. Perfect. All right. Ciao, man. Bye.