Website RedesignUX/UI DesignWebflow DevelopmentFP&A SaaS
Case study

We gave a powerful FP&A platform a front door that converts.

Stratify's financial-planning software was powerful. Its website wasn't. We redesigned the whole experience and rebuilt it in Webflow, turning a complex product into a clear, modern site that converts.

Industry
FP&A / Financial SaaS
Engagement
UX/UI Design · Webflow Development
Scope
Full site redesign
Timeline
2024
Overview

A serious platform with a dated front door.

Stratify's software was advanced. Its website didn't show it. Finance buyers are careful. A tool that doesn't look credible doesn't get taken seriously. So we rebuilt the whole storefront: brand, UX, UI and Webflow build, module by module, until the site finally matched the product.

Stratify brand foundations: Proxima Nova and Inter type cards with the blue palette strips

The foundations: Proxima Nova up front, Inter in support, and a palette built around #007FFF.

The roadmap

Four stops, zero detours.

Discover: Research & Analysis
Ideate: User Experience Design
Design: User Interface Design
Build: Webflow Development
Phase 01 · Discover

Research & analysis.

Before a pixel moved: a competitor teardown, a heuristic audit of the old site, user research with the people who actually run FP&A, and a sitemap that gives a complex product a simple spine.

Competitive analysis: FP&A competitor landing pages
Heuristic analysis matrix of the existing site
User research: buyer persona cards
Sitemap and information architecture flows
Phase 02 · Ideate

User experience design.

Every page argued in grayscale first. Structure wins before pixels get pretty.

Sketching out the ideas: wireframe fan on a dark grid
Phase 03 · Design

User interface design.

The winning wireframes got dressed, module by module: planning, reporting, workforce, expenses, content. Clear dashboards, calm blues, and numbers a CFO can trust at a glance.

Three UI detail cards from the Stratify design system
Planning

Designing the core module.

Planning is the heart of Stratify’s product, so its page got the deepest design treatment. We structured it as a guided story: initiate a task, budget owners suggest, finance approves. We turned dense planning tables into scannable moments, so a CFO understands the collaborative workflow before reading a word of body copy.

Stratify financial planning software module page design
Reporting

Reporting, shown not told.

For the reporting module we led with the outcomes finance teams recognize: a rolling forecast, a variance view, a month-end package. We sequenced real product screens with short claims. The page we designed demonstrates the reporting workflow instead of describing it.

Stratify financial reporting and rolling forecast page design
Workforce planning

Answering the CFO’s first question.

Workforce planning is where FP&A buyers lean in, so we organized this page around their opening questions: hiring plans, compensation assumptions, headcount reconciliation. We paired each one with the exact Stratify dashboard that answers it.

Stratify workforce planning page design with headcount dashboards
Operational expenses

De-fanging the grid.

Expense-planning pages usually drown in tables. We built this one around a single worked example, a recruiting-fee assumption edited live on screen, so Stratify’s “no complex formulas” promise is shown rather than asserted.

Stratify operational expense planning page design
Blog

Content, designed into the funnel.

We treated the content hub as part of the conversion path, not an afterthought: finance-first categories, clear reading paths and article layouts that keep a skeptical FP&A reader moving toward the demo.

Stratify blog hub page design for FP&A content
Site pages

One system, every page.

Pricing, integrations, security, about. We rebuilt every supporting route on the same grid, type and component system, so wherever a buyer lands the story reads as one site, not a patchwork.

Stratify supporting site pages design: pricing, integrations, about
The system

Every tint, token and state, documented.

A color system with dark mode, navigation patterns and component states, handed over as a system, not a stack of screens.

Stratify color system: neutral, primary, secondary, semantic and dark-mode scales with navigation patterns

Want a front door like this?

Same jungle, your brand. Tell us what you're hunting.

Start a project