(9/21/20) bloat and how to fix it

Hey all,

A teammate once shared this with us after I walked him through how to use Webflow:

We’ve gotten to the point where popular tools elicit feelings of fright. What happens inside a company that makes such a response tolerable? It’s not through malice or ill will or negligence.

Bloat makes this happen. This week, I’m thinking about bloat.

What I’m Thinking About

Bloat is a state of confusion, anxiety, or frustration caused by the use of a product, with no clear path of exiting this state.

You repeatedly perform a task, but to do so, you go through several steps, several screens, several incantations. Sometimes all goes as expected, other times not.

There's a clumsy feel to it all. You get irritable by the end of the day.

Bloat can happen all at once, but typically it creeps into a product over time as more and more features get added.

How do we recognize bloat and how do we address it?

1/6 Bloat is a problem of the core.

There is a set of core interactions at the center of every product. From here, everything else sprouts. If these core interactions don’t do what we need them to do, see ya later.

The idea of core-first design is pretty profound. I first learned about it from Sangeet Choudary’s Platform Scale:

The more complex a system is, the more difficult it is going to be to understand it as a whole.

Thinking in wholes leads us to start thinking about features. When building a platform, it is important that features are not the starting point. Features should instead be built around a center.

The center determines how platform users will interact and guides the choice of features on the platform.

Webflow's core interactions: add some content, style the content, publish that content.

Making these interactions very simple and fulfilling to master is key. There may be a slight learning curve, but once you figure it out, it should make you super productive.

Yet for various reasons, I feel the opposite way when creating content in Webflow. This requires a deeper dive into the world of bloat.

2/6 Bloat is a problem of navigation.

The tasks we complete often recur and repeat. As we do one thing, we move onto another related thing. If it is a pain in the ass to move from thing to thing, then the whole situation eventually feels like a pain in the ass.

In Webflow, I'll typically add content to the page, and then I'll begin styling it, adjusting margins and typography most frequently.

The styles pane gives me a very poor sense of navigation, even after years of using it. It is difficult to discern between Layout options and Typography options.

There isn’t enough visual contrast to allow me to mentally scan and group. There’s too much stuff competing for my attention. I feel pretty clumsy moving around here.

Compare this to Figma, which does a great job of grouping styling options, presenting the most commonly accessed ones first, and reducing the visibility of less frequently used options until you need them. They also provide a wide range of keyboard shortcuts to speed up common sequences of actions.

I generally know where the Typography section is, and a visual skim helps me find it rather quickly. My attention then focuses on making the typographic changes I wish to make.

Webflow does not afford me that “skim to find, focus to act” behavior.

Because this styles pane is so cognitively freeing, my curiosity has space to do its thing. I’m more willing to try out features that I’m not quite sure of. I learn keyboard shortcuts. I poke around and push the tool to its limits.

3/6 Bloat is a problem of orientation.

We are creatures of comfort, and using new tools can be daunting. Uncertainty in life can't always be tamed, but it can be avoided. So we tend to avoid new things ... unless these things orient us onto the happy path.

I've seen several designers and frontend developers rage-quit working with Webflow. They were definitely not on the happy path.

Part of it was their fault for not slowing down to learn the tool. But most of the fault lies in the product’s understanding of how newcomers experience it.

Starting from scratch is not always how people first encounter Webflow. They usually are thrown into an existing project and told to make some changes or build out some new content.

So they start copy-pasting-tweaking things to figure things out, because hey, that has served them well before.

But in Webflow, if you duplicate content from one page to another, any changes you make will apply to both pieces of content, without really telling you. This little note appears without much fanfare on the top right of the styles pane.

I could very easily start making changes on this page that would could cause a cascade of unexpected changes on other pages. Other design tools conceal this type of functionality as a “pro” feature that you can’t just stumble upon.

Not only does this behavior break expectations, it also happens without much warning. I wouldn’t mind this if it were limited to the page I was working on. But this behavior crosses page boundaries. I can’t keep track of changes I can’t see. Webflow thus becomes disorienting for beginners.

4/6 Bloat is a problem of creativity.

When we end up in situations we really enjoy, our curiosities begin to wonder how far we can push things. If there is limited space for exploration, power users will feel stifled.

Webflow does an admirable job in promoting my creativity. At its best, the experience is a lot like writing code, except using a visual drag-and-drop language. I’ve used it for years and 100% prefer it to Wordpress or Squarespace.

But it falls apart in an important area: speed.

Engineering decisions in this case make a huge difference to the overall product experience.

Figma made speed and real-time collaboration core requirements from day one. They do some impressive engineering using CRDTs, WebAssembly, and Rust.

Meanwhile, Webflow seems to optimize for developer iteration speed. The company has chosen technologies that are easier to hire for and allow teams to ship new features faster. Last I checked, they use React and PubNub under the hood, which together can be slow and memory-intensive.

The longer I use Webflow, the more it gets in my way. My attention shifts from creating and towards resolving issues with the tool itself.

(There's more to the story and it's not so black and white. For one thing, Figma is not a website builder — it is a specialized design tool. But alas.)

5/6 Bloat is a problem of prioritization.

Oftentimes, a problem of bloat can be solved by the act of removing potential situations a user could run into. I don't know what the broader user statistics look like for Webflow. But there are plenty of areas I've mentioned that could really benefit from some subtraction.

Do we need all these element types? I've used many of them and only a few of them seem to “just work.” The rest have strange quirks that I have to work around. I end up in situations that don’t really help me, and it’s hard to get out of these situations.

You can't be everything for everyone. As a product, you have to make a decision: which handful of major workflows are you catering to?

Why hasn’t Webflow delegated the creation of more complex element types to its community? Why is there no plugin system that I can use to import project-specific components?

Doing this would allow Webflow to nail the basic elements and focus more on empowering their users to become co-authors of the product itself. If your users invent on your behalf, you have more opportunities to learn which features should get integrated into the core experience.

6/6 Bloat is a problem of inertia.

Sometimes, bloat sticks around because to resolve it would mean to address some painful underlying issues. Tech debt; shaky design foundations; tension between founders.

Sometimes, bloat sticks around because of satisfaction with the status quo. A nice office, kombucha on tap, a big funding round, a steady stream of positive media coverage. All of which makes you think you’re doing everything right.

Mostly, bloat sticks around because of the lack of understanding of what bloat does. That which is bloated tends to get more bloated. Which leads to your best employees leaving, best customers trying other tools, and your eventual demise.

Webflow is a wonderful product tackling a notoriously difficult challenge. At a previous gig, we built a similar tool for internal use, and the experience made me want to rip my hair out. The number of tradeoffs to consider can easily lead to building a pretty awful tool. This requires tremendous design discipline and team alignment.

I still think Webflow is the best site building tool out there. Which makes me all the more grumpy to see it continue to bloat.

Bullet-Point Summaries

5 Rules of Programming (and Design) - Rob Pike

  1. Figure out the bottleneck before trying to hack around it.

  2. Don’t optimize until there’s a clear, measurable reason to.

  3. Fancy stuff only works for a few cases.

  4. Fancy stuff is more likely to break.

  5. Data structures, not algorithms, are central to programming (and design).

Next time I write to you, I will be bundled up in layers, making the change from cold brew to hot brew. Talk to you then!