17 Tools That Power Our End-to-End Design Process

Written by

Joseph Wheatley

Published on

May 26, 2025

1. Client Onboarding

We start by bringing clients into Slack for daily conversations and updates.

For one-off projects, we manage everything internally in Notion, while design subscription clients get access to a dedicated Notion portal for ticket submissions and project tracking.

2. Strategy & Discovery

Every project begins with deep discovery through Google Meet workshops.

We capture everything in structured Notion docs, ensuring nothing gets lost and creating a single source of truth for project decisions.

Want the full walkthrough?

Watch the video version of this article for a complete breakdown of the 17 tools and how we use them across each step of the process.

3. Messaging

Before touching any design tools, we develop a comprehensive Brand Message Playbook - a strategic deliverable that defines positioning, messaging, and narrative.

It's created in Figma and exported as a polished PDF, becoming the foundation for all copy and design decisions.

4. Logo & Visual Identity

Everything begins in Figma for minimalist logos or Adobe Illustrator for more complex work.

We handcraft either brand guidelines or a visual identity guide, depending on the scope, using Figma. We avoid Figma slides or Google Slides to maintain highest quality and control.

5. Website Structure

We use Relume to generate the initial sitemap and layout architecture, giving us a strong structural foundation to work from.

6. Wireframes & Copy

We export base wireframes from Relume to Figma, then write all copy directly inside the wireframes. This ensures content and layout are developed together from the start.

All copy is 100% human-written. We use ChatGPT as a proofreader and idea bouncer. It does not write for us but helps challenge assumptions and sharpen phrasing so every word has been thought through.

7. Design

We design full landing pages and supporting marketing assets in Figma, building on Relume’s structure but always deviating from templates to create a custom identity.

We use Photoshop for image editing, Lightroom for color grading, and Premiere Pro for light video editing when required.

FreePik provides creative assets, design elements, and AI-generated imagery.

Fonts are sourced from Adobe Fonts, Google Fonts and premium libraries to align with the brand’s tone.

8. Development

We export optimized assets using TinyPNG for compression and build the final site in Webflow.

We use the Client-First Style System by Finsweet and customize Relume components to match our designs exactly.

9. Interactive Elements

We use GSAP for all animations instead of native Webflow interactions. This gives us smoother and more advanced motion effects, with more control over every detail.

Summary

Our end-to-end process is built around nine steps: client onboarding, strategy & discovery, messaging, logo & visual identity, website structure, wireframes & copy, design, Webflow development, and interactions & animations. Each step uses specific tools to ensure high-quality output - from Slack and Notion for communication and project tracking to Figma, Relume, Webflow, and GSAP for design, build, and animation.