Kelp.
An offline-first field survey app for the Coastal Ecology Collective
I designed and built a working mobile survey system that helps marine monitoring teams capture species data with gloves, glare, and zero signal. The product had to feel like paper in the hand and a database in the pocket.
Platforms
iOS · Android · Tablet
Team
2 designers · 3 engineers
My role
UX · UI · Prototype
Outcome
Pilot with 3 teams
Coast survey
Site 12B
Transect
Transect 4 — canopy count
Canopy density
Species present
01 — What the project was
A data product built for wet hands, bad signal, and scientific rigor.
The Coastal Ecology Collective is a marine monitoring organization with seasonal field teams working along a stretch of coastline where cell coverage is spotty and surveys happen during short tidal windows. Before this engagement, surveyors used a fragile chain of paper sheets, phone photos, voice memos, and late-night spreadsheet reconciliation.
My job was to turn that messy reality into a usable mobile product: an offline-first survey app that reduces transcription, improves data consistency, and still feels fast, calm, and respectful of the people doing the work.
I led discovery interviews, interaction design, the visual system, and a production-minded prototype in React Native, then ran a 6-week pilot with three monitoring teams.
“Treat the interface like a tide table: legible, predictable, and trustworthy under pressure.”
The design principle I returned to most often
02 — The problem
The field was ahead of the software.
Scientists had precise methods, but the tools used to capture that precision were informal, slow, and error-prone. The challenge was not adding more features; it was removing friction from a process that had been overcompensating for unreliable technology.
Constraint 1
No reliable signal
Teams surveyed in coves, harbors, and offshore paths where “connecting later” was the norm. Existing mobile forms failed at the worst possible moment: after the survey.
Constraint 2
Paper was the source of truth
Surveyors wrote everything down, then typed it again at night. That second pass introduced typos, duplicated rows, and lost confidence in the data.
Constraint 3
Taxonomy drifted
Field names varied by region and by person. “Giant kelp,” “Macrocystis,” “large kelp,” and local shorthand all entered the same research pipeline.
The real goal
Help field teams produce cleaner scientific data in the moment, not just a prettier form. The product had to earn trust by behaving predictably when conditions were hostile and time was short.
03 — Goals & principles
Four rules that guided every screen.
01
Save locally first
The user’s action should never wait for the network. Saving a survey must be possible in airplane mode, underground, or on a ferry with one bar of signal.
02
Be readable at noon
If a surveyor cannot read the screen while wearing wet gloves and standing in direct sunlight, the interface is wrong regardless of how elegant it looks in a portfolio shot.
03
Ask only what helps
Conditional logic had to be strong enough that irrelevant fields disappeared, but transparent enough that the team still trusted the resulting record.
04
Structure as a side effect
Good design should make correct data entry feel natural. Structured, reusable datasets should emerge from the flow, not from a backend cleanup project.
04 — Process
A tight loop built on field reality, not assumptions.
The work happened in short cycles: observe, model, prototype, simplify, test again with the same people who would actually use it.
-
1
Week 1–2 · Discovery
I joined four survey mornings
Interviews were useful, but observation changed the priorities. One surveyor explained that the paper clipboard stayed on because “the paper never asks me to wait for a spinner.” That became the core insight: reliability, not novelty, would define adoption.
12 interviews 4 tide-window sessions Current-state mapping -
2
Week 3 · Modeling
I mapped the messy vocabulary into a usable taxonomy
Instead of forcing a rigid scientific dictionary into a tiny picker, I grouped species by what the field team actually saw: canopy-forming, understory, drift, encrusting, and recent species from the same site. That made the interface feel local and fast while still producing standardized values.
Species taxonomy Recent-use patterns Data dictionary -
3
Week 4–5 · Interaction design
I prototyped against daylight and gloves first
The first test screens were drawn on the back of actual tide charts and reviewed outdoors. We evaluated tap targets, label weight, and spacing under glare before worrying about shadows or microinteractions.
Paper prototypes Glare testing 48px touch targets -
4
Week 6–7 · Build
I built a working offline prototype
A clickable prototype was useful, but the product needed proof of behavior. I implemented local drafts, conflict-safe sync states, and a simplified data model so engineers could evaluate feasibility without guessing.
React Native SQLite drafts Sync queue UI -
5
Week 8–9 · Pilot
I ran a three-team pilot with weekly fixes
During the pilot, the interface got more restrained every week: more defaults, fewer confirmation steps, and clearer error language. The biggest shift was not visual polish—it was removing anything that slowed the most important action.
3 teams 18 surveys 4 design revisions
05 — Craft & decisions
The interface had to disappear into the work.
Every screen was designed around a single question: does this make the user’s job faster, safer, or more accurate—or does it only make the software easier to build?
Location
Site 12B · Harbor side
Canopy density
60%Notes
Young growth near eastern transect. Strong current; sampling delayed 12 min.
Capture the moment, then move on.
The first screen was reduced to the fewest controls possible. Site context is pre-filled, inputs are grouped by meaning rather than database structure, and the “save” state is always visible so users do not need to interpret whether their work is safe.
-
Large numeric steppers make density estimates faster with gloves than a hidden keyboard.
-
Inline context keeps the site and transect on screen instead of hiding it behind navigation.
-
Clear draft affordance communicates “this record exists” without a modal interruption.
Design note: the form was tested under direct sunlight before any dark-mode treatment was approved.
Species present
Giant kelp
Macrocystis pyrifera
Bull kelp
Nereocystis luetkeana
Sea lettuce
Ulva spp.
A taxonomy picker grounded in field language.
Free-text entry looked simple, but it created a downstream mess. The picker constrains data entry to a curated taxonomy while still feeling quick by using recent selections, common names first, and a visible scientific name for confidence.
Common name first
Reduces hesitation for seasonal staff.
Latin shown second
Reassures expert users and supports research rigor.
Recent species
Makes the second survey of the day much faster.
Survey 044
ReadySurvey 047
QueuedPhoto attachment
Paused8.4 MB · waiting for connection
Local database safe
Drafts remain on device even if the session crashes. Sync only uploads when a stable connection is detected.
Offline was not an edge case; it was the product.
The sync screen exists to remove uncertainty. Users see what has been captured, what is waiting, and what will upload next—without being punished for a lack of connectivity.
Surface local state before network state
Never make sync feel urgent if the user is already safe
Make failure states calm, specific, and recoverable
Key design decisions
Local-first before cloud-first ⌄
Context
Cloud-first prototypes felt modern but created uncertainty during pilot runs when connections dropped mid-save.
Decision
Make local storage the default, then sync opportunistically. The user’s action is acknowledged immediately, not after the network succeeds.
Result
Zero lost drafts during the 6-week pilot, and surveyors became more willing to complete records in the field instead of deferring to night.
High-contrast daylight mode before dark mode ⌄
Context
Dark mode looked premium, but most surveyors worked on shorelines at midday with glare on the screen.
Decision
I built the daylight-first surface around high-contrast type, generous spacing, and strong figure/ground separation, then added dark mode later as a preference.
Result
Surveyors could read values at arm’s length without removing sunglasses, and the team asked for fewer “what did I enter?” confirmations.
Constrained species entry instead of free text ⌄
Context
The original request was a simple notes field because “people are faster with typing.” But that shifted data cleanup cost into research time.
Decision
I designed a curated picker with common names first, Latin second, recent species surfaced, and only one free-text escape hatch for rare cases.
Result
Typos and spelling variants dropped sharply, and analysts could compare records across sites without normalizing dozens of handwritten variants.
Visual system & component craft
The visual language is deliberately calm: sea-inspired neutrals, a bioluminescent accent for action and status, and a typographic hierarchy that stays legible under stress.
Color tokens
Ink
#0B1F22
Tide
#084C5B
Biolum
#68F0D1
Coral
#FF6B5A
Typography
Display serif
Canopy
Interface sans
Save locally, then continue
Technical mono
site_id: “12B” · sync_state: “queued”
Component patterns
Input
Search species or site
06 — Outcomes
The pilot changed the work, not just the workflow.
The biggest measure of success was not “people liked the screens.” It was whether teams produced cleaner data faster and felt more confident in what they captured.
97%
faster field-to-clean dataset
From a multi-day reconciliation loop to same-day usable records.
25 pts
fewer incomplete records
Incomplete records dropped from 31% to 6% after conditional logic shipped.
92%
weekly active teams
Three pilot teams continued using the app during subsequent survey windows.
| Metric | Before | After pilot | Change |
|---|---|---|---|
| Field to clean dataset | ~4 days | ~3 hours | −97% |
| Incomplete records | 31% | 6% | −25 pts |
| Species spelling variants | 148 unique | 36 unique | −76% |
| Manual re-entry | Required nightly | Eliminated | −100% |
“Kelp is the first tool our seasonal field staff actually asked to keep using after the pilot.”
Takeaways I carry forward
-
Start with constraints, not screens.
The hardest requirements usually reveal the real product definition.
-
Make failure states visible in daylight.
A system is only trusted when its uncertainty is communicated clearly.
-
Prototype behavior, not just layout.
For offline-first work, data lifecycle is part of the interaction design.
Next step
I build products that need to survive real conditions.
If your work sits at the intersection of complex data, physical environments, or hard operational constraints, I can help you move from fuzzy requirements to a tested, buildable product direction.
Currently available for