Service — Web app design for SaaS that has to scale beyond the first ten screens.
Web app design is the work of shaping software that lives in the browser, multi-role, state-heavy, data-dense, and used every day for hours. Different problem from marketing-site design, different problem from native mobile, different toolset from both.
Lumixel Studio designs web apps for SaaS, fintech, healthcare, cybersecurity, and B2B software companies. We work with teams whose product has moved past the first ten screens and has to stay coherent as it grows to the next hundred, across workflows, user roles, permissions, and platforms.
Lumixel designs complex web applications, multi-role, data-dense, state-heavy SaaS, in 6-week senior-led sprints from $10K to $50K+, with engineering-ready Figma at handoff.
01 / 12
What web app design actually covers.
Most agencies that say “web design” mean marketing-site design, landing pages, brochureware, lead capture. Web appdesign is a different problem. It's the design of software that:
- Has state. Forms, drafts, in-progress uploads, partial saves, undo, optimistic UI.
- Has multiple user roles. Admin, end user, viewer, customer, internal ops, each seeing different views, different permissions, different actions.
- Handles data. Tables, charts, filters, drill-downs, exports, real-time updates.
- Has edge cases. Empty states, error states, loading states, permission-denied states, rate-limit states. The 80% of design work that decides whether a product feels solid.
- Lives across surfaces. A web app, an admin console, sometimes a paired mobile app, all sharing one design system.
If your project is a brochure site, we're not the right team, we'll point you at people we trust. If it's software that customers use for hours a day, this is what we do.
02 / 12
Where most web apps quietly fall apart.
The first version of a web app usually ships fast. Ten screens. One user role. Happy path only. It works.
Then it grows. New role. New permission model. New workflow that's 80% the same as the old one but with a different button order. Six months later, the app has forty screens that look like seven different products. Bug reports come in for edge cases nobody designed. Onboarding takes longer because the IA can't hold the new features. Engineering velocity drops.
The fix isn't prettier UI. It's structural: shared IA, shared component primitives, shared rules for how new flows get added. That's what a sprint with us produces.
03 / 12
How we approach web app design.
A 6-week sprint, three phases:
Week 1 is structural. We map the IA, define the role and permission model, catalogue the edge cases, and set the system foundation. Friday demo, real go/no-go boundary.
Weeks 2–5 are execution. High-fidelity screens for every primary flow. Every state. Every variant. Tables, charts, modals, drawers, forms. Friday demos every week.
Week 6 is handoff. Engineering-ready Figma, component library, decision log, design principles, and a walkthrough with your engineering team.
For larger products, sprints stack. A Pro engagement is two sprints (12 weeks) covering web + admin + paired mobile.
04 / 12
What you get on Friday of Week 6.
- Engineering-ready Figma , component-based, tokens wired through, variants for every state.
- Multi-role surfaces covered: admin, end user, viewer, whatever your product needs.
- State coverage , empty, loading, error, permission-denied, rate-limited, success, partial-success.
- Tables, charts, and data-dense patterns with rules for density, filtering, sorting, exporting, drill-down.
- Cross-surface system if your web app pairs with an admin console or mobile app.
- Decision log and design principles.
05 / 12
Recent web app design work.
- Karaz Health, web app for diabetes care across Saudi hospitals. Four clinical roles (Doctor, Nurse, Educator, Patient) from one component set. Healthcare, regulated.
- FePay, payments web app with KYC, multi-role permissions, and compliance surfaces. Fintech.
- Benchmark, fintech SaaS web app where the engagement was as much design system as feature work.
- Ideaclouds, productivity web app with deep keyboard-driven UX.
Full list on selected work.
06 / 12
Inside the 6-week web app design sprint.
The day-by-day shape of a typical web app design engagement:
Week 1, Day 1, Kickoff. Half-day with your founders, product leads, and engineering leads. Walk through the current web app live, including the admin surface if there is one.
Week 1, Days 2–3, IA, role model, state catalogue. Map every primary user role, every primary flow, and cataloguing every state we'll design for (loading, empty, error, permission-denied, partial-data, rate-limit, success, etc.).
Week 1, Day 4, Component foundation decisions. Token system, primitive library decisions, framework choices (shadcn, Radix, custom). Engineering in the room.
Week 1, Day 5, Friday demo and go/no-go.
Weeks 2–5, Execution. High-fidelity screens for every primary flow, every role, every state. Tables, modals, drawers, forms. Friday demos every week.
Week 6, Handoff. Engineering-ready Figma, component library, decision log, design principles. Two-hour walkthrough with engineering team.
07 / 12
Every state we design for.
Most web app rough edges live in the states that weren't designed. We catalogue and design every state per flow:
- Empty. The first-day-of-a-new-customer state. Designed as a product surface, not as a placeholder. Guides the user toward first meaningful action.
- Loading. Skeleton screens for predictable content shapes. Spinners only where shape is unknown. Optimistic UI where the operation is likely to succeed.
- Partial-data. Some content loaded, some still loading. Don't block the user from acting on what's already there.
- Error. Specific error messages with recovery paths. Never a stack trace, never a generic “something went wrong.”
- Permission-denied. Explain what would be needed to do this action, or who in the team can. Never silently fail.
- Rate-limited. Tell the user when they can retry. Show what counts against the limit.
- Success. Quiet confirmation. Toast or inline state change. No celebration animations for the hundredth-time user.
- Stress. The largest customer with the most data, the 10, 000-row table state, the 500-item list, the decade-of-history dashboard. Designed deliberately, not encountered by accident.
08 / 12
Multi-role web app architecture patterns.
Most non-trivial web apps have at least three roles: end user, admin, and viewer. The patterns that hold up at scale:
- Role-aware components, not role-aware pages. The same screen renders for different roles with controlled differences in what shows. Cleaner than building separate pages per role.
- Permission visibility. Greyed-out actions explain why they're disabled. Show what the user could do if they had the role for it.
- Admin as a first-class surface. Same polish bar as customer-facing. Same component library. Same design system.
- Audit visibility. Every entity has a history; every action has an actor. Audit isn't hidden in debug screens.
- Role switching for designers. A “view as” capability for ops and support teams to see what customers see, including their own role's actions disabled.
09 / 12
Web app design vs marketing site design.
These two disciplines get conflated. They're different problems with different deliverables.
Marketing sites care about conversion. Hero, value props, social proof, pricing, call-to-action. Optimised for first-touch reading. Page-by-page narrative. Static content with light interaction.
Web apps care about workflow efficiency. IA, role model, state coverage, data density, edge case handling. Optimised for the user who returns daily for hours. Component-driven architecture with continuous state.
A web app design engagement produces a Figma file with hundreds of screens (every state, every variant, every role). A marketing site engagement produces five to fifteen high-conversion pages. Different scope, different deliverables, different agencies usually, and the agencies good at one are rarely good at the other.
We design web apps. For a marketing site, we'll point you at people we trust.
10 / 12
Recent web app design work.
Karaz Health. Web app for diabetes care across Saudi hospitals. Four clinical roles (Doctor, Nurse, Educator, Patient) from one component set. Healthcare, regulated, web plus paired mobile.
FePay. Payments web app with KYC, multi-role permissions, and compliance surfaces. Fintech, regulated vertical. Customer-facing plus admin plus compliance officer surfaces.
Benchmark. Fintech B2B SaaS web app where the engagement was as much design system as feature work. Component foundation built for monthly release cadence without fragmenting.
Ideaclouds. Productivity web app with deep keyboard-driven UX. Power-user shortcuts, command menus, opinionated density defaults.
Full case studies on selected work.
11 / 12
Tooling: Figma → React handoff practices.
The web app design lands in code. Our practices are built around what React engineering teams actually need:
- Component-based Figma. Every primitive in the Figma library maps 1:1 to a React component your team will build. Variant structure mirrors prop structure.
- Token-driven everything. Colour, spacing, type, radius, motion all defined as tokens. Exportable to CSS variables, Tailwind config, or whatever your stack uses.
- shadcn-aware design. Where your team uses shadcn/Radix/Material, we extend the underlying primitive library rather than rebuilding. Faster to ship, easier to maintain.
- Figma Dev Mode optimised. Semantic layer names, token references visible, spacing measurable directly. Cuts engineering clarification calls dramatically.
- Engineering walkthrough. Two hours live at Week 6, recorded as Loom. Covers IA, system rules, and the “why” behind trade-offs.
12 / 12
Pricing for web app design.
Fixed-fee sprints. Web app engagements typically sit in Standard or Pro:
- Lite, $10K–$15K. Single platform, single role web app. Suitable for early-stage products or focused feature work.
- Standard, $15K–$30K. Multi-role web app or web + admin pairing. Cross-surface design system.
- Pro, $30K–$50K+. Web + admin + paired mobile. Full design system. Compliance modelling for regulated verticals.
Above $50K is a custom retainer. Full pricing on the homepage.
FAQ — Common questions about Web App Design.
Related — Keep reading.
Related services
Industries we design for
Talk to us — Have a project that needs this?
Book a 30-minute discovery call. Free. No slides, no sales.
Book a discovery call