April 3, 2020
How Webflow Ecommerce was built (in 3 stories)

How Webflow Ecommerce was built (in 3 stories)

Hi I am Olena and today I will be talking
a little bit about how we build E-commerce inside the Webflow. So a little bit about
myself, I’m a software engineer at Webflow. For the last year I was involved in such projects
as creating data manager for E-commerce, E-commerce settings, and currently I am tech leading
and also working as part of the E-commerce variants project.
If to talk about the E-commerce feature at all, it’s actually kinda like an umbrella
feature because inside this one feature there are many small features that were built as
separate projects, like stripe setup, product manager, product page, product variants, checkout,
auto tax calculation, customizable emails, and many others that are not even included
in this slide. And it was all built throughout the last year by all these amazing people,
you can even see Kyle in the top left. And let’s go back to our topic: Creating E-commerce
inside the Webflow. And I’ll try to tell you a few, and exactly three, interesting
stories that have happened throughout the last year with me inside the creation of this
feature. And first story will be named, Five Ducks
and the Product Data Manager. So, product data manager was one of the first features
that were created for the E-commerce. And the first iteration of the UI for this feature
have looked like this. If you look at it quite closely you can say oh actually I’ve already
seen this UI and it quite resembles the CMS data manager. And let’s go to the concept
that is named duck typing. Who is familiar with this concept? Okay, at least you will
learn something great from this event. It’s going to be expressed in a very simple quote,
“If it walks like a duck, and if it quacks like a duck, it’s probably a duck.” So,
if the product manager for the E-commerce looks kind of familiar and looks like a CMS
data manager then we can probably build everything using the existing CMS data manager. As if
it walks like a duck, and it quacks like a duck, it should be a duck. Or can it be a
duckling? Or can something look totally different but still be a duck? So the hard question
that we had while we were working on this project, was okay our E-commerce data manager
quite resembles the CMS data manager, but there is a big difference between them. And
the main difference wasn’t in the UI, the main difference was how the data is connected
to the UI. I will try to explain to you how it works inside the Webflow. This is how the
CMS data manager is built. For one item edit form, there is only one item on the data levels
that correspond to this item edit form. Even in the first iteration for the E-commerce
data manager, things look different. As for one product item edit form, two items were
corresponding to this form. One was product item and one was SKU item. Product item contains
the data that is related to the product, like product name, product description, and SKU
item contains information that is related to some variation of the product. What is
actually like SKU item? If you have a shirt, a t shirt, it can be small, medium, large;
it can also be white, green, black. Okay? And SKU is containing information that is
only related to this one iteration, like for small, green t shirt. We created this from
the start like this because we were dreaming big and wanted in the future to be able to
add variants for the product. The second iteration for the E-commerce data
manager looks even more complex. If to talk about how data is related to this product
item edit form, as for one item edit form already three sources of truth were needed.
One of them corresponds to product data, one corresponds to SKU data, and one is responsible
for SKU inventory data that is stored separately. And you can already imagine that things are
becoming even more complicated when there are variants included in the product. So here
is a schematic view of how data level for the product that has nine variants looks like.
So we have here nineteen sources of truth for one product edit form. This deep diving
allow us to see from time to time things can look quite similar but there is actually this
difference. And even though with some UI it is hard to spot this difference, when we spot
it, and when we think deeply about them, we can understand how it should be different
and how to build this feature better for the future. I hope that one of the main lessons
that we learn from here is we should dream big about our features, and when we see that
something is similar, we also should ask ourselves if maybe something is also different, and
how these things that are different should define our decisions on how to build this
feature. The second story is named, “How to start
from the end.” So, a little question to you: and I will even put an inspiration slide
for you here. What is the most important part of any online store? You can go loud, like
not be sparing. “Sales?” Very near but what is even more important? “Getting paid.”
Getting paid, okay, very, very, warm and close. Between checkout, pay, and this word is even
on this slide. “Payment.” Payment, but payment requires what? “Orders!” Orders,
yeah! What your clients, or you yourself, if you are thinking about creating a store
for yourself, are actually creating is the store. Because you want to have the possibility
to accept online orders. Without having orders, yeah you can have beautiful products online,
but no orders, no payment, no anything. So actually any person that is creating stores
online just wants to see that orders are coming. So let’s talk a little bit about this feature,
orders. So you might remember this slide from a few minutes before. This is a list of all
the features that at some point we were thinking to include in the E-commerce. But frankly
speaking, if you look deeper, it shouldn’t be a list. It should be something like this:
where you can see how features are dependent on each other. And what feature we can start
to build if the previous was built. For example we can’t start working on the inventory
management, if product management wasn’t built, because we need to place somewhere
this information for this product and we need this product item to exist. Similar to the
checkout, no person can use the checkout for the physical product, if there are no shipping
rules? Because you order and there is no possibility to pay for the shipping it just does not work.
Let’s look at what we need to do to enable the order feature to be created. So we need
to create product management, then we need to work on the product list from the developer
perspective to add this feature to E-commerce, and then the software engineer needs to work
on the cart component, and then we are working on the checkout, and then finally we would
be able to start work on the order management. It’s all true, but we actually inside the
team wanted to move uncomfortably fast. As we know there are many people out there waiting
for when the E-commerce will start, and you probably were among those people that were
just waiting. And we feel this, and we feel this feeling of urgency, and want to do this
incredibly fast. How can we do this faster than was planned and logically viable? One
of the ways is to add more people. But if you add more people to a project that is designed
like this, it wouldn’t help, because some feature creation is blocked, and if it’s
blocked you can’t do anything. You can put as many people as you want, it doesn’t help.
In an ideal world, we would want something like this, so we can start work on any feature
no matter where it is in the logical part of the E-commerce journey. And we found out
that quite useful is fake it until you make it phrase. Have you heard of it? Yeah I see
nods, yeah. Probably as a designer you are quite confident with this feature in the lorem
ipsum format. Without this “fake it until you make it” for us it was possible to to
create this one UI, like the tab in the editor, but not possible to start working on the order
list view, or to start working on the separate order view, so we just had a this magical
button, in the admin panel, that you can press and everything was created for you from the
data perspective, and on one project where E-commerce was enabled, you had all the needed
data, in the format that was expected from the order. So it unlocked to us the possibility
to start working on the UI and behavior of the order list as well as on the separate
order view. Even more, actually order feature was one of the first created in the E-commerce,
even before checkout, add to cart, and cart component. My main takeaway from this story
is do not allow anything to stop you, because you can always fake it until you make it,
and no one will probably even notice. And the third and the last story, is “About
two ways.” So, as I was working on this feature for a year, and I love reading, I
read a lot of books, and one of them was this, The Manager’s Path. And in the chapter,
Ruling with Fear Guiding with Trust was this example of these two manager. One manager
was Camille, and second manager was named Michael. You can even notice that Camille
is the author of this book. So what was the difference between these two managers? When
something unpredictable happen, unexpected, or even failure, Camille reacted with anger.
She was annoyed. And what it leads to is her team stopped trying hard because they were
afraid to fail. And in contrast, Michael had reacted different to the situation. Instead
of getting tense or angry, he gets curious when things don’t seem to be going well.
So let’s took both of these managers and look into some situations that have happened
for us inside the E-commerce project. Not a failure, but something unexpected. So there
was this feature settings for shipping zones, where you can add a new shipping zone and
set some countries for it and add methods that are available for these countries. And
this feature creation started with only one person in the front-end team, it was me, but
after some time, thankfully Tommy has joined me. The unexpected thing about this situation
was that even though Tommy has joined me in the team, we delivered this feature in the
exact same time when I predicted I would deliver it alone. If we look at this situation through
Camille’s eyes we can say adding more people will actually slow down the process, but I
propose to look at this situation through Michael’s eyes, and ask ourselves, if adding
more people will actually slow down the process? And get curious about the situation, what
actually have happened? A little dive in, if you are not quite familiar, how developer’s
process looks like in the Webflow, creation of any features in a simple way looks like
this. One developer is adding code, second developer is reviewing code, and also designer
review happens, and after these two steps are passed, this code is going to testing.
So let’s get curious about this situation. What had happened when I was alone in the
team? Okay I had added code, but I had actually asked for code review from people from other
teams. And when Tommy joined me on the team, we started to ask for the code reviews from
each other. And the truth is that from time to time code reviews can take the same amount
of time as creating the feature. So actually nothing has slowed down. This time for the
code reviews was just hidden in the situation when I was alone in the team, and was included
in the time of the project when we were two in the team, because we weren’t requesting
time from people in other teams. So as you see, if you look at the situation through
the Michael eyes, we can see what actually had happened and what are the reasons for
this. So my main takeaway from the story is get curious, it’s never hurt at least, but
get curious because you can understand what has happened inside the situation, understand
what are the causes, and even more can learn from the situation and predict better how
to act in this situation in the future. So I hope that even though my talk was about
the E-commerce and how we built it inside Webflow, you also have learned something that
you can reuse no matter what project you are currently working on. Dream big about your
project, do not allow anything to stop you, and get curious whenever the unexpected happens.
You have the right timing. Two last slides. I want to thank all our customers, for you,
for our users, because this year was challenging and hard in some situations and my main emotional
charger was just to go to Twitter to look up what our users were saying about Webflow
and recharge my emotional battery because its so awesome to read every time how excited
people are about using Webflow, how excited people are about the E-commerce Beta, one
hundred fifty replies in the forum. And it’s so good that you are part of unite in the
Webflow, you are the reason we exist, you are the reason we created E-commerce and data
features. Thank you.

3 thoughts on “How Webflow Ecommerce was built (in 3 stories)

  1. Thank you Olena, team, Webflow, you keep doing an amazing job, can't wait to see what you have in mind to create next and refine the e-commerce experience.

  2. I absolutely loves all these presentations you've shared. It's like watching class presentations where I can see the work that went into actually trying to summarize and explain their work to the room.

Leave a Reply

Your email address will not be published. Required fields are marked *