The so-called “MEGANAV”
One of the more notable new features on our website is the popover navigation, referred to internally (and lovingly) as the MEGANAV. This not only created more room for more links and pages, we also saw how a more visually rich navigation could better orient people to the platform as a whole.
Room for improvement
As our site grew over the past year, our old dropdown navigation was doing a poor job exposing people to the many different resources we had, and at times felt unorganized as our “resources” bucket became a hodgepodge of miscellaneous pages. Our case studies were buried beneath a “customers” landing page, and we knew we were soon releasing a set of persona-focused pages that would only make this problem more pronounced.
More than just a nav
Not all navs need to be MEGA, but at Webflow, the sheer number of products and use cases need to be captured in a way that’s visually informative and helps users understand the breadth of Webflow’s platform.
So we broke it up into three main sections, each with their own visual treatment and microcopy:
- Features: We brought the “Design, build, launch” structure into our nav to expose the pillars of the platform, giving people the chance to really hone in on specific areas of Webflow.
- Why Webflow: We’ll discuss these pages below in more detail, but this section is less about “what” Webflow is, and more about “why” Webflow matters
- Resources: Having a product is one thing, but having a supportive community and an extensive resource center for learning is just as important. Given how important learning is for Webflow, we wanted to feature the resources behind the platform front and center.
With all this in mind, the new navigation better orients people to the platform and answers the question: “What’s Webflow, and why should I care?”
Building MEGANAV in Webflow
Building this in Webflow was its own challenge. We explored a number of approaches — if you’re interested in how we did it, check out a couple prototypes (version 1, version 2) of earlier iterations that came before the one we landed on (be forewarned: as prototypes, these are not mobile-friendly).
“Why Webflow?” pages
As a creative tool, Webflow can do a lot, but the breadth of use cases it covers aren’t always obvious after exploring pages about our core features.
For example, when a product designer comes to Webflow.com, they might be able to infer that Webflow works for prototyping, but we make their job a lot easier if we simply tell them why and how prototyping with Webflow helps them work with developers.
To help frame people’s introduction Webflow, we decided to build pages that speak specifically to the benefits and features that matter most to the four core ways we see people using Webflow:
Going into this project, we knew we already had extensive content in our features specific pages about what Webflow is, but not very much content on the why aspects. These pages are meant to bridge that gap.
Design supporting content
From a design perspective, we knew there was a lot of information packed into each of these pages, but we wanted to make sure that the actual experience of browsing and going through them was still inspiring and capable of evoking emotion.
There was also a lot that could be said with motion and design instead of just text. For example, we used “stacking” scroll patterns to reinforce the sense of “process” that each persona goes through when they’re working in Webflow, which ties back into our core focus on emphasizing the breadth of Webflow as a platform.
Beyond this, we relied on illustration in the hero sections of each page to bridge an emotional connection with visitors, which can be hard to do with just copy. (We got extra creative with the prototyping page — check out a cloneable version of the hero so you can see how it’s built).
What do you think of our latest redesign(s)? How do you approach redesigns of your own? Let us know in the comments!