What we learn along the way

Notes on engineering, research and building a company.

← All articles

Designing Woodpip for a few quiet minutes

A wooden games box became the starting point for Woodpip. Its materials, movements, difficulty levels and shared games grew from the same small promise: classic games and a worthy opponent, a few minutes at a time.

Chapters

A few spare minutes are a useful constraint for a product. Someone should be able to arrive, take a turn and leave again. The game should remember where they were. A finished game should feel like something they played, with a position and a result worth showing someone else.

We built Woodpip around that idea. It brings Four in a Row, Five Dice, Reversi and Backgammon into a small games site, against an opponent also called Woodpip. The invitation is simple: “Classic games and a worthy opponent, a few minutes at a time.”

The brief gave us six values: timeless, calm, brief, fair, crafted and private. Those words became useful when they started settling decisions. What should the pieces look like? What should happen when you close the tab? How much should the site tell you about the technology behind the other player?

A games box, taken apart

The design started with a wooden games box. Its materials offered a vocabulary: walnut and birch, felt and paper, brass fittings, ink on a score pad. Each suggested a way to bring the familiarity of a physical game onto a screen.

We explored three directions, each built around a different part of the box. Walnut & Baize took the lid and tray: dark wood, felt and brass. Ink & Scorepad took the paper inside: blue-black ink, spare marks and a single red accent. Birch & Paint took the pieces: pale wood and painted beech in a few strong colours.

Each direction had the same work behind it: a logo sketch, palette and contrast checks, type, phone screens, share cards and a voice. Comparing the same screen made the differences easier to judge.

Three early Woodpip menu proposals: A uses dark wood and felt, B a paper list, and C coloured game cards. C is marked as chosen.

Three early directions for the same menu. C, Birch & Paint, was chosen and refined into the site. These are design proposals; some details changed before launch.

Birch & Paint felt warmer than the dark-wood direction and less clinical than the paper one. It also gave us a small idea that could travel: the pip. Pips belong on dice and game pieces; five dark pips joined by red lines form the W in Woodpip's mark. The same mark becomes the favicon and home-screen icon. The name joins the wood of the boards and pieces with the pip of a die or a backgammon count.

Four steps from pip to mark: a die face with five pips, the same five pips set as a W, the pips joined by red lines into Woodpip's mark, and the mark as a home-screen icon and a small tab icon.

The pip carries from the dice to the mark and the icons. Drawn from the shipped icon's geometry; the steps explain the composition rather than record the design sessions.

One detail from Ink & Scorepad survived the choice: a red pencil ring around a score. The site ultimately ships one self-hosted font, Jost. The other fonts belong to the earlier directions.

The words followed the same brief. On the site, the opponent is “a good player.” The interface gives the player a game and someone to play against; the model and runtime can have their own explanation elsewhere. The visual language comes from the things on the table.

Make taking a turn feel familiar

Five Dice is a useful place to see those choices meet. You and Woodpip each roll your own dice and keep your own score. Turns alternate, and the higher total wins.

Movement gives the materials some life. Pieces fall and settle with a small bounce. Reversi's discs turn one after another along the line. Dice tumble and land, scores are pencilled onto the card, and the end of a game rises like a lid. The marks also have a job: they help explain what just happened.

A finished Five Dice game on a phone, with five numbered labels: the two score cards for you and Woodpip, the red pencil ring around your winning total of 205, the three Expert pips, the end panel saying “You win by 20.”, and the Share button.

The red pencil ring from Ink & Scorepad circles the winning total. This is one finished game, with its own dice luck; it is not a measurement of the opponent's average strength.

With reduced motion, nothing travels. Pieces appear in place and the marks carry the explanation. Every game can be played by keyboard and has screen-reader descriptions. Automated accessibility checks pass on the pages and sheets in both themes; listening tests with VoiceOver and TalkBack are still to come.

Sound starts off. When a player chooses to turn it on, it should work. An iPhone playtest caught a small failure there: the site tried to start sound when the finger touched down, while Safari allowed it when the finger lifted. Moving the trigger fixed the silent games. A one-line change was enough, once the problem had been heard on the actual phone.

A worthy opponent needs honest labels

Woodpip offers Relaxed, Challenging and Expert, shown with one, two or three pips. Expert is selected initially; the player can change levels between games. Each level is a fixed, measured setting. It does not quietly adapt to the person playing.

The labels need to help someone choose. In most games, Relaxed reads, “A steady beginner. Good for learning the game,” which gives it a clear role. Four in a Row's Expert says, “Very strong. Beating it takes a real plan.” Behind those short lines are tests against specified opponents, with different measures for the different games.

There are limits to what a short label can promise. Dice introduce luck. Reversi's Expert can solve late positions exactly, but only inside its endgame threshold and when the solve finishes within its time limit. The site's tone needs to leave room for those facts. A worthy opponent can be strong without being described as unbeatable.

Let the player leave, and come back

The calm brief is visible in what the site asks of a visit. There is no account to create, no advertising, no notifications and no streak to keep alive. Sound waits for a choice. The game in progress lives in the browser's local storage, so closing a tab does not discard the position.

A game can keep working offline once it has been played. The site's pages and engine are kept on the device from the first visit; each game's opponent is added when that game is first played. Before that first play, a missing connection needs an explanation.

Reversi opened without a connection, with four numbered labels: the message “Woodpip needs a connection. Only the first time.”, a first move already on the board, Woodpip not yet replying, and Try again. A panel shows that a site never visited does not open offline, a game never played on a visited site has its pages and engine but not its opponent, and a game played once has both and plays offline.

The pages and rules can already be on the phone, allowing a first move. Each game's opponent is downloaded when that game is first played. Until then, Woodpip needs a connection before it can reply.

The message says, “Woodpip needs a connection. Only the first time.” The site can also be added to a phone's home screen, with the pip mark as its icon. Coming back should require little ceremony.

Privacy needs equally concrete language. Woodpip has no cookies and runs no tracking or analytics scripts. Everything the pages load, including the font, comes from woodpip.com. Standard server access logs still exist, include IP addresses and are kept for 90 days. “No cookies” is a useful, specific promise. It does not mean that the servers collect no data.

Give a finished game a picture of its own

At the end of a game, Share opens the phone's share sheet with text and a link, with Copy as a fallback. The link carries the moves, the level and, for the dice games, the dice seed. Someone receiving it can replay the game.

The picture beneath that link is particular to the game too. It shows the final position, the result in the sharer's voice, the score or moves, and the level as pips. “I beat Woodpip at Four in a Row” sits beside the board on which it happened.

A shared link carrying a game's moves, dice seed and level, shown schematically. In a chat app it becomes that game's own picture, here the Four in a Row card with a diagonal of red pieces beside “I beat Woodpip at Four in a Row” and Expert pips; a friend's browser loads the page from woodpip.com and replays the moves.

Four in a Row's share picture pairs the final board with the result and difficulty level; a chat app shows it beneath the link. The link's format is drawn schematically.

The card's words are fixed. Text typed into a link cannot become arbitrary copy on the picture. No game is saved on the server to make the card: the link supplies what is needed to reconstruct it. The picture is cached, and its request, including the moves in the image path, is logged for 90 days.

There is a small pleasure in that continuity. The pieces you played become the picture someone else sees. Sharing preserves a particular moment in the game.

Keep the promise small enough to inspect

The games box supplied materials, marks and movements. The brief settled what happens around the game: how difficulty is described, what survives a closed tab, and what a shared link contains. Those decisions can be inspected one at a time. Together, they give the product its character.

A score-card table of Woodpip's six values, timeless, calm, brief, fair, crafted and private, each with its line from the brief and where it shows up on the site. Brief, crafted and private are circled in red pencil.

Each value beside the decision it settled. The three ringed values are the ones followed below.

For someone building another small product, that is the useful part of the exercise. A value becomes more than an adjective when it changes a specific choice. “Brief” led to resuming a position. “Crafted” reached the motion and the pencil ring. “Private” needed wording as careful as the implementation.

Conclusions

We began by training a small model to choose a move. We then worked on making its browser runtime faster and making the model smaller. Woodpip brings that work into a product: four games, each with a local opponent, and a place to sit down and play.

Building that place meant making choices around the models as well as inside them. The games box gave us the materials and the pip. Measured levels gave the opponent honest descriptions. Saved positions, quiet defaults and replayable links made room for a game in an ordinary day. Trying the result on a phone exposed details that a design board could not settle, including whether the sound actually played.

The useful lesson for us is that a capable model needs an equally specific product brief. Small local models made offline opponents possible; the brief helped decide what to ask of the player, what to remember and what to leave out. A value such as calm or fair became useful when we could point to the behaviour that expressed it and check that it worked.

The result is Woodpip: a games site with no account to create, a choice of measured difficulty levels, and games that can be resumed and shared. Once a game has been played, its opponent is there for an offline return.

For the training, browser checks and measured playing strength behind the opponents, read Four games, four small models.

Pick a game at Woodpip. Take a turn, try a level, and see how the pieces feel.

Your move. Play Four in a Row, Five Dice, Reversi or Backgammon at woodpip.com.

Keep readingFour games, four small modelsMeet your one-pass AI opponent ← All articles
100%