Brand & Product Design Lead · 2019 – 2022

Tilt

A microservice development toolkit for engineering teams that automates development environment setup and processes. Acquired by Docker.

Directed visual design, animation and brand guidelines for the rebrand, working alongside project managers and lead engineers on product development. The rollout covered collateral, marketing and the convention booth.

On the product side I created an interactive CLI interface for real-time status, logs and reports — applying interaction design to a surface that usually gets none — and oversaw the content and design of the marketing page, simplifying the user flows into one cohesive visual and UX experience.

Brand

A rebrand built around a wordmark that reads as both a logotype and a terminal cursor, rolled out across collateral, marketing and the convention booth.

The Tilt wordmark in green on white and reversed out of green
The wordmark — the cut corners read as a cursor tilting into the letterforms.
The Tilt T monogram and pinwheel mark, positive and reversed on green
The logo animation — the mark builds itself out of its own fragments.
Tilt conference t-shirts, front and back
Conference shirts — the wordmark front, the positioning line back.
Tilt business cards, three white and one green
Business cards — the green face carries a shell prompt instead of a logo.
Four feature cards — All in One, Faster Local Updates, Painless Debugging, Shareable Snapshots
Feature cards — each benefit carried by a single drawn idea rather than a paragraph.
An isometric hexagonal cluster of outlined cubes, one filled green
The whole stack, with one service picked out of the group.
A tight isometric cluster of solid colour cubes
The same cubes packed and colour-coded — the shorthand that runs through the marketing.

Landing Page

The full tilt.dev landing page
tilt.dev — the product framed by the pain it removes rather than by its feature list.
Diagram explaining how the Tiltfile, resource definitions and the Kubernetes cluster connect
“De-magic-ifying Tilt” — one of a set of diagrams that made the watch-and-rebuild loop legible to engineers evaluating the toolkit.
The full Tilt blog index, with topic filters and an illustrated post list
The blog — the same wordmark with a tag appended, and posts filed by topic so the writing reads as a body of work on microservice development rather than as company news.

Product

An interactive CLI and web interface for real-time status, logs and reports across every service in a microservice stack — one system, three densities, so the same information works whether you are watching one service or sixteen.

The Tilt interface with the resource sidebar open next to a live build log
Sidebar view — every resource and its status down the left, the selected build streaming its log on the right.
The Tilt resource overview as a grid of status cards
Grid view — the whole stack at a glance, colour-coded by build and runtime state.
The Tilt resource overview as a sortable table
Table view — the same resources sortable and filterable once the stack outgrows scanning by eye.

Dex

Dex — a developer-experience publication Tilt put out alongside the product, with its own identity so it read as a contribution to the field rather than as marketing.

The Dex landing page — “Developer Experience needs a perspective shift”
Two Dex video covers — “The Why of DevEx” and “Templating Solutions”
Video and article covers — a fixed grid and a swapped background per topic.
When you change the way you look at things, the things you look at change.— Wayne Dyer