WeBuildCrew
◐ SaaS · Design

Vela — SaaS Product UI Redesign

A ground-up UI/UX redesign of a B2B SaaS — new design system, streamlined onboarding and a dashboard that made complex data readable at a glance.

Timeline
4 weeks
Role
UI/UX design & front-end
Team
Designer + engineer
Year
2025
FigmaNext.jsTypeScriptTailwind CSSFramer Motion
Discuss your design Discuss your project
Vela — SaaS Product UI Redesign
Vela

−28%

Churn rate

+42%

Activation

4 wk

Full redesign

design system

Delivered

Client goals

  • ◎Replace inconsistent UI with a coherent design system
  • ◎Simplify onboarding to reach activation faster
  • ◎Make the core dashboard readable without training

Project overview

Vela's SaaS had grown feature-by-feature with no design system — inconsistent spacing, six button variants, and an onboarding flow that took 40 minutes. Users churned before reaching the aha moment.

The client problem

Our solution

We audited every screen, built a token-based design system in Figma, stripped the onboarding to its essential steps, and redesigned the dashboard with a clear data hierarchy. Then we rebuilt the frontend to match.

What we built

Features

🎨

Design system

Tokens, components and guidelines the team can build on.

🚀

Onboarding flow

Reduced steps from 9 to 4, with contextual hints.

📊

Dashboard redesign

Data hierarchy that surfaces KPIs without clutter.

📱

Responsive

Fully usable on tablet and mobile.

♿

Accessible

WCAG AA contrast, keyboard navigation, ARIA.

🔄

Handoff

Developer-ready specs and assets from Figma.

Under the hood

Technical code

components/StatCard.tsx
TSX
type Props = { label: string; value: string; delta?: number }; export function StatCard({ label, value, delta }: Props) {  return (    <div className="rounded-2xl border border-white/10 bg-white/5 p-5">      <p className="text-sm text-muted">{label}</p>      <p className="mt-1 text-2xl font-bold">{value}</p>      {delta !== undefined && (        <p className={delta >= 0 ? "text-emerald-400" : "text-red-400"}>          {delta >= 0 ? "▲" : "▼"} {Math.abs(delta)}%        </p>      )}    </div>  );}

Integrations

APIs & services

Figma

Component library and design tokens.

Storybook

Living documentation for every component.

Framer Motion

Micro-animations for feedback and transitions.

Process

Development workflow

  1. 1

    Discovery

    Goals, users and success metrics defined on a free call.

  2. 2

    Planning

    Fixed scope, milestone plan and timeline in writing.

  3. 3

    UI/UX design

    Wireframes and a clean, modern design system.

  4. 4

    Backend setup

    Database schema, auth and core services.

  5. 5

    API development

    Typed, documented endpoints and integrations.

  6. 6

    Frontend

    Responsive, accessible UI wired to the API.

  7. 7

    Testing

    QA across devices plus performance & security checks.

  8. 8

    Deployment

    CI/CD, monitoring and a smooth production launch.

  9. 9

    Support

    Ongoing maintenance, updates and new features.

Speed & SEO

Performance & SEO

Performance

  • ✓Server-side & static rendering for instant first paint
  • ✓Image optimisation and lazy loading
  • ✓Code-splitting and route-level prefetching
  • ✓Edge/CDN caching with smart revalidation
  • ✓Green Core Web Vitals (LCP, CLS, INP)
  • ✓Database indexing and query tuning

SEO

  • ✓Per-page metadata, canonical URLs and Open Graph
  • ✓Structured data (JSON-LD) for rich results
  • ✓Programmatic sitemap & robots
  • ✓Semantic, accessible HTML
  • ✓Clean, descriptive slug URLs

Built secure

Security

🔒Session-based auth with role permissions
🔒Server-side authorization on every protected route
🔒Input validation (Zod) on client and server
🔒Secure payments via hosted Checkout (no card data stored)
🔒Rate limiting and abuse protection
🔒Encrypted secrets and least-privilege access

Outcome

Results & impact

−28%

Churn rate

+42%

Activation

4 wk

Full redesign

design system

Delivered

Vela's redesign lifted trial activation by 42% and cut monthly churn by 28% — purely through clearer UX, not new features.

Related services:UI/UX DesignSaaS DevelopmentWeb Development

Redesign your product UI

Design systems, onboarding flows and dashboards that make your product easier to love.

Discuss your design Contact us