5 reasons you should consider Webflow for user testing
I am here today to share my thoughts about creating prototypes for user testing purposes, and to be more specific: the benefits of creating those prototypes using Webflow.
Disclaimer: This is not paid advertisement.
User testing is a tough and complex topic. If you are a newbie in the field, I highly recommend checking the article from my Brainly colleague about AB and user tests comparison. You can grab some very interesting insights there because at Brainly we highly care about our testing process.
If you are interested more in what we are doing as Design Team at Brainly, visit our dedicated design page where we are sharing our initiatives and Pencil Design System creation process.
Let’s back to the main topic. In a perfect scenario, you’d probably like to users the full production-quality experience to test. Sometimes it is the right way to go, but there are also many situations that it is not cost-efficient. In my experience, there usually isn’t time to prepare a delightful experience by the developer only for user testing purposes. And to be honest, there is often no sense in doing this anyway. There are too many assumptions, questions, unknowns. In most cases, you as a designer can prepare the full user flow and experience needed for a user test that behaves like a real, production-ready product by yourself.
If your product is simple, at least for user test purposes, preparing classic flow based on static screens made in Sketch, Figma, or any other digital product design tool is enough. But when you need an additional layer of complexity like motion, advanced interaction, transitions, or context changes on the fly — you need something more than just a simple prototype. Of course, you can try using all features that come with those design tools like transitions and animations— but again, they are limited.
I would like to focus your attention for a second on a tool that I have observed from the beginning of its existence and am constantly impressed by how well it’s developing over time — Webflow.
A few words about the tool
If you are seeing this name for the first time, here’s a quick intro for you. If you’re already familiar with it and just want to read my reasoning, you can skip this section.
I like to call Webflow simply an Interface for coding web-based products using HTML, CSS, and JS. The team behind it describes the tool as:
The modern way to build for the web — Webflow empowers designers to build professional, custom websites in a completely visual canvas with no code.
No code is a hot topic recently. Many tools now work that way and allow you to build something beautiful fast and yeah.. without knowing and writing even a line of code. They are mostly simple and based on templates.
Webflow is different. I won't say better, because it depends on your specific needs. But in our case, which is preparing the best possible user experience for user tests, it is frequently the best tool for the job.
Personally, I think that this modern trend is good for us digital designers. We have an ever-growing list of excellent tools that are fighting each other to deliver best-in-class products with the most useful features that help us to design fast. Having this in mind, I don’t think it should stop you from learning some coding basics. I do not have enough words to describe how this knowledge helped me to communicate with developers better or just build better products faster. The list of benefits is very long and this topic was described few times by people smarter than me. At this point, I will just leave you with a sentence: Knowing HTML/CSS is extremely helpful for screen-based digital product designers and it is also crucial while working with Webflow.
But if you are also new to the topic of web languages, Webflow can help. Check Webflow University for nice visual guidance, tips, tricks, videos, and articles.
At the end of this part, let’s quickly take a look at the UI, just to get more context for what we’re talking about here.
Sidebar on the left, sidebar on the right, work area in the middle. You are in a good neighborhood, buddy.
Now let’s meet my 5 reasons why you should consider Webflow when creating a prototype for user testing
1 — It’s responsive
Nowadays, responsiveness in screen-based digital products is something completely natural and obvious. It is a must-have for the final product, it’s an obvious requirement. As a digital designer, you have to take into consideration all edge cases related to screening sizes while creating your outstanding designs. But.. I bet that you are using one of those tools: Sketch, Figma, Framer.. or similar products. Unfortunately, the result of the time spent with those tools is not fully responsive yet. I am aware of their features trying to mimic responsive behavior like layouts in Sketch — but it isn’t quite there yet.
Webflow is different. Projects created using this tool are based on clear, production-ready, simple code. No workarounds here. Your project is the website. And because of that, your project will behave like any other website opened with a browser. For example, you have quite a lot of control over breakpoints.
- First handy feature — you can make any change on any breakpoint you’d like to. Just use this panel:
- The second handy feature — you can check your designs on the most popular devices on the fly
Cool, isn’t it? I think so.
💡 What problem we are solving? You are often limited to creating only static mockups for specific screen sizes. In Webflow, you don’t have to limit yourself. Designing with all those breakpoints one click away changes your mindset forever.
2 — It is flexible
Iterating on the project is natural for us at Brainly. If you plan to iterate on a prototype you’ve created, you couldn’t have found a better tool for it. If you build a prototype wisely from the very beginning, using the given power of classes correctly, introducing changes in the next iterations (from changing the color of a button, copy, or complicated interaction) is pure pleasure. And I am not lying to you. For me, it is really great fun to make changes and enhancements to existing projects based on feedback and previous user test insights.
I am always trying to prepare projects to be ready for changes after the first round of user tests. When the project is flexible from the beginning, introducing quick enhancements (or even complex ones) doesn’t take long. You just edit your prototype and you are ready to go for another round of user tests — the job is done, let’s go for a coffee.
But remember - it always depends on your skills and how flexible you want your project to be.
💡 What problem we are solving? Sometimes it is hard to make changes and enhancements in existing prototypes using other popular tools. With the power of classes, your editing troubles fly away.
3 — It is fully interactive
This part is fun. Really fun.
If you are an interaction freak like I am, you probably love to experiment with different animations and transitions, spending hours polishing the smallest details to delight the user. And this is not only for having good fun while creating prototypes. At Brainly we are testing very often, and we want to take from those tests as much knowledge and insights as possible. That’s why we are caring about every single detail, to give users the most realistic experience possible.
You can, of course, use the built-in interaction features in Figma, Framer, or Protopie — and there is nothing wrong with that. You can achieve awesome results in short order using these tools. But again... Webflow is different because you are working on a real, web-based structure. Experimenting with this kind of organism is another experience. You just have to try it and feel it for yourself. For example, you can check:
- How fonts are rendered in the browser during animations. Because animations are built using well-known web standards, you can predict some future pain points and limitations.
- Animations performance on different devices
Those small things make a difference for the final experience. If you want to dive a bit more deeply into this topic, Webflow prepared a dedicated page for that.
💡 What problem we are solving? If you want to test real experience and get the most from user tests, it is always worth building a prototype with real interactions. Details matters.
4 — It is real
Again, projects created in Webflow are code-based. And because of that, users will interact with them like with real products. You do not need to open this project using some additional software or browser plugins. You just open the link in the browser — simple as that. It seems obvious, but not all available prototyping tools on the market give you that possibility.
You do not have to worry about wrong assets or font rendering. You also do not have to worry about interactions feeling weird. This is a website, and it works like a website on every device. Done.
💡 What problem we are solving? Have peace of mind and do not worry — all that you prepared will work on your test device like a charm.
5 — Easy to share
Every project (even on a free plan) comes with basic staging. It means that when you start creating a project, your staging is created automatically. You just have to click “Publish” and your work is accessible through your-project-name.webflow.com root link.
You can make as many changes as you like to and it is not visible until you click “Publish” once again. Making access to specific parts of your prototype via password is also possible. You do not have to make your own staging or sending files to users. If you decide to cut off access to a specific project — just unpublish it.
This point seems to be obvious, but hey — we are talking about handy features that will help you prepare and organize user tests, and this is clearly one of them.
💡 What problem we are solving? Sometimes it is hard to prepare one source for users that can be easily modified and still accessible from the same place.
To sum up
It is always about getting the right tool for a specific need. Sometimes you have only 10 minutes to create a working prototype and you simply do not need all of those fireworks described above — and this is totally fine. We also in Brainly aren’t using Webflow in every case, but as often as possible.
But when you need to create a prototype in a reasonable amount of time that feels like the final product — I honestly do not know a better option than described in that short article. If you know one, let me know in the comments. I am really curious about them, cause I am constantly trying to develop.
Keep in mind that Webflow isn’t another design tool like all other available on the market. Knowing web languages basics is highly recommended to operate smoothly and I am also aware that for some people learning curve for that tool can be an obstacle. But at the end of the day, it is worth trying.
Don’t take my word for it, rather take it for a spin and make your own opinion.
Stay safe 👋
