Beacon FC
Blueshift · 2025 Design lead
Product design for data-heavy software, taken from first sketch to prototypes and design systems built in code.
Type:
Industry:
Fertilizer cost against yield
The dashboard compares each crop's projected gross with the plan, then compares fertilizer spending with the plan for each input.
Reviewing a brokerage account
Producers can filter positions and trades by direction, with a link from each position to its market.
Reading P&L per hundredweight
The chart and table use the same units, whether you're looking at total profit and loss, profit per head, or profit per hundredweight (CWT). The recording steps through each view.
Enrolling from a phone
Enrollment starts with the surgery date so reminders follow the right schedule. The welcome text takes the patient to their timeline.
Signing in and searching
Operators can search the production list for a job, see the matches, and clear the search in one tap.
Touchline
The prototype lets you plan training for six soccer academy players with one budget and limited coaching time. Each round gives you scores to work from in the next plan.
Ever.Ag Mobile
Foundry · 2022–24 Product design lead
Trading and coverage for dairy producers, on one phone.
How I built Sheets to Layers
A Figma plugin I built one weekend in between wrestling matches with my son.
Browsing orders on the map
Drivers can check an order's location and pay together. Selecting a map pin brings up its card, and swiping through cards highlights each location.
Planning crops by field
The field picker can hide fields that are already in a plan, and profit per acre updates as the grower makes their selections.
Text diff
Text diff marks the changes between two versions, side by side or in one column. Everything stays in the browser, so the text isn't uploaded.
Following the surgery date
The recording previews a video and checklist, then changes the surgery date. The milestones move with it.
Every plan ready for round three
Round three starts with the previous plans in place. Each player card shows spending and estimated development, and opens for editing.
Vidscrip
Foundry · 2021 Product design lead
Your doctor’s guidance, from preparation through recovery.
Filtering by vehicle
Drivers can filter orders by vehicle type, and the filter stays put when they open and close an order.
Welcome before sign-up
The welcome screen introduces the network with two colleagues connecting, then gives the new member one action: create a profile.
Editing a coverage quote
Producers can try different coverage levels with sliders. Saving the quote updates prices for each quarter.
Beacon FC, working prototype
The prototype shows what scouts are saying about each player, with links back to the source reports. Navi, the AI assistant, answers questions about what's on screen.
Round two, simulated
The recording confirms round two and shows the results, with the academy moving from fourth place to first.
Sentiment traced to its sources
Scouts can check the generated analysis against the source posts for each sentiment finding.
Conservis Maps
Foundry · 2016–21 Product design lead
Every field on the map, and the work recorded there.
From the home page to Spark
The studio's home page introduces its services and three offers. Choosing Spark opens the method and a fixed price.
SophConnect
Physicians can find an available specialist in the directory or save a missed call as a reminder to call back.
Aggregate's shifting polygons
Meagen Crawford's Aggregate puts each stanza on a translucent card, with colored polygons changing shape behind it as you scroll.
Activity Central
The prototype brings a family's activities, calendar, program details, and messages into one place.
Kardion's opening headline
I designed and built Kardion's marketing site in Framer. It opens with Every Moment and Massive Potential, one line at a time. Red and teal light trails turn behind the text.
Seven issues of Plinth
The tour works backward through Plinth's seven issues and opens one piece in each, showing the navigation and typography I designed for each issue.
Plinth
2014–19 Design · Typography · Build
A literary journal with a new design language every issue.
Description Generator
Edit Figma component descriptions in one place, or use AI to write a first pass. It works across a page or an entire file.
From working to overheating
The Alpha Cube display uses color, lighting, and rotation to show its status. The recording moves from normal operation to high usage, then overheating.
Pulse audit card
Pink particles gather over a halftone grid on the Pulse card, with labels showing example findings from a product audit.
Ownership calculator
The calculator compares a team's yearly cloud AI spending with buying Vault hardware, then recommends how many cubes they'd need.
Room Tone's rolling waves
Kristin Peterson's Room Tone puts two poems on cards that scroll over moving waves of color.
Sharing a photo, then calling
Physicians can open shared photos at full width without leaving the message thread. Completed calls appear in the same thread.
Conservis Platform
Foundry · 2016–21 Product design lead
Planned work and the budget behind it, acre by acre.
Program detail for one child
The program details put the practical information together: cost, available places, dates, and which child would attend.
Markdown ↔ rich text
The converter works both ways between Markdown and rich text, keeping the formatting and copying the result automatically.
Reading the map by layer
The recording moves from AG Bunston to the whole farm, then switches the map from crop colors to irrigation progress.
Surge, from prompt to dashboard
The Surge film goes from a typed prompt through generated screens to a finished dashboard.
Terminal Cannes, read in full
An oversized quotation sits behind Philippa Snow's Terminal Cannes as you scroll through the essay. After the last paragraph, the quotation starts moving slowly.
Light table reel trial
The trial reel puts the site's screens on a contact sheet, labeled by project. It enlarges ten projects in turn and plays a recording from each before starting over.
Ever.Ag Desktop
Foundry · 2022–24 Product design lead
A swine herd’s margins, from feed to market.
Navi compares two players
Navi compares Idris Falk and Mateus Oyelaran in a written summary, with paired charts for mention counts and sentiment.
A day fully covered
Parents can assign an uncovered pickup right from the calendar. Once someone is assigned, the card turns green.
A muted voice call
Mute and speaker sit together above a large end call button. The note below makes clear that the demo records nothing.
Design Audit Lab
Design Audit Lab shows four colored bands, from research to impact. The waves get less regular as scores fall, while a counter tracks the issues found.
Claiming order 4867
Drivers can open order 4867 with the route still visible on the map. One slide adds it to their assigned pickups.
Decoded
A WebGL effect adds noise to the edges of circular patterns around a word.
Touchline
Blueshift · 2025 Design lead
Building a winning squad within real constraints.
A Raft Manifest, read through a lens
Rem + Rom's A Raft Manifest uses dense manuscript pages, with a magnified strip that follows the pointer so you can read a few lines at a time.
Kinetic Violence
One striped layer rotates against another as the pointer moves. A measurement card shows the change in phase.
Cubes in one pool
Four cube markers appear one at a time and orbit a shared center to illustrate pooled computing resources.
Matching names before import
The import matches Bob to Bob Hansen before creating 1,265 tickets, keeping the driver name consistent across the records.
Raw Analysis Index
Twelve wireframe figures rotate in separate cells over an animated noise background.
Videos on the doctor's page
Patients can watch Dr. Bennett's videos by topic in a Vidscrip panel on her practice page.
Comparing and saving a shortlist
Adding a third player updates the combined analysis, and scouts can save the whole comparison as a named report.
Void Terminal
Four configurations appear beside a rotating outlined wordmark. Hovering over one shows a landscape photograph I took in a red band.
Charts at rest and on hover
Each chart sits beside its hover state so you can see how highlighted columns and dates use the same tooltip style.
Journal of Field Conditions
A vector grid, particle cloud, and wave pattern respond to the pointer, arranged as figures in a scientific journal.
Checking completed blocks
Growers can filter a work order's blocks by completion and record a spraying ticket from the same page.
Feed coverage by ingredient group
Each ingredient group gets its own monthly feed coverage chart, with a link to the details.
Poems About Moss, grown over
Dennis James Sweeney's Poems About Moss uses dark cards that scroll over green circles. The circles start collecting over the title as soon as the page loads.
Reading a field's records
The field boundary stays on the map while the grower opens the different sections of its records.
Coverage by quarter
Each quarter breaks down dairy production by milk class. Closed quarters show when they settled, and open quarters show how long coverage is still available.
Dark Moon
A dark sphere appears within slowly moving dashed orbits, with simulated startup messages in the corners.
The whole journey on a desktop
The desktop view puts the care phases side by side, with a link patients can share with a family member who's helping out.
Background tokens for four brands
Components use background names such as bg-brand-solid, with a color assigned for each brand. Designers can switch brands without rebuilding the screens.
Scrubbing a percentile chart
Producers can inspect dry whey prices by date or hide a series from the legend. The recording narrows the chart from a year to a month.
From a message to the calendar
A camp link in a message opens the calendar on the right day so a parent can check whether it fits.
Dual Portfolio
As you scroll, an irregular opening across the grid reveals a second portfolio design underneath.
A type scale in five weights
One typeface handles the hierarchy through size and weight. The examples run from Display 2xl to Text xs, each in five weights.
Submitting a round
The review puts shared resources and player plans against the same budget. A final dialog confirms the round before the simulation runs.
In Smithereens, set on triangles
Michael Thomas Taren's In Smithereens puts the poems on white sheets over small gray triangles. The triangles shift between white and black as you scroll.
Palettes on a shared tone scale
All eleven palettes use the same tone scale, from light 10 to dark 100, so designers can choose comparable shades across colors.
Format Red Cube
A red three.js shape rotates behind a split word on a studio's selected work index.
Maya Torres's player insights
Maya's insights page brings her training priority, preferences, and starting skill scores together. Coaches can plan her training from there.
Writing and playing a madlib
As you write, blanks marked with braces appear in the sidebar. Preview asks for each missing word, then puts the answers into the story.
Redeeming reward points
Drivers choose a dollar amount to redeem, and the earnings tab updates with the new payout balance.
Overture Dossier
Hovering over a case in the yellow index opens its report beside a grayscale photograph. I took the photos of mattresses left on the street.
Starting a ticket from scratch
For unplanned work, a new ticket asks for the field and equipment in separate steps. Each saved input appears in the list with its calculated total.
Icons for farms and markets
The icon library includes farm tanks and milk cartons for dairy and market software, each in duo and outline styles.
Editing a swine contract
Swine contracts expand in the list to show their terms and comments, while the status tabs keep a count of each group.
Spark Plug
The animation combines three noisy signals into one line and counts insights as the signals pass through.
Tags by size and meaning
The tag examples keep status and category colors separate. Status colors stay fixed, while categories use tone 30 from each palette.
Finding a new program
Program cards show dates and eligible ages. The detail page includes a calendar check so parents can see whether the program fits their week.
Search, with its sources
Search labels generated summaries and groups the source posts into tabs so scouts can check the answer.
Filing the last group
Filing the last of 44 hidden groups starts the completion animation. The final card shows the groups filed and the player's accuracy.
Creating a profile
Sign-up asks for contact details first, then practice details, so other members can find the new profile.
The Sports Corner
I rebuilt my first website, a sports fan page from 1998, from Wayback Machine captures. The guestbook and chat room work again, though anything you add stays in your browser.
Nothing matches both filters.
28 of 90 items