Part 1: Why redesign?
Redesigning Webflow.com
This is part 1 of a three part series. Read part 2 and part 3.
At the end of December 2016, the marketing and design teams here at Webflow wrapped up a three-month redesign of our main website. And, yes: we built it all in Webflow 😎. This is the first of three posts about what our goals were, how we made it happen, and what challenges we faced along the way.
As very active Webflow users, we thought it’d be interesting to share how we approached this project, including our perspectives on planning, goals, workflow, tools, and processes.
Then, as we discuss the last phase of our redesign — actually building out the new site in Webflow — we’ll look at how we approached building a site of our scale in Webflow, techniques we used to make the process flow, and where we saw room for improvement in our own product.
Part 1: Why redesign?
The first step in our redesign was deciding what we wanted to say as a company, why we needed to say it, and how we wanted to present that message.
What was the goal of the redesign? Why did we want to invest the time and energy required to redo our website? What did we want to improve?
These were questions we’d all been thinking about for a long time (as designers and marketers, we all think about these things almost all the time), so when we gathered the team together to discuss redesigning the website, there was a lot to sort out.
For one, our product had evolved substantially since the last website redesign in late 2015. Since then, we’d introduced the CMS, expanded the CSS properties available in Webflow (including flexbox in April 2016, and CSS filters in May), started work on a new CMS API, started a revamp of our interactions and animations toolset, and developed a new set of hosting features.
At the same time, our own thinking about the product had begun to shift as we talked with customers, observed and joined discussions in the Webflow community, and noticed the enthusiasm that more technical people began to show for our product. Considering all this, we knew there were things we could improve.
Goals of the redesign
We had an extended series of discussions before doing any actual design work, and although these discussions carried on throughout the redesign, we started by agreeing on a core set of principles for what the new site should do:
1) Bring more focus to the UI and product. Our then-current site abstracted the core product to focus on what you could do with it — to the point where people weren’t understanding how Webflow actually works.
From the conversations we had with both current and non-Webflow users, we confirmed our suspicions that most designers want to see a product in action when they visit the website, and our old site simply didn’t do this clearly enough.
2) Differentiate us from consumer WYSIWYGs. We wanted to move away from — if not directly contradict — the misleading association we’ve had with consumer WYSIWYGs like Squarespace, Wix, Weebly, etc., and make it clear that Webflow is a modern, professional, and technical tool.
This serves two purposes: one, it better sets expectations for site visitors, so they know what they’re getting into with Webflow, and, two, improves the quality of leads coming through the site, as they’re better prepared for some of the more technical aspects of Webflow.
3) Embrace the technical. On a similar note, while discussing our product, we wanted to cozy up more to the technical language of HTML, CSS, and JavaScript, since many of our most enthusiastic customers are already familiar and comfortable with this type of language.
4) Create a more distinctive visual language. To go along with our efforts to give Webflow more professional, technical spin, we wanted to introduce a new, sleeker visual language that would support that messaging.
At the same time, we wanted our new site to feature more visual creativity, using illustrations to help communicate some of the more complex aspects of our product.
5) Let our customers speak for us. We wanted to do a better job surfacing quotes and stories from our more recent, higher-profile customers in the design world.
We also wanted to sync the release of our new site with the launch of a revised pricing structure (and, of course, a new pricing page) and the release of several big features, including: SSL for all hosted sites, per-page password protection, and the public release of our CMS API.
All of these components of last month’s release warrant their own posts, and in due time, they will. But for now, we’ll focus on the redesign of our core site, which included: the home page, the Designer page, the CMS page, and a new page about Webflow Hosting.
Finding inspiration
As we considered the goals of the redesign, the stylistic direction we wanted to take, and the visual elements we wanted to emphasize on the new site, we looked to a number of companies that we felt were doing a good job “telling their story” on their website.
Here are some of the standouts:
Framer
Framer was one of the first sites we looked at that embraced the direction we were hoping to take with our new website. By scrolling through their website, you can quickly see what working with their tool feels like, and they support these videos with thoughtful copy that expands upon the ideas and features hinted at in their visuals.
Sketch
Sketch does a good job educating their visitors about the tool’s features by showing them in context. This was a theme we noticed across many design-tool websites: designers want to see the tool before they try it.
Intercom
Intercom counterbalances the UI-heavy examples of Sketch and Framer with their playful and engaging illustrations, which inspired our design team to create our own visual language and iconography throughout the site. Of course, these illustrations don’t replace product shots entirely — their deeper product pages also feature clear, informative UI videos.
Doing the work
After interviewing users, doing our own research, and coming to consensus internally, the next step was scoping out what work needed to be done, and by whom. We broke the work down into four categories:
1. Recording product videos
We knew we wanted the new site to feature HTML5 videos of Webflow in action. We knew these videos needed to be visually appealing, but more importantly, they needed to communicate the Webflow’s features and flexibility.
Owner: marketing, with support from design
2. Content, copywriting, and structure
We needed to support the visual story that these videos communicated with the written word. This encompassed not only what we wanted to say, and in what order, but also how we wanted to say it, what tone we would adopt, and what language we’d use to describe our product.
Owner: marketing, with indirect support from our community.
3. Brand and visual language work
With the new website, we had a chance to reconsider our visual language and style, which meant new iconography and illustration styles, a new font set, and a fresh color scheme.
Owner: design.
4. Building the site
Someone needed to build the site in Webflow, obviously.
Owner: design, with support from marketing.
Next week, in part two of this series, we’ll look at how we tackled this work, the tools we used along the way, and how we communicated as the design and content of the new website evolved.
Finally, in part three, we’ll take a closer look at how we built the site in Webflow, discussing the design and workflow strategies we used while building the site, how we collaborated throughout the process, and where we saw room for improvement in our own product.
To stay up-to-date with the Webflow design team, follow us on Medium, Dribbble, and Instagram.
