Context
Fourstep Automation approached me to modernize their brand and digital presence. While they had an existing website, it wasn’t effectively generating new business, and competitors were rapidly outpacing them. To quickly build momentum, I established a collaborative cadence and initiated the creative process through in-person working sessions. Since the new site launched, Fourstep has taken on a new client project worth over $1M.
Once the design direction was established, I created an actionable plan to launch the new website. Using Webflow, I designed and deployed a fully responsive site with thoughtful interaction design to enhance the user experience and engage potential clients.
Before
After
To streamline development, I created a lightweight design system within Webflow, enabling rapid page construction. I built reusable, responsive components that could be consistently managed and updated across the site.
Style Guide
Components
Accessibility Testing
Information Architecture
Takeaways
Figma first.
Beginning the design process in Figma enabled rapid ideation and iteration, significantly reducing time spent rebuilding or revising layouts later in Webflow.
Webflow for execution.
By clearly defining structure and interactions in Figma first, Webflow became a highly efficient production tool, allowing for faster, more predictable implementation of responsive designs.
Design systems rule.
Establishing a lightweight design system, including a component library and style guide, streamlined the build process and ensured a scalable foundation across the site.