Webflow

I spent four years working on visual development tools at early Webflow. I worked on features such as Ecommerce, Interactions, Memberships, Annotations, the internal design system and many more.

Ecommerce

2017-2018

Ecommerce is the first project I worked on when I joined Webflow in 2017. It involved a series of smaller projects that ultimately shaped up the first release of Webflow’s digital commerce offering. Later in 2018, I kept working on Ecommerce after the official launch for a few releases and kept looking out for bugs and places for impovement until 2021.

What is Webflow?

Ecommerce is the only sub segment of the web that grows faster then the whole web itself. I probably won’t forget this factoid for the rest of my life: it left a strong imprint on me.

Webflow is an all-in-one design platform that is pretty special. If we could visualize a scale where 0 is Paint and 10 is Photoshop, Webflow is quite up there in relation to other web design tools. Unlike Squarespace, Wix, etc., Webflow let’s designers create from a blank canvas using HTML-ish primitives and native CSS styling that follows the logic behind actual CSS, to the point where inspector labels always use their names from real CSS.

Why Ecommerce?

It’s natural we wanted to enable Webflow designers to ship working Ecommerce stores. This segment is so big and people have had to integrate 3rd party solutions to create stores on Webflow. Because of the open nature of the tool, using custom code and external capabilities is easy, but a native solution would obviously provide a much smoother experience while allowing us to expose new users who hadn’t even considered building stores to the idea.

Capturing the market of plugins was definitely part of the goal, but, as it ultimately happened, Webflow Ecommerce became much bigger than that, but especially after we transitioned to the new rules of COVID.

Design comes first

ecommerce-video.mp4

My team’s goal, while multi-faceted, was simple. We needed to:

• discover and outline the missing parts of the picture: what is missing right now so people can start selling?
• design the missing set of primitives in a way that works and feels like Webflow: full design control
• figure out a fine balance between configuration and composition so a complex experience like Ecommerce can function and be set up quickly

What I did

• Early user research
• Inventory management
• Shipping management
• Email configurator

The first sub-project I joined as the only designer is the email configurator.

Initially, I had the idea of enabling email design on the main canvas, just like a normal page. A fully feature-paired experience to the rest of the app. Given the smaller team back in 2017 and our timelines, we quickly figured out building a whole version of our rendering engine that caters to emails is a whole lot more complex that what we could allow for I terms of time-budgeting back then. Emails use online-styles exclusively and making sure everything works well in different email clients is sometimes even more tricky than supporting different browsers.

Looking at the problems we had to solve:

• allow designers to change copy in their emails for localization and general copywriting reasons: no one wants to send the same emails for every site they build
• establish a simple set of visual customization controls for branding purposes

Support for procedural variants

• PayPal support
• Order management
• Continuous testing with users

Interactions

2018-2019

In 2018, I had the pleasure to work on Webflow’s Interactions engine: the main tool used to choreograph hi-fi animations for your sites and interfaces. The release I worked on was codenamed “Interactions 2.1” and the main goal of the release was to improve and simplify all the major pain points from the 2.0 release, which was a breaking change in relation to Interactions 1.x, deemed “legacy” and still maintained in the app as a separate tool for older sites that use it.

What I did

• Reusing interactions more easily
• Simplifying reverse animations
• Flattening the mental model
• Reusing interactions across sites
• From “Close” to “Done”
• Continuous testing with users

Adobe After Effects integration

2018-2019

In late 2018 and early 2019, I was the design lead for Webflow’s integration with Adobe After Effects through the Lottie format. With this release on top of the already immensely powerful Interactions engine, we allowed designers and UI engineers to use complex animation projects done in After Effects in their Webflow sites and UIs. The end experience is as simple as dragging and dropping a Lottie file on top of the canvas or asset manager to use it just like you would an image.

Figma integration

2019

In 2019, I was the design lead for an official integration between Figma and Webflow. It allows designers to connect a Figma file used as an icon or asset library. When this is done, they can keep iterating and adding icons in Figma an the changes get automatically reflected in Webflow, so they can stop stressing if they are using the latest assets. The SVG/PNG files also get updated in every spot they are used within the site. The feature reached private beta and hasn’t been released to this day.

What I built

• Built a full end-to-end prototype for the integration
• Chatted with users to gather feedback
• Supervised development work behind the private beta

Design system

2018-2019

After spending some time on Ecommerce, I was assigned to be the design lead for the first iteration of Webflow’s internal design system: Sigma. It was an effort to consolidate the design debt created in the early years of building quickly into a lean design system in both design tools and production. Our goal wasn’t to create a new, more modern design language, but to create a user interface inventory and semantically unify the tokens, components and patterns wherever this made sense. We aimed at making it faster, easier and more logical to create new UI in both Figma in React without presenting a new vision for how Webflow should look and feel.

What I did

• User interface inventory
• Internal research (design & dev)
• Atomic design consolidation work
• Adopt the Figma UI kit
• Adopt the Webflow UI kits
• Participate in running Storybook
• End-to-end design and release of the Design system portal
• Continuous internal research

User systems

2020-2021

In the span of 1.5 years, I was the design lead for a fun project initially called User systems and later Memberships. It was initiated as a response to the #1 item in the wishlist over the last few years: support for user accounts. With this release, we aimed to allow designers and engineers to create pages and content exclusive to certain users. To achieve that, we realized we had to build a wholistic authentication layer allowing end users to create secure accounts with passwords.

Memberships was released as a beta recently (after I left).

What I did

• Initial round of research
• Competitive research
• Fully interactive end-to-end prototype for Memberships 1.0
• End-to-end design documentation
• Prototype testing with users
• Supervising development process