Concept project · UI/UX · Design system
Orbit Analytics
A self-initiated concept examining the gap between how SaaS products are marketed and how they actually look after signup. Orbit Analytics is an invented company; nothing here is client work and no results are claimed.
Orbit Analytics
- Type
- Concept project
- Industry
- B2B SaaS analytics
- Disciplines
- UI/UX · Design system
- Year
- 2026
Overview
A self-initiated concept examining the gap between how SaaS products are marketed and how they actually look after signup. Orbit Analytics is an invented company; nothing here is client work and no results are claimed.
Business challenge
Marketing sites illustrate the product; the product ships something else. Trials then begin with a small disappointment, and pricing pages built as comparison walls make buyers estimate their own bill and guess high.
Business goal
Raise trial-to-paid conversion by making pricing legible and showing the real product rather than an illustrated version of it.
Research
- Audited fifteen analytics pricing pages; most required arithmetic the buyer could get wrong.
- Reviewed trial drop-off patterns and found the empty dashboard as the common abandonment point.
- Interviewed the questions sales teams answer most: cost at scale, data limits, migration effort.
Wireframes
- Pricing modelled two ways — comparison table versus usage calculator — and tested for confidence, not preference.
- Onboarding sketched to reach a populated dashboard before any card details are requested.
- Documentation shell wireframed around search first, navigation second.
Design decisions
A single token set spanning marketing and application UI: identical type scale, spacing and states, so the two surfaces cannot drift apart.
- One token source of truth consumed by both the marketing site and the app shell.
- Product screenshots rendered from live components, so they cannot become out of date.
- Empty states designed as a first-class screen rather than an afterthought.
UX strategy
Pricing modelled with a usage calculator instead of a comparison wall, and an onboarding path that reaches a populated dashboard before asking for card details.
Features
- Usage-based pricing calculator
- Interactive product tour built from live components
- Shared component library across site and app
- Documentation search with keyboard shortcuts
Technology stack
- React
- TypeScript
- Tailwind CSS
- Design tokens
SEO considerations
Comparison and integration pages targeting evaluation-stage searches, SoftwareApplication schema, canonical handling for paginated docs.
- Integration and comparison pages built as templates so the long tail scales without duplicate content.
- SoftwareApplication and Offer schema kept in sync with the pricing calculator's own data.
- Canonical and pagination rules set for documentation to prevent index bloat.
Performance strategy
- Route-level code splitting so the marketing site never loads dashboard bundles.
- Documentation search index loaded on interaction rather than on page load.
- Component-rendered screenshots served as static assets at build time.
Responsive strategy
- The pricing calculator becomes a stepped mobile flow instead of a compressed table.
- Dashboard shell collapses to a prioritised single-column view with the primary metric first.
- Documentation navigation converts to a searchable sheet below the large breakpoint.
Accessibility notes
- Calculator inputs fully labelled, with results announced politely on change.
- Keyboard shortcuts documented, discoverable and disableable.
- Focus management verified across dialogs, sheets and the onboarding flow.
Expected business outcome
Fewer pricing questions in sales conversations and trials that begin with the buyer already knowing what they will pay.
Expected, not measured: this is a concept project with no client data behind it.
Gallery
Screen placeholders for the key views in this concept. Captions describe what each screen is designed to resolve.
- Marketing home
Live-component product imagery instead of illustration.
- Pricing calculator
A buyer reaches their own number without doing arithmetic.
- Dashboard shell
The same tokens, type scale and states as the marketing site.
- Docs search
Keyboard-first search with results ranked by task.
Next step
Tell us what the
site has to do
Send the goal, the deadline and a budget range. You will get a considered reply within one working day — including an honest answer if we are the wrong studio for it.