We plan the interface
before the interface
exists.

FORMHAVEN WORKS structures forms, dashboards, navigation, and interaction patterns so digital products are easier to understand and use.

Studio Est. 2026 1 Weeks in Operation

Canvas / Planning-01 Auto – Snap 8px – Scale 1:1 Form Selected
01 · Form
02 · Dashboard
03 · Navigation
04 · User Flow
05 · UI Pattern
06 · Error State
07 · Confirmation
01 / SIGNATURE

The interface
under construction

Structure → Interaction → Clarity. Scroll to watch an empty grid become a planned interface blueprint.

  • 01 — Content blocks placed
  • 02 — Navigation paths drawn
  • 03 — Form fields structured
  • 04 — Button states assigned
  • 05 — Dashboard widgets organized
  • 06 — Interaction paths connected
  • 07 — Documentation labels added
Blueprint / Untitled-Product 000% PLANNED
Form / Step 2 of 4
Field 1
Field 2
Field 3
Continue
M1
M2
M3
M4
← Secondary Detail →
← Primary Task Supporting Metrics →

03 / SERVICES WHAT WE PLAN

Four planning modules,
priced for real scope.

Each module produces documentation a development team can build from — wireframes, flows, states, and written specification. Expand a module to see what's inside.

Starting prices are estimates. Final pricing depends on interface complexity, number of screens, interaction depth, and documentation requirements.

04 / Exercise   Spot the Friction

Six deliberate mistakes.
Click the ones that bother you.

This is a fictional screen built with common interface problems. Select at least three, then rebuild it with structure applied.

Sandbox / Account-setup 0 / 6 Detected
Top Nav
Home Account Settings Reports Home Help
Side Menu
Overview
Settings
Billing
Settings
Signup Form
Name
Email
Phone
Company
Role
Team size
Industry
Country
How did you hear
Referral code
Notes
Dashboard
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Error State

Something went wrong.

Primary Action
Submit
Sandbox / Account-setup Planned Version
Top Nav / 4 Primary Destinations
Overview Reports Account Help
Signup / Step 1 of 2
Name
Work email

Everything else is asked after the account exists.

Dashboard / 7 Priority Metrics
Primary metric
Supporting 1
Supporting 2
Supporting 3
Supporting 4
Supporting 5
Supporting 6

The remaining 16 move to a detail view.

Error State / Explained

We couldn't save your details — the email address is already registered. Sign in instead.

Primary Action / Outcome Label
Create account
Annotations

Nothing selected yet. Tap anything in the screen that would slow a real user down.

Friction Detected / 01

Two menus, same destinations

Duplicated navigation makes people re-check where they are. One primary path per destination.

Friction Detected / 02

"Settings" appears twice

Repeated menu items usually signal two teams shipping into the same navigation without a shared map.

Friction Detected / 03

11-field signup form

Every field asks for something the product does not need yet. Fields that can be collected later belong later.

Friction Detected / 04

23 metrics, equal weight

When everything looks equally important, nothing reads as important. Hierarchy has to be decided, not averaged.

Friction Detected / 05

"Something went wrong."

An error without a cause or a next step is a dead end. Say what failed and what to do about it.

Friction Detected / 06

Button labelled "Submit"

The label describes the mechanism, not the outcome. A button should say what will happen next.

05 / Work    Selected Interface Plans

Selected interface studies
& early projects.

We opened three weeks ago, so this is an honest set: early client work and self-directed studies. Each is a case file, not a highlight reel.
Case File / FH-001 Form Experience

Multi-Step Service Form

Planning a clearer application/questionnaire experience.

01 Before
02 Wireframe
03 Planned Flow
A1
A2
A3
A4
A5
A6
Before
W1
W2
W3
Wireframe
01
02
03
04
Planned Flow
  • Reduced unnecessary interaction steps.
  • Grouped fields by what the applicant already knows.
  • Wrote validation and confirmation states for every step.
Case File / FH-002 Dashboard Planning

Operations Dashboard

Structuring a complex internal dashboard with multiple metrics.

01 Information Hierarchy
02 Navigation
03 Dashboard Layout
H1 — Primary
H2
H3
H4
H5 — Secondary
Information Hierarchy
Nav Sidebar
Content Area
N1
N2
N3
N4
Navigation
01
02
03
04
Dashboard Layout
  • Created clearer hierarchy between primary and secondary information.
  • Moved rarely used metrics into a detail view.
  • Defined one default view per operator role.
Case File / FH-003 Navigation Mapping

SaaS Navigation Study

Simplifying a software product's navigation structure.

01 Current Structure
02 User Flow
03 Proposed Structure
C1
C2
C3
C4
C5
C6
C7
C8
Current Structure
Entry Point
Flow A
Flow B
Flow C
Outcome
User Flow
01
02
03
04
Mapped
  • Made the navigation structure easier to understand.
  • Removed duplicated destinations across two menus.
  • Mapped each task to a single primary path.
Case File / FH-004 Pattern Documentation

UI Pattern Documentation

Creating reusable interface rules for a small digital product.

01 Component
02 States
03 Behavior
04 Specification
Component A
Component B
P1
P2
P3
Component
Default
Hover
Active
Error
Loading
Empty
States
Trigger → Action
Animation
Feedback
Exit Condition
Behavior
01
02
03
Specified
  • Documented behavior for shared components.
  • Described empty, loading, and error states in writing.
  • Gave developers one reference instead of scattered screenshots.

Six questions we ask before anything is drawn.

Hover or tap a question to highlight the part of the interface it governs. Most interface problems trace back to one of these six being left undecided.

  • 01 Content What information does the user need?
  • 02 Hierarchy What deserves attention first?
  • 03 Navigation Where does the user go next?
  • 04 Interaction What happens after an action?
  • 05 Feedback How does the system communicate success or failure?
  • 06 Consistency Does the interface behave predictably?
ANATOMY / SPECIMEN-B1 CONTENT HIGHLIGHTED
NAV-A NAV-B NAV-C
REPEAT
07 / METHOD

From mess to map

  1. 01 Understand Identify goals, users, information, and key scenarios.
  2. 02 Structure Organize content, fields, navigation, and interface hierarchy.
  3. 03 Map Create flows, wireframes, and interaction logic.
  4. 04 Refine Remove unnecessary steps and clarify confusing interactions.
  5. 05 Document Prepare patterns and specifications for development teams.
MANUAL
04 / FEEDBACK    EARLY FEEDBACK

Three weeks in.
Three honest notes.

We are not going to show you a wall of logos. These are the people we have worked with so far, in their words.

Form / Reviewed

"FORMHAVEN WORKS helped us understand why our form felt longer than it needed to be. Two steps came out and nothing was lost."

Marta

Owner, small insurance brokerage

Navigation / Mapped

"The navigation map made several problems obvious before development started. We changed the structure while it was still cheap to change."

Dan

Product lead, B2B scheduling tool

Pattern / Documented

"The documentation gave our developers a much clearer picture of how the interface should behave. Fewer questions in standup."

Priya

Founder, two-person software studio

09 / SCOPE
WHAT WE DON'T DO

A specification sheet
for our own scope.

FORMHAVEN WORKS plans and documents interfaces. We do not implement them. Knowing the boundary early saves everyone a conversation later.

OUT OF SCOPE / NOT PROVIDED
  • 01 software development
  • 02 website hosting
  • 03 payment processing
  • 04 cybersecurity services
  • 05 telecommunications services
  • 06 management of client information systems
IN SCOPE / DELIVERED
  • 01 structure
  • 02 usability
  • 03 interaction logic
  • 04 visual organization
  • 05 wireframes
  • 06 interface documentation
10 / Philosophy

The FORMHAVEN principles

01

Clarity over complexity

If users need instructions to understand the interface, reconsider the interface.

02

Structure before decoration

Visual polish works better when the underlying structure makes sense.

03

Feedback is part of the experience

Errors, confirmations, empty states, and progress indicators matter.

04

Plan before build

Good interface decisions are cheaper to make before development begins.

11 / Contact

What should the interface make easier?

Tell us what you're planning, where users get stuck, or which part of your interface needs structure.

Address 129 Pine St, Pineville, KY 40977
Form / Inquiry-01 Step 1 of 1 · 4 Fields
Required
Valid email required
Required
✓ Inquiry received — we'll be in touch soon.