Case
Studies

Take a deeper look into my design process.
The
Flip Side

Good designers should have more than one medium.
Meet
The Editor

Find out more about what's shaped me as a designer.
ISSUE 02
AI Workflow B2B SaaS

Building A SaaS Marketing Site With AI

Rebuilding Rent Manager's website using a self-built Claude Code workflow

Business Challenge

What was broken, why it needs to be fixed & who benefits once we do

Overview

Rent Manager's marketing homepage undersold the product it was selling, and I set out to change that. I redesigned the homepage from scratch, and built an AI-directed workflow that could follow a set of design guidelines accurately for the pages that would come next.

My Role
  • Sole product designer, directing an AI-driven design workflow end-to-end
  • Made every substantive call on direction, scope, and content accuracy; Claude Code executed research, concepts, and the Figma build
  • Built the reusable Claude Code skill that runs the whole pipeline
The Crew
  • Claude Code·AI Design & Build Partner
Timeline
Sep ‘26 – now
Tools
Claude Code · Figma · Angular Material

Solution

A clean, modern homepage that highlights our MVP product

Redesigned homepage hero with the real Rent Manager dashboard shown in a browser mockup below the fold Why Rent Manager section naming the real competitive differentiator: works with what you already use, with a partner-logo grid and integration category chips How It Works section: four steps from bring your data to run everything from one place
The live rentmanager.com homepage before the redesign: dense navigation, stock photography, and an events banner competing with the hero
The redesigned homepage: a single dominant headline, one primary CTA, and a restrained six-item navigation, with the real Rent Manager dashboard shown in a browser mockup below the fold

Solution: A clean modern, SaaS design built on our exisitng RMXDS Design system. I brought more focus to the acutal product we're selling and give users a preview without having to book a demo first. 

Impact: Built repeatable Claude skills Live interactive prototype Every real decision stayed human

Pain Points

How we identified the biggest sources of friction across users

The live rentmanager.com homepage, annotated by the audit as text-heavy, legacy-led, and missing a dominant hero or single CTA
Constraint 01

AI-Generated ≠ Generic

The redesign needed to follow our existing design system, RMXDS

Constraint 02

UI Infrastructure

Express runs on Angular, so it makes sense for the website to do so as well

Constraint 03

Reusing Content

I wanted to reuse some of our existing text and assets where possible 

Research

Insights that informed our design decisions

What We Did

I used an AI critique tool (Roast My Website) to take an objective first pass at the live site's problems; I then browsed the real homepage myself (desktop and mobile) to confirm it against the direction our company is looking to go in for our MVP product. From there I found three adjacent SaaS websites for inspiration and leveraged Mobbin and Awwwards in my Claude skill to build concepts from common design patterns. I used a mix of:

AI Critique & Live Audit

Competitive Analysis

roommaster.com homepage, referenced for quantified inline benefit statements and a booked-demo CTA pattern finta.com homepage, referenced for leading with a rating and proof directly under the hero sequencehq.com homepage, referenced for a restrained nav and a geometric dot-grid texture behind the hero

What We Cut

Dark mode

Dark-theme token values were pulled and recorded alongside the light palette, but never signed off. Rather than ship an unapproved theme, the redesign stays light-only until dark mode is explicitly reviewed and approved.

Design

Exploring iterations and tradeoffs to reach a user centric solution

Claude provided me with 3 different concepts. One I cut immediately as it didn't fit the desired aesthetic, and the winning direction was a hybrid of the other two, plus some tweaks that I designed personally in Figma. 

Rejected Concept B, Bold Blocks: a diagonal orange cutout and pill-shaped buttons The chosen hybrid direction, later composed as a real Figma design system

Impact

How the business and its users benefitted after launch

My Influence

AI sped up the work, but direction, scope, and craft stayed mine, and the workflow I built makes that speed repeatable for the next page.

sequencehq.com, one of three named precedent sites studied for pattern-level takeaways
The redesigned homepage's How It Works section, composed from real Figma components

Built repeatable Claude skills

Encoded the whole pipeline into a reusable Claude Code skill: research, concepting, a Figma system, and a quality gate, built once and reusable for the next marketing page.

Live interactive prototype

The Integrations page is a genuinely interactive prototype, not a static picture of a search box: real component state drives category and text-search filtering over one shared grid.

1 token, standardized site-wide

Six mismatched corner radii collapsed into one design-system value across all 11 artboards, verified with grep before publishing.

Reflections

Hindsight is 20/20

What I Learned

  • An AI collaborator is most useful when it argues back.
    The moments that mattered most weren't the fast output. They were the AI surfacing a real platform limitation instead of quietly working around it, and catching its own content-accuracy mistake before it shipped.

What I'd Do Differently

I'd lock down real asset locations and a confirmed partner list before Figma work started. Several components are still carrying clearly-flagged placeholders that real assets would have avoided rebuilding around later.

Want to hear more?

Reach out
Previous Issue Next Issue