->

Web app design

Updated September 2026

Web app design that holds up at Real Data Volumes.

Web app design that holds up at Real Data Volumes.

Web app design that holds up at Real Data Volumes.

Web app design that holds up at Real Data Volumes.

Rango is a web app design partner for B2B SaaS, fintech and infrastructure teams.

Rango is a web app design partner for B2B SaaS, fintech and infrastructure teams.

Rango is a web app design partner for B2B SaaS, AI, fintech and data products, covering core workflows, dashboards, design systems, permissions and new features. Every engagement ships as One Build-Ready System, not a folder of mockups.

Rango is a web app design partner for B2B SaaS, AI, fintech and data products, covering core workflows, dashboards, design systems, permissions and new features. Every engagement ships as One Build-Ready System, not a folder of mockups.

Rango is a web app design partner for B2B SaaS, AI, fintech and data products, covering core workflows, dashboards, design systems, permissions and new features. Every engagement ships as One Build-Ready System, not a folder of mockups.

AI can do more of the work now, so the product stops being where the work happens and becomes the Layer For Control. Users still need Visibility And Exceptions, and somewhere to understand

AI can do more of the work now, so the product stops being where the work happens and becomes the Layer For Control. Users still need Visibility And Exceptions, and somewhere to understand

AI can do more of the work now, so the product stops being where the work happens and becomes the Layer For Control. Users still need Visibility And Exceptions, and somewhere to understand

what actually happened.

what actually happened.

what actually happened.

Anish Manglani
Md Shahanab Uddin
Amit Pathania
Faizan Mahida
Shreyash Chhatbar
Divyesh Vasani
Sagar Ludhiyani
Anish Manglani
Md Shahanab Uddin
Amit Pathania
Faizan Mahida
Shreyash Chhatbar
Divyesh Vasani
Sagar Ludhiyani

The shift

AI did not kill the web app. It Changed Its Job.

Manual

Users do the work themselves across forms, tables and multi-step workflows.

AI-assisted

AI drafts, recommends and summarizes. Your users review the work and decide.

AI-native

AI acts. The product becomes the layer for control, trust and exceptions.

Why teams call us

Nothing broke.
It Just Drifted.

Orange pixel art of two rivers meeting in a mountain valley beside a town at sunset

From the blog

Confluence: Notes on AI, design, & frontend

UX debt

Years of shipping made simple tasks harder than they should be, and old flows never got retired.

AI added later

The model works. The product still feels like AI was bolted onto the side of it.

Too many roles

Admins, operators, managers and end users all need a different level of control.

Design stopped scaling

Every new feature introduces another pattern, another state and another exception.

Choose between

One workflow, a full redesign, or the Work In Between.

Product and UX redesign

A product and flow audit and a usability review come first, then information architecture, UX writing and custom UI, a Figma design system, an accessibility pass and design QA while engineering builds.

Illustration of a tangled app flow on a phone screen being straightened into one clear path

MVP product design

Product discovery and user flows come first, then information architecture, UX writing and custom UI, onboarding and empty states, a Figma design system and a prototype you can test before engineering starts.

Illustration of a robotic arm assembling interface blocks into a first version of a product

New features and workflows

AI features, dashboards, approvals, permissions, automation and new modules, designed to sit inside the product you already have.

Illustration of a new feature module sliding into an existing product workflow

Design systems

One system instead of every screen solving the same problem a slightly different way. Tokens, components and the rules for using them.

Illustration of interface components aligned on one shared design system grid

What we design

Products people use to Get Real Work Done.

Two colleagues reviewing work together at a laptop and tablet in a bright office

B2B SaaS

Core workflows, settings, permissions, onboarding and the account areas your users live in every day.

Designer working on a laptop at a sunlit desk with colour swatches

AI products

Copilots, agents, recommendations, review states, guardrails and a clear human override.

Woman on a sofa holding a bank card while paying online on her laptop

Fintech

Onboarding and KYC, payments, ledgers, reconciliation and the audit trails compliance teams ask for.

Colleague handing over a chart printout beside a laptop showing a dashboard

Data products

Dashboards, analytics, filters and drill-downs that stay readable when the data gets dense.

Engineer typing on a laptop with code on a desktop monitor in a bright office

Cloud and infrastructure

Cloud consoles, deploy flows, usage and billing views, logs and alerts engineers can act on.

Woman on a phone call logging an order on a clipboard in a stockroom

Operational tools

Admin panels, investigation tools, internal systems, approvals and case management.

HR manager taking notes during a job interview

HR tech

Hiring pipelines, candidate assessments, interview scheduling and the dashboards recruiters run on.

Doctor working at a clinical dashboard on her computer

Healthcare

Patient portals, scheduling, clinical dashboards and forms that busy care teams can finish fast.

Web app design services

Not just screens, The Logic Behind Them.

Not just screens, The Logic Behind Them.

Not just screens, The Logic Behind Them.

01

Product discovery and flows

We map the jobs your app has to do, the people doing them and the paths between, so the screen list comes from real tasks instead of a feature wish list.

02

Dashboard and data UI

Tables, filters, charts and detail views designed for the volume of data you actually have, so dense screens stay readable when the records pile up.

03

Design system and components

Type scale, color, spacing and components built as tokens and variants in Figma, so the twentieth screen costs a fraction of the first.

04

Prototypes for testing

Clickable prototypes of the flows that matter, so you can watch someone use it and fix the confusing step before engineering builds it.

05

Engineering handoff

Specs, assets, tokens and redlines your developers can build from, with the edge cases written down instead of left to interpretation.

06

States and accessibility

Empty, loading, error, partial and permission states designed up front, with contrast, focus order and keyboard paths checked against WCAG 2.2 AA.

07

Design QA during build

We review builds against the designs while they are being written, so spacing, states and motion land correctly instead of being logged as bugs later.

08

Roles, permissions and multi-tenancy

Admin, manager and viewer views designed as one system, so what each role can see and do is settled in design rather than discovered in QA.

09

AI UX patterns

Review states, confidence, guardrails, human override and the moments a person has to approve or undo what the model did. The patterns that make an AI feature trustworthy rather than clever.

10

Undoing UX debt

Years of shipping made simple tasks harder than they should be. We simplify what already exists, screen by screen, rather than asking you to rebuild the product.

Product discovery and flows

We map the jobs your app has to do, the people doing them and the paths between, so the screen list comes from real tasks instead of a feature wish list.

Dashboard and data UI

Tables, filters, charts and detail views designed for the volume of data you actually have, so dense screens stay readable when the records pile up.

Design system and components

Type scale, color, spacing and components built as tokens and variants in Figma, so the twentieth screen costs a fraction of the first.

Prototypes for testing

Clickable prototypes of the flows that matter, so you can watch someone use it and fix the confusing step before engineering builds it.

Engineering handoff

Specs, assets, tokens and redlines your developers can build from, with the edge cases written down instead of left to interpretation.

States and accessibility

Empty, loading, error, partial and permission states designed up front, with contrast, focus order and keyboard paths checked against WCAG 2.2 AA.

Design QA during build

We review builds against the designs while they are being written, so spacing, states and motion land correctly instead of being logged as bugs later.

Roles, permissions and multi-tenancy

Admin, manager and viewer views designed as one system, so what each role can see and do is settled in design rather than discovered in QA.

AI UX patterns

Review states, confidence, guardrails, human override and the moments a person has to approve or undo what the model did. The patterns that make an AI feature trustworthy rather than clever.

Undoing UX debt

Years of shipping made simple tasks harder than they should be. We simplify what already exists, screen by screen, rather than asking you to rebuild the product.

AI speeds up execution. Product Judgment Stays Human.

AI speeds up execution. Product Judgment Stays Human.

AI speeds up execution. Product Judgment Stays Human.

Illustration of a designer working on a laptop in a dark office at night

Claude wireframes before UI

We share a Claude wireframe and a moodboard before any UI, so the flow is agreed before anyone picks a color.

Illustration of a designer working on a laptop in a dark office at night

Claude wireframes before UI

We share a Claude wireframe and a moodboard before any UI, so the flow is agreed before anyone picks a color.

Illustration of a designer working on a laptop in a dark office at night

Claude wireframes before UI

We share a Claude wireframe and a moodboard before any UI, so the flow is agreed before anyone picks a color.

Screen variants at scale

Once the core screens are approved, components and variants produce the long tail, from settings to empty states, without redrawing each one.

Screen variants at scale

Once the core screens are approved, components and variants produce the long tail, from settings to empty states, without redrawing each one.

Screen variants at scale

Once the core screens are approved, components and variants produce the long tail, from settings to empty states, without redrawing each one.

Our designers, in your Slack

Our designers, in your Slack

Our designers, in your Slack

The designers who draw your screens join your Slack or Teams. Questions go straight to the people doing the work.

The designers who draw your screens join your Slack or Teams. Questions go straight to the people doing the work.

The Rango team in Rango t-shirts
Illustration of a phone screen built from page layout blocks

Figma to a build-ready system

Approved screens become tokens, components and variants your engineers can build from, rather than flat images to measure by eye.

Illustration of a phone screen built from page layout blocks

Figma to a build-ready system

Approved screens become tokens, components and variants your engineers can build from, rather than flat images to measure by eye.

Illustration of a phone screen built from page layout blocks

Figma to a build-ready system

Approved screens become tokens, components and variants your engineers can build from, rather than flat images to measure by eye.

Illustration of a laptop on a desk at night showing a chat interface

Prototypes you can click

Every flow ships as a clickable prototype, so you review the real path through the app before it is built.

Illustration of a laptop on a desk at night showing a chat interface

Prototypes you can click

Every flow ships as a clickable prototype, so you review the real path through the app before it is built.

Illustration of a laptop on a desk at night showing a chat interface

Prototypes you can click

Every flow ships as a clickable prototype, so you review the real path through the app before it is built.

Choosing a web app design partner

Rango

Dev shop

Design agency

Choosing a web app design partner

Rango

Dev shop

Design agency

What It Costs

What It Costs

Fixed-scope builds from $1,500.

Fixed-scope builds from $1,500.

Hourly billing that grows with scope.

Hourly billing that grows with scope.

A design fee, then a separate build.

A design fee, then a separate build.

Time To Launch

Time To Launch

Six to eight weeks for a focused app.

Six to eight weeks for a focused app.

Whenever it clears their backlog.

Whenever it clears their backlog.

Design first, then a build queue.

Design first, then a build queue.

Who Builds It

Who Builds It

Designers and engineers in one team.

Designers and engineers in one team.

Engineers working from a spec.

Engineers working from a spec.

Designers, with developers bolted on.

Designers, with developers bolted on.

How It Starts

How It Starts

Wireframe and moodboard, signed off first.

Wireframe and moodboard, signed off first.

A ticket list and an estimate.

A ticket list and an estimate.

Rounds of mockups before any code.

Rounds of mockups before any code.

A Change Across Forty Screens

A Change Across Forty Screens

One component change, reviewed once.

One component change, reviewed once.

Quick, once it gets prioritized.

Quick, once it gets prioritized.

Forty mockups, then forty builds.

Forty mockups, then forty builds.

After Handoff

After Handoff

Your team ships from the system.

Your team ships from the system.

Every screen becomes a ticket.

Every screen becomes a ticket.

Screens wait for a redraw.

Screens wait for a redraw.

Who You Talk To

Who You Talk To

The makers, first call to last.

The makers, first call to last.

A project manager relays it.

A project manager relays it.

An account lead, then the developers.

An account lead, then the developers.

Working Hours

Working Hours

Feedback answered in agreed overlap hours.

Feedback answered in agreed overlap hours.

One round trip a day.

One round trip a day.

One time zone, not always yours.

One time zone, not always yours.

Strategy And Copy

Strategy And Copy

Positioning and copy come first.

Positioning and copy come first.

Bring your own copy.

Bring your own copy.

Copy is often an add-on.

Copy is often an add-on.

Where The Files Live

Where The Files Live

Your Figma, from the first file.

Your Figma, from the first file.

Their files until handover.

Their files until handover.

Wherever their designer set it up.

Wherever their designer set it up.

Screens that hold up outside the happy path.

Screens that hold up outside the happy path.

Screens that hold up outside the happy path.

We design to WAI-ARIA Authoring Practices for complex components and WCAG 2.2 AA for contrast and focus, then check keyboard paths, focus order and screen reader labels before handoff.

We design to WAI-ARIA Authoring Practices for complex components and WCAG 2.2 AA for contrast and focus, then check keyboard paths, focus order and screen reader labels before handoff.

  • Data tables and filters

  • Role-based views

  • Analytics event mapping

  • WCAG 2.2 AA accessibility

  • GDPR and CCPA consent setup

  • CRM and analytics wiring

  • Onboarding and empty states

  • Icon and asset export

  • Reusable Figma components

  • Design QA during build

  • Empty, loading and error states

  • Design tokens for engineering

  • Dark mode support

  • Clickable prototype per flow

Tools we use

The stack we design web apps with.

The stack we design web apps with.

The stack we design web apps with.

We design in Figma, use Claude and Cursor to draft flows and check how a screen will build, and document every component in Storybook, so engineering starts from parts that are already agreed.

Figma logo

Figma

Paper logo

Paper

Rive logo

Rive

Claude logo

Claude

ChatGPT logo

ChatGPT

Cursor logo

Cursor

Storybook logo

Storybook

GitHub logo

GitHub

React logo

React

Next.js logo

Next.js

TypeScript logo

TypeScript

Tailwind CSS logo

Tailwind CSS

Vercel logo

Vercel

Mixpanel logo

Mixpanel

Hotjar logo

Hotjar

Slack logo

Slack

Engagement Models

Ways To Work With Rango.

Staff Augmentation

Web app designer (3 to 4 yrs)

Daily async updates, weekly live reviews

1 week trial

Fixed-Scope Build

A defined product, module, workflow or MVP with a clear outcome

Weekly progress reviews

2-FOLD TRIAL

Monthly Partnership

Continuous features, UX improvements and design system work

Asynchronous updates + fast turnarounds

8 HOUR TRIAL

Frequently asked questions

Straight Answers. No fluff.

How long does it take to design a web app?

Six to eight weeks for a focused web app, from flows to engineering handoff. How many core screens you have, how much research is needed, and how complex the data and permissions are all move that. On the scoping call we will tell you which timeline your project fits.

How much does web app design cost?

Fixed-scope projects start at $1,500, and the final number depends on scope. What moves it: how many screens and flows you need, how complex the data and permissions are, how much research is involved, and whether you want a design system your team can extend. We contract in USD.

Do you design dashboards with real data volumes?

Yes. We design tables, filters and charts against the record counts you actually have, not three tidy rows. That means pagination, sorting, bulk actions, long labels, and the empty, partial and error states that only show up once real data lands.

Do you build the web app as well, or only design it?

Design is what we do here. We hand off to your engineers with specs, assets, tokens and the edge cases written down, and we stay on through design QA so the build matches the screens. If you also need the front end built, that is a separate conversation.

Do you design AI-native products?

Yes. It is a large and growing part of our work. AI can draft, recommend and act, but people still need visibility, approvals, exceptions and a way to undo. We design the review states, confidence signals, guardrails and human override that decide whether a team trusts the feature enough to leave it switched on.

Can you work with our existing app and design system?

Yes. We often start inside an existing product. We work in your Figma, follow your tokens and components, and extend the system rather than replacing it, so new screens sit beside the old ones without looking bolted on.

What do we actually receive at handoff?

A Figma file with flows, screens and states, a component library with tokens and variants, clickable prototypes of the main flows, exported assets and icons, and written notes covering the edge cases. Your engineers should not have to guess or measure by eye.

Who owns the design files?

You do. The work lives in your Figma from the first file, IP is assigned to you, and the flows, components and prototypes stay with your team after the engagement ends.

Can a US company work smoothly with a team in India?

Yes. We work in your time zone, so feedback turns around in hours, not a day later. Contracts are in USD, IP is assigned to you, and MSAs and NDAs follow the terms US companies expect. The designers who build your app stay on the project, with no account manager in between.

Can you work on one workflow or module?

Yes. A single workflow, one module or a specific problem area is a normal way to start, and usually the best one. It is a defined scope with a clear outcome, so you see how we work before committing to a full redesign. Most clients who start with one workflow carry on into the wider product.

If you’re considering
Working Together