Page branching
Page branching
Page branching
Webflow is a visual development (“no code”) platform for building and managing websites.
Up until now, growing teams have struggled to work on the same site in parallel. Page branching unlocks more efficient collaboration and lets you build/ship faster, increase team productivity, and safely explore new designs.
Webflow is a visual development (“no code”) platform for building and managing websites.
Up until now, growing teams have struggled to work on the same site in parallel. Page branching unlocks more efficient collaboration and lets you build/ship faster, increase team productivity, and safely explore new designs.
Webflow is a visual development (“no code”) platform for building and managing websites.
Up until now, growing teams have struggled to work on the same site in parallel. Page branching unlocks more efficient collaboration and lets you build/ship faster, increase team productivity, and safely explore new designs.
Duration
Duration
Duration
5 months
5 months
5 months
Role
Role
Role
Product designer
Product designer
Product designer
Team
Team
Team
Product manager
Lead designer
3 Engineers
Product manager
Lead designer
3 Engineers
Product manager
Lead designer
3 Engineers
Problem
Problem
Problem
Due to technical limitations it was originally designed and developed for one person to design on the site at a time. Other team members were able to edit content, but for teams with multiple designers that had several workarounds in order to share design control.
Due to technical limitations it was originally designed and developed for one person to design on the site at a time. Other team members were able to edit content, but for teams with multiple designers that had several workarounds in order to share design control.
Due to technical limitations it was originally designed and developed for one person to design on the site at a time. Other team members were able to edit content, but for teams with multiple designers that had several workarounds in order to share design control.
Scoping & Ideation
Scoping & Ideation
Scoping & Ideation
Partnering with the Lead designer and Product manager on the project, we were able to scope out the MVP and sequential enhancements based on the core user problems and jobs to be done.
Partnering with the Lead designer and Product manager on the project, we were able to scope out the MVP and sequential enhancements based on the core user problems and jobs to be done.
Partnering with the Lead designer and Product manager on the project, we were able to scope out the MVP and sequential enhancements based on the core user problems and jobs to be done.
Prototyping & Validation
Prototyping & Validation
Prototyping & Validation
We then conducted user research where we had different teams test out the feature. After conducting 9 sessions, we were able to define our minimum viable product.
We then conducted user research where we had different teams test out the feature. After conducting 9 sessions, we were able to define our minimum viable product.
We then conducted user research where we had different teams test out the feature. After conducting 9 sessions, we were able to define our minimum viable product.
Solution
Solution
Solution
The MVP included the ability to pull updates from the main, merge branch changes, and resolve conflicts between changes on the main site and the branch. Some benefits of branching are:
Speed - Now multiple teammates can work in the Designer at the same time, allowing r teams to ship updates to their site faster.
Increased productivity - Teams no longer have to stagger and schedule design work across your team. This allows team to "divide and conquer".
Safety work on a branched pages allow teammates to explore design ideas without the fear of work-in-progress changes being published.
The MVP included the ability to pull updates from the main, merge branch changes, and resolve conflicts between changes on the main site and the branch. Some benefits of branching are:
Speed - Now multiple teammates can work in the Designer at the same time, allowing r teams to ship updates to their site faster.
Increased productivity - Teams no longer have to stagger and schedule design work across your team. This allows team to "divide and conquer".
Safety work on a branched pages allow teammates to explore design ideas without the fear of work-in-progress changes being published.
The MVP included the ability to pull updates from the main, merge branch changes, and resolve conflicts between changes on the main site and the branch. Some benefits of branching are:
Speed - Now multiple teammates can work in the Designer at the same time, allowing r teams to ship updates to their site faster.
Increased productivity - Teams no longer have to stagger and schedule design work across your team. This allows team to "divide and conquer".
Safety work on a branched pages allow teammates to explore design ideas without the fear of work-in-progress changes being published.
Update branch
Update branch
Update branch
If any classes, components, variables, or interactions were updated on the main site, a modal window will pop up to allow you to pull updates from the main site.
If any classes, components, variables, or interactions were updated on the main site, a modal window will pop up to allow you to pull updates from the main site.
If any classes, components, variables, or interactions were updated on the main site, a modal window will pop up to allow you to pull updates from the main site.
Resolve conflicts & Merge branch
Resolve conflicts & Merge branch
Resolve conflicts & Merge branch
Once team members are done making changes they resolves conflicts between classes and components and merge the branch ack with the main site.
Once team members are done making changes they resolves conflicts between classes and components and merge the branch ack with the main site.
Once team members are done making changes they resolves conflicts between classes and components and merge the branch ack with the main site.
Results & Learnings
Results & Learnings
Results & Learnings
This was second feature exclusive to Enterprise teams, and made a huge impact in the number of users who adopted that tier of Webflow. This was also the first project I worked on at Webflow, so I learned a fair amount.
Navigating the design process - By partnering with the Senior designer who was leading the project, I was able to learn how a senior designer operates. How to go from ideation, research/validation, iterating based on feedback, and delivering a viable solution.
Cross functional partnership - Partnering with the PM and Engineers through out the process was something I hadn't done before and learned how best to work collaboratively within the triad model.
Business impact - Webflow did not have a mature Enterprise offering when we started to design and build this feature, so learned how design can directly impact high-level business initiatives.
This was second feature exclusive to Enterprise teams, and made a huge impact in the number of users who adopted that tier of Webflow. This was also the first project I worked on at Webflow, so I learned a fair amount.
Navigating the design process - By partnering with the Senior designer who was leading the project, I was able to learn how a senior designer operates. How to go from ideation, research/validation, iterating based on feedback, and delivering a viable solution.
Cross functional partnership - Partnering with the PM and Engineers through out the process was something I hadn't done before and learned how best to work collaboratively within the triad model.
Business impact - Webflow did not have a mature Enterprise offering when we started to design and build this feature, so learned how design can directly impact high-level business initiatives.
This was second feature exclusive to Enterprise teams, and made a huge impact in the number of users who adopted that tier of Webflow. This was also the first project I worked on at Webflow, so I learned a fair amount.
Navigating the design process - By partnering with the Senior designer who was leading the project, I was able to learn how a senior designer operates. How to go from ideation, research/validation, iterating based on feedback, and delivering a viable solution.
Cross functional partnership - Partnering with the PM and Engineers through out the process was something I hadn't done before and learned how best to work collaboratively within the triad model.
Business impact - Webflow did not have a mature Enterprise offering when we started to design and build this feature, so learned how design can directly impact high-level business initiatives.
