01
SaaS UX audit
A heuristic review of your product, plus analytics, session recordings and support tickets, turned into a list of issues ranked by impact and effort.
FIG 01 · SaaS Design
A SaaS design agency that designs it and ships it
Product UX audits, onboarding and dashboard UI, Figma prototypes and a design system of tokens and React components, from one team that designs and builds, so nothing is lost between the design file and the release.
See how it works
FIG 02 · Quick answer
What does a SaaS design agency do?
A SaaS design agency researches, designs and tests the product your customers log into: onboarding, dashboards, settings and billing. Elgrith runs UX audits, designs flows and UI in Figma, builds a design system of tokens and components, then codes it in React with the same team, so nothing is lost in handover.
- Forms of every design system: a Figma library and coded components
- 2
- Projects delivered since 2015
- 1,000+
- Clients across the USA, UK and India
- 250+
- Your Figma files, code and design system
- 100%
FIG 03 · Why it matters
A design system is how a SaaS product stays consistent as it grows.
From Nielsen Norman Group’s Design Systems 101 (last reviewed 27 Aug 2026). We found no SaaS UX benchmark we could verify at a primary source, so this page doesn’t quote one.
01
At scale
Design managed at scale
NN/g defines a design system as “a complete set of standards intended to manage design at scale using reusable components and patterns.”
Source: Nielsen Norman Group, Design Systems 101(opens in a new tab)02
Faster
New screens from approved parts
NN/g: “The primary benefit of design systems is their ability to replicate designs quickly.” New features start from tested components, not a blank canvas.
Source: Nielsen Norman Group, Design Systems 101(opens in a new tab)03
Activation
Goals in your own metrics
We set design goals in your product numbers, such as activation, time-to-value and trial-to-paid, measured in your analytics before and after release. We don’t promise percentages up front.
FIG 04 · Definitions
SaaS UX, SaaS UI and design systems: what each one is
Three parts of one job. Most SaaS products need all three, in that order, at a depth that matches their stage.
| SaaS UX design | SaaS UI design | Design system | |
|---|---|---|---|
| What it covers | Flows, information architecture, onboarding and how users reach value | Layout, type, colour, components and every state of every screen | Tokens, components, patterns, docs and the rules for changing them |
| Main deliverables | Audit, research findings, user flows, wireframes | High-fidelity Figma screens and clickable prototypes | A Figma library, coded React components and Storybook docs |
| Answers the question | Can people get their job done? | Is it clear, consistent and on brand? | Can the team build the next screen fast and the same way? |
| When you need it | Before and during any redesign or new feature | Whenever screens are designed | Once two or more people design or build the product |
FIG 05 · What you get
Our SaaS design services
From the first audit to components in your repository. We design the product your customers log into, not only the marketing site around it.
02
Onboarding and activation UX
Sign-up, first run, empty states and checklists designed to get new users to their first real result sooner.
03
Dashboard and data-heavy UI
Tables, filters, charts and reports that stay readable with real data, from ten rows to ten thousand.
04
AI feature UX
Copilot panels, agent progress and approval states, citations, and clear empty, loading and error states for AI features.
05
SaaS UI design and prototypes
High-fidelity screens and clickable Figma prototypes, tested with real users before a line of code is written.
06
Design systems
Figma variables mapped to design tokens, then a coded component library with documentation, versioning and contribution rules.
07
Settings, roles and billing UX
Multi-tenant workspaces, roles and permissions, plans, upgrades and invoices: the screens that decide whether teams stay.
08
Accessibility built in
Contrast, focus states, keyboard paths and screen-reader labels designed into components against WCAG 2.2 AA.
Deliverables
12
deliverables, in writing
Included in every build, written into your fixed quote before work starts.
FIG 06 · Screens we design
The SaaS screens that move your numbers
Every screen draws on the same design system, so a fix in one component shows up everywhere it is used.
- UX audit
- User research
- Product analytics
- Support tickets
Design system
- Figma library
- React components
- Storybook docs
- Your product
Onboarding and first run
- Problem
- New sign-ups leave before they see value
- We design
- Shorter sign-up, guided setup, useful empty states
- We measure
- Activation and time-to-value
Dashboards and reports
- Problem
- Too many numbers, no clear next step
- We design
- Hierarchy, filters, drill-downs and saved views
- We measure
- Task success and repeat use
Workspaces, roles and permissions
- Problem
- Admins can’t tell who can see what
- We design
- Clear roles, invites and audit views for multi-tenant products
- We measure
- Seats added and support tickets
Plans, upgrades and billing
- Problem
- Pricing and upgrade paths that confuse buyers
- We design
- Plan pages, upgrade prompts, invoices and payment states
- We measure
- Trial-to-paid and upgrade rate
AI copilots and agents
- Problem
- AI features users don’t trust or can’t find
- We design
- Prompts, progress, sources, approvals and undo
- We measure
- Feature adoption and accepted results
Empty, loading and error states
- Problem
- Blank screens and dead ends
- We design
- A state for every component, with a next step in each
- We measure
- Drop-offs and support tickets
Admin and internal tools
- Problem
- Back-office screens your team works around
- We design
- Dense, keyboard-friendly tables and forms
- We measure
- Time per task
Redesign of a live product
- Problem
- An old UI nobody wants to touch
- We design
- A staged redesign behind feature flags
- We measure
- Opt-in, feedback and the metrics above
FIG 07 · Flagship build
Proof: a SaaS product we designed and engineered
Kenerate AI is our flagship build: an all-in-one AI image and video studio, designed and engineered by Elgrith. It puts a lot of product behind one interface.
- 23+ studios and tools in one app
- One login and one credit balance across 200+ AI models
- Kenerate Agent chat, plus MCP & CLI inside Claude, ChatGPT, Cursor and 19+ AI apps
- 1,000+ projects for 250+ clients since 2015
Tools: 23+ studios with guides for every use caseDesigned and engineered by Elgrith
- AI models in one app
- 200+
- Studios and tools
- 23+
- Maximum output
- 4K
- Guides
- 500+
FIG 08 · Design systems
Design systems, in Figma and in code
Our design system services cover what NN/g describes: standards, reusable components and patterns. We deliver them twice, as a Figma library and as coded components, and keep the two in sync. That is the gap most design system agencies leave.
06principles
Design tokens
Colour, type, spacing, radius and motion as Figma variables, exported as tokens your code reads, so a brand change is one edit.
Component library
React and Tailwind CSS components on accessible primitives such as Radix, with every state designed and built.
Documentation
Storybook pages with usage guidance, do and don’t examples and live props, for designers and engineers alike.
Governance
Who owns the system, how new components are proposed and reviewed, and when a one-off becomes a pattern.
Versioning
Releases with a changelog and a deprecation path, so product teams upgrade on purpose, not by surprise.
Theming
Light and dark modes, and white-label themes for multi-tenant products, from the same tokens.
FIG 09 · Design + build
Design and engineering in one team
Most SaaS design agencies stop at the Figma file. Our designers and engineers work in the same sprints, so the design system ships as code and the product matches the design.
06principles
SaaS engineering
The team that designs your product can build it, from multi-tenant back end to billing.
SaaS developmentReact front ends
Components built in React and Next.js straight from the Figma library, with tokens shared between them.
React developmentMVPs
Starting from zero? We design and build a first version you can put in front of users.
MVP developmentCharts and dashboards
Data-heavy screens designed with the people who build the queries behind them.
Data visualizationCheckout and billing
Plan pages and upgrade flows wired to Stripe, PayPal or Razorpay by the same team.
Payment gateway integrationDesign QA
Designers review every build on staging against the design before it ships.
FIG 10 · Accessibility
Accessibility built in
We design and build against WCAG 2.2 AA from the first wireframe, so contrast, focus and labels live in the components instead of being patched later. This is design practice, not legal advice or a compliance guarantee.
06principles
Contrast-checked tokens
Every text and background token pair is checked for contrast before it enters the system.
Keyboard and focus
Visible focus, logical tab order and focus traps in dialogs, designed and tested.
Screen-reader semantics
Labels, roles and live regions for async states such as saving, loading and AI responses.
Target size and motion
Touch targets sized for fingers and motion that respects reduced-motion settings.
Accessible charts
Charts that don’t rely on colour alone, with text alternatives and data tables.
Audits of live products
Already shipped? We audit against WCAG 2.2 AA and guide the fixes.
Website accessibility
FIG 11 · Measurement
What we measure
Goals are agreed with you and measured in your own analytics, against baselines taken in the UX audit.
| Metric | What it tells you | How we measure it |
|---|---|---|
| Activation | Whether new users reach their first real result | Product analytics events agreed with you |
| Time-to-value | How long that takes | Time from sign-up to the activation event |
| Trial-to-paid | Whether the product sells itself | Billing and analytics data |
| Task success | Whether people can do the job the screen is for | Usability tests before and after |
| Support tickets by feature | Where the UI confuses people | Your help desk, tagged by feature |
| Design system adoption | How much of the product uses shared components | Component usage in code and Figma |
We don’t quote benchmark uplift percentages we can’t source. Targets are set with you after the audit and reviewed at the check-ins in your written scope.
FIG 12 · Process · 7 steps
Audit first, then design what ships
A fixed written quote after the audit, weekly demos, and a design system delivered in Figma and in code.
- Step 01
UX audit
A review of your product, analytics and support tickets, with issues ranked by impact and effort. You get a written scope and a fixed quote.
- Step 02
Research
Interviews, usability tests and data that show where users get stuck and what they came to do.
- Step 03
Flows and structure
User flows, information architecture and wireframes for the journeys that matter most.
- Step 04
UI and prototypes
High-fidelity screens and clickable prototypes, tested with users and reviewed in weekly demos.
- Step 05
Design system
Tokens and components in Figma, then in code, documented in Storybook.
- Step 06
Build support
Design QA on every build, by designers who sit in the same sprints as the engineers.
- Step 07
Measure
The scorecard compared with the audit baselines after release, and the next priorities agreed.
FIG 13 · What you get
Everything included
Written into your fixed quote, so you know exactly what you are paying for before work starts.
12items
- UX audit with issues ranked by impact and effort
- Written scope and fixed quote
- Research findings and user flows
- Wireframes for priority journeys
- High-fidelity Figma screens for every state
- Clickable prototypes tested with users
- Design tokens from Figma variables
- Coded React component library
- Storybook documentation
- Accessibility notes against WCAG 2.2 AA
- Design QA on staging
- Figma files, code and system, all yours
FIG 14 · Tech & tools
The tools behind the work
Proven, well-supported tools, chosen for your project and set up in accounts your business owns.
- Figma
- Figma variables
- FigJam
- Storybook
- React
- Next.js
- TypeScript
- Tailwind CSS
- Radix UI
- Style Dictionary
- Motion
- PostHog
- Mixpanel
- Google Analytics 4
FIG 15 · Who it’s for
SaaS design for every stage.
The depth changes with your stage. The way we work doesn’t.
3 audiences
Early stage
From idea to a product people get.
Flows, UI and a lightweight component library, designed and built together, so your first release looks and works like one product.
- Core flows designed first
- A small token set and core components
- Prototypes tested before build
- Room to grow into a full system
Scaling SaaS
Many teams, one product.
A full design system with governance and versioning, so several squads can ship features that look and behave the same.
- Audit of existing UI debt
- Tokens and components in Figma and code
- Storybook and contribution rules
- Staged migration of old screens
UK teams
Product design for UK SaaS.
UK projects run through our London client partner, with design and engineering in New Delhi. We design to WCAG 2.2 AA and UK English from the start.
- London client partner
- UK spelling and date formats
- Accessibility designed in
- Fixed written quote in GBP
FIG 16 · Working with us from the USA and UK
Built in New Delhi. Run on your hours.
Every project gets a point of contact in New York or London and an engineering team in New Delhi. Here is how today’s working days line up, live.
New York
North America
--:--ET
New Delhi team Your working day- Shared working time
- ≈ 3 hours today
- New Delhi is
- 10.5 h ahead
- Live calls, your time
- 9 a.m. to 12 p.m. ET
London
UK & Europe
--:--UK
New Delhi team Your working day- Shared working time
- ≈ 4.5 hours today
- New Delhi is
- 5.5 h ahead
- Live calls, your time
- 9 a.m. to 1:30 p.m. UK
Three ways to work together
- 01
Fixed-scope project
A written scope, one fixed price and a dated plan. Suits websites, apps and MVPs.
- 02
Dedicated team
Designers and engineers on your roadmap every month, billed monthly.
- 03
White label
For US and UK agencies: our work, your brand, unbranded deliverables.
Every engagement
- Fixed quote in USD, GBP or INR after a free 30-minute call
- NDA before discovery. You own all code, designs and content
- A working demo every sprint, not status slides
- Reply within one business day, calls inside your hours
Book a call
Calls on ET or UK hours
FIG 17 · Decide
SaaS design agency, in-house designer or freelancer?
All three can work. The right answer depends on how much you need at once, and for how long.
| SaaS design agency | In-house designer | Freelancer | |
|---|---|---|---|
| Best for | A redesign, a design system or a new product, done properly once | Steady, everyday product design | One defined piece of work |
| Skills | Research, UX, UI, systems and engineering together | One person’s range | One person’s range |
| Design system in code | Yes, if the agency also builds | Needs engineering time | Rarely |
| Ramp-up | Fast, with a set process | Hiring takes time | Fast |
| Watch for | Agencies that stop at Figma | Spread too thin across the roadmap | Availability and handover |
FIG 18 · Checklist
How to choose a SaaS UI/UX design agency
Most SaaS UI/UX design agencies have strong portfolios. These questions show who can carry a product past the Figma file.
| Ask for | Why it matters | What good looks like |
|---|---|---|
| Product work, not only websites | Marketing sites and products are different jobs | Dashboards, onboarding and settings in the portfolio |
| A design system in code | Figma-only systems drift from the product | Tokens and components in your repository |
| Research in the plan | Opinions are not evidence | Interviews or usability tests before final UI |
| Accessibility from the start | Retrofitting costs more | WCAG 2.2 AA in the component specs |
| How they measure | Pretty screens don’t prove value | Metrics agreed up front, baselines from the audit |
| Ownership | You may change agency later | All Figma files and code in your accounts |
FIG 19 · Compare
Figma handoff or design and code together?
| Design and code together | Figma handoff only | |
|---|---|---|
| What you receive | Figma library, coded components and docs | Figma files and a handoff meeting |
| Design drift | Low: the code is the system | Grows with every sprint |
| Engineering effort | Components arrive ready to use | Your team rebuilds each component |
| Design QA | Built into the same sprints | Often skipped |
| Best for | Products that will keep growing | Teams with strong front-end engineers and time |
FAQ
Frequently asked questions
Straight answers about SaaS Design with Elgrith.
It depends on the number of flows and screens, whether research and usability testing are included, the scope of the design system (Figma only, or Figma and code), product complexity such as roles, multi-tenancy and data-heavy screens, and whether we also build it. We don’t publish prices: after a free call you get a written scope and a fixed quote.
Free 30-minute call
Design the product your customers log into.
Tell us where users get stuck. After a free call you get a written scope, a UX audit plan and a fixed quote.
Pick a day for your call
OpenPick a day. You'll choose a time in your own time zone on the next step.