It’s been almost two years since Webflow redesigned their homepage/site and a lot has changed. New features and platform upgrades meant that the page had a “cobbled together” feel rather than a cohesive whole with a singular story. Let’s take a look at what they changed.
Focusing on the story.
Webflow has grown in a number of directions: it’s a webpage/site designing tool, a CMS platform, a hosting platform, and soon an e-commerce platform as well. Instead of telling a dispersed story by creating a litany of all their feature sets, they focused on telling the story of how a website is crafted: Design, Build, Launch. This concise messaging allows them to talk about all their feature sets in a coherent and cogent manner.
Lesson 1: Make sure our pages/sites/flows are tightly focused on the core story/message we’re trying to tell.
Being a web design and development tool, Webflow naturally “ate it’s own dog food” and used Webflow as their prototyping tool. They felt that they were able to iterate much faster than other prototyping tools. Once they settled on a prototype, they just added in the details to finish it. As a bonus, content team members were able to tweak content in the designer module as the design was being finalized speeding up the overall process as well.
Lesson 2: With the advent of Adobe Muse going away, maybe it’s time we take another look at using Webflow as a prototyping tool.
The Motor Trend Group UX has had a number of run-ins with the MegaNAV. Webflow is now trying it on their site. Moving from a more traditional drop-down navigation system to this MegaNAV Webflow went through 2 major iterations before they arrived at the final version. They posted their iterations online. (version 1, version 2). Interestingly the earlier versions lay out the features sets as distinct products, while the final iteration organizes them into Webflow’s storyline: Design, Build, Launch.
- The navigation is lightweight and very responsive.
- Features are organized to reinforce their story of Design, Build, Launch
- Log in and “Try for free” CTAs are built into the mobile navigation experience.
- Persona-driven subscription flows are built into navigation with “Who uses Webflow”
- Navigation items are additional entries to content, not the only entry.
- Inconsistencies in background usage. Sometimes they used different grays to help delineate content, sometimes they don’t.
- Color usage in rollover state could have been more effective in Features menu. Six colors were used to differentiate the 6 main feature sets, however, the colors don’t reinforce the grouping of Design, Build, Launch.
Lesson 3: Communicating our story, our brand, should be considered in every element, including the navigation structure.
Focused on driving sign-ups.
Webflow’s homepage was design for one thing and one thing only: to get as many people to open a free account.
- Try for free CTA in the main navigation.
- Get started for free – Enter your email CTA above the fold
- Creative use of animation and background color to covert the last screen before the footer into a giant CTA.
- Four persona-driven sign-up flows with tailored messages.
Lesson 4: Limiting a page’s focus may improve conversion rates.
Amazing User Interactions
Webflow, being Webflow, the user interactions are incredible. More importantly, they are not just decoration, they are used to effectively tell the story and move the narrative along.
Lesson 5: Animation can be effective to way to communicate storylines while engaging and delighting users. We should consider them more.
Bonus Lesson: The tool a UX designer uses to prototype may determine the final user experience.