Webflow’s stunning product walkthrough

Webflow knows that a lot of work goes into launching and maintaining a website, so the company strives to make the process easy and painless. Rather than leaving users stuck in HTML5, CSS, or JavaScript, Webflow offers a clean, visual interface to create a customized website.

This video shows how Webflow introduces their key features to new users. Tooltips with stunning autoplaying videos demonstrate how to use the web-standard box model, add elements, style elements with classes, use the Navigator, and preview the site. The copy in the flow is concise, conversational, and encouraging. After all, "you're about to build a responsive website without a single line of code."

A guided onboarding experience helps users understand the power of Webflow.

Webflow goes a step further than tooltips to offer resources to their community. From best practices to design ideas to in-depth videos and courses on website design, Webflow wants its users to be successful. Beginning with the onboarding experience, Webflow is ready to offer support and tips to anyone building a website.

What makes this really good UX:

  • Each tooltip includes a gorgeous autoplaying video that allows new users to see the functionality of each feature. This welcome addition to the onboarding experience helps users get started quickly, because they're able to see the product in action.
  • Links within the tooltips during onboarding allow users to dive into certain features more extensively. The users are even offered courses in the Webflow university.
  • With drag-and-drop elements, users can create the website they envision without any limitations due to a lack of coding experience. Webflow has incorporated all of the tools necessary, including responsive design elements, classes, flexible layouts, typography, and color.