Atlas Field
A marketing site for field operations software, designed to explain a complicated product without a single abstract illustration.
- Type
- Concept project
- Sector
- B2B software
- Scope
- Design + build
- Year
- 2025
01Overview
What it is.
Atlas Field is a concept for software used by people in vans and on sites, not at desks. The product is genuinely complicated, and most sites in the category respond to that by saying nothing specific at all.
- Website Design
- Web Development
- Design System
02Challenge
The problem worth solving
Complex B2B products get marketed in abstractions — 'streamline your operations' over a gradient blob — because the specifics are hard to show. The specifics are also the only reason anyone buys.
- 01
Two audiences with opposite needs: an operations lead who wants proof, and a finance approver who wants the shape of the cost.
- 02
The product's value only becomes obvious when you can see the interface doing the work.
- 03
A long, considered buying cycle, so the site has to be useful on the fourth visit as well as the first.
03Strategy
The decisions taken first
Show the product. Then structure the site so each audience can go as deep as they need without the other one being lost.
Interface as the hero
Real screens, annotated, instead of decorative illustration — the fastest way to make a complex product legible.
Progressive depth
Every capability has a one-line version, a paragraph version and a full page. The visitor chooses the depth.
Pricing shape, early
Cost structure is explained before the demo request, because hiding it only filters out serious buyers.
04Design
How it was composed
A technical, precise system — tight grids, mono labelling, restrained colour — that borrows credibility from the product rather than from marketing polish.
Annotated screens
A consistent callout treatment turns product screenshots into explanations.
Mono as signal
Monospace reserved for data, labels and indices, giving the page a technical register without decoration.
Dense, not crowded
Information density is high by design, controlled with rules and alignment instead of whitespace alone.
05Development
How it was built
Server components throughout, with interactivity confined to the small number of places that genuinely need it.
Islands of interactivity
The feature explorer and the pricing calculator are the only client components on the marketing site.
Content as data
Features, plans and FAQs are typed configuration, so a copy change never touches a component.
Measured, not assumed
Interaction cost profiled on a mid-range Android, which is what the actual audience carries.
06Gallery
Screens from the concept.
Abstracted compositions rather than screenshots — these are concept builds, and a photorealistic mockup would imply a client site that does not exist.
07Outcome
What it produced.
Atlas Field is where we developed our approach to explaining technical products — the patterns here are the ones we reach for whenever the thing being sold is hard to summarise.
A progressive disclosure pattern
One page structure that serves a skimmer and a researcher without splitting into two sites.
Annotation system
A reusable way to make product screens self-explanatory, now part of our component library.
Interaction budget
Established the practice of profiling on low-end hardware before shipping anything interactive.
Technology
- Next.js
- TypeScript
- Tailwind CSS
- Vercel
Your project
Build something like this.
Send us the problem. We will come back with the structure we would use and what it would cost.