Head of Design at Webflow, Kevin Wong, shares insights on Webflow's design culture, including rebranding, prototypes, design systems, stakeholder disagreements, sharing work via Loom, rituals, and design vision. Topics include community-driven UI design, driving alignment, prototypes for collaboration, customer obsession, and product understanding.
Read more
AI Summary
AI Chapters
Episode notes
auto_awesome
Podcast summary created with Snipd AI
Quick takeaways
When building a prototype, it's crucial to define the goal by choosing between a lighthouse prototype that explores all possibilities and a laser prototype that focuses on a specific direction.
Webflow underwent a rebranding process driven by the need to establish a clear value proposition, position in the market, and cohesive brand and product experience.
Deep dives
Setting the Goal: Lighthouse vs. Laser
When building a prototype, it's crucial to define the goal by asking whether it should be a lighthouse or a laser. A lighthouse prototype aims to cast a wide net, exploring all possibilities and stretching the imagination, while a laser prototype focuses on a specific direction, going deep and bringing attention to one area. The distinction helps in determining the scope and purpose of the prototype.
The Decision to Rebrand Webflow
Webflow underwent a rebranding to address issues with inconsistencies in the product experience and to simplify usability. The decision was driven by the need to establish a clear value proposition and positioning in the market, especially with the rise of no-code tools. The company wanted to align on its goals, target audience, and make the brand and product experience cohesive. The North Star concept played a key role in guiding this process.
Involving the Community in the Process
To involve the community in the rebranding process, Webflow conducted user research to gather insights and ensure comprehension of design decisions. A group of trusted community members provided feedback, and updates were shared with them regularly. The design systems team collaborated with the community and made iterations based on their input. The participation of the community was vital for the success of the rebranding.
Prototyping and Decision-Making
Prototyping played a vital role in driving alignment and decision-making. Designers at Webflow used prototypes extensively to make ideas tangible and enable intellectual feedback from various stakeholders. Prototypes were shared via asynchronous communication tools like Loom, allowing for clear context setting, screen-by-screen walkthroughs, and capturing feedback. Iterative prototyping helped iterate on designs, weigh feedback, and make informed decisions.
Webflow has had as big an impact on design as any company over the last decade. So this episode is an inside look at their design culture, rituals, and key insights from their Head of Design, Kevin Wong. Here’s a preview of some of the ideas we cover:
- How Webflow executed a massive rebrand leading up to their conference
- The different types of prototypes for driving alignment
- The role of design systems in their latest visual refresh
- How designers can handle situations where stakeholders disagree
- Ways to improve the way you share your work via Loom
- The rituals and processes used by designers at Webflow