Modernizing Automation Engineering

Web Design
Marketing
Branding

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.
Company
Fourstep Automation
Industry
Automation Engineering
Timeline
2025
Role
Lead Designer
Laptop, tablet, and mobile view of the home page.

Once the design direction was established, I created an actionable plan to launch the new website within two weeks. Using Webflow, I designed and deployed a fully responsive site with thoughtful interaction design to enhance the user experience and engage potential clients.

Before

Fourstep's website before redesign.

After

Fourstep's website after redesign.

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

Typography
H1
Heading Text
H2
Heading Text
H3
Heading Text
H4
Heading Text
H5
Heading Text
H6
Heading Text
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
a
Link Text
Colors
Fourstep Red
#CF2E2E
Light Gray
#E0E0E0
Gray
#A3A3A3
Dark Gray
#333333
White
#FFFFFF
Black
#000000

Components

Buttons
Primary
Button
Secondary
Button
Tertiary
Button
Cards
Steps
Step #
Title

Acessibility Testing

Information Architecture

Website information architecture.
Mobile screen resolution views.

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 System's Rule

Establishing a lightweight design system, including a component library and style guide, streamlined the build process and ensured scalable foundation across the entire site.

Thank you!

Thank you for taking the time to learn more about my work.

Get in Touch →