My Role

I owned the entire project, from research and brand identity through final Framer build and template productization. Every decision was deliberate and research-driven, with the added constraint of designing a system flexible enough for other teams to use and customize.

Understanding the Problem

I started by auditing successful SaaS startups in the analytics and workflow space, looking at how they structured their homepages, communicated value, and moved visitors toward a sign-up or demo request. A few patterns emerged consistently across the ones that converted well: they lead with a clear, outcome-focused headline rather than a feature list, they use the hero section to show the product immediately, and they layer social proof early before asking for any commitment.

I also noticed that most mid-market SaaS sites feel visually flat. They're functional but forgettable. That became the creative challenge: build something that felt like it belonged in the same conversation as the category leaders.

The Challenges

• Communicating complex value simply: Analytics platforms risk drowning visitors in feature-speak. The copy and layout needed to lead with business outcomes, not technical capabilities.

  
  

• Standing out in a crowded category: The SaaS marketing space has a lot of visual sameness. The design needed a point of view without sacrificing clarity or credibility.

  
  

• Making the page feel alive: Static layouts don't communicate the dynamism of a real-time data product. Motion and interactivity needed to do some of that work.

  
  

• Designing for reuse: Packaging it as a template meant the components, styles, and layout system needed to be clean, well-structured, and easy for other designers to customize without breaking things.

Design Process

The brand direction came first. I chose a dark UI foundation with a high-contrast accent system, which gave the site a premium, technical feel while letting the dashboard UI screenshots pop. Typography was set in a clean geometric sans to reinforce precision and clarity.

The biggest design investment was motion. The hero section uses a WebGL effect that responds to mouse movement, creating a sense of depth and energy the moment someone lands on the page. It signals immediately that this isn't a template. Scroll-triggered animations carry that energy through the rest of the page, with each section revealing itself with purpose rather than just appearing.

For the conversion architecture, I followed the patterns I identified in research: outcome-led headline, product screenshot above the fold, feature breakdown structured around user benefits rather than technical specs, social proof before pricing, and a low-friction free trial CTA with no credit card required. The pricing section uses a three-tier structure that makes the mid-tier feel like the obvious choice, a deliberate anchoring decision.

Knowing the project would become a sellable template shaped how I built it in Framer. Component structure, naming conventions, and style variables were all set up with someone else's workflow in mind, not just my own.