Back to home

Playbook

A simpler D&D character sheet, built with great design, and a focused user experience.

D&D is a ton of fun. Roleplaying is a joy, and adventuring with friends is great. Doing math, and tracking numbers... not so much.

Having played D&D for several years now, I've had a ton of fun with the game. Some of my best college memories were made with the crew I ran with—lots of laughs, plenty of epic moments, and... math. This tool has taken on several forms of the time I've spent working on it, with the most recent build gearing up for a beta test.

Version one

The first iteration of Playbook came about as a result of my frustration with existing tools. I'm a forgetful person, and hate anything on paper. If I receive a document, I scan it, and dump it into Dropbox, or it's going to get lost. Throughout my time playing D&D, I'd tried tools I used at work (text editors and Figma), in addition to tools built by the community (like Fight Club). My work tools were a pain to keep updated, and lacked much of the automation necessary to be valuable, and I found D&D-specific tools to be clunky, and aesthetically disappointing.

I built a custom, static site for my character at the time, a warlock, with all my spells, sorted by what made the most sense for a warlock, and inputs for things like inventory, health points, and abilities, all stored locally, so as to persist between sessions.

The sheet worked great, but it required quite a bit of upkeep, and wasn't scalable to other character builds.

 
Shots of the Garlic-based app

Version Two

I'd just started a new full time position at Evaline, Inc., working on tools for electric vehicle drivers, and needed to get comfortable with React. React made perfect sense for Playbook—many parts of the project were similar (read: components), and it was difficult to control elements on the page with pure javascript and html.

I got overzealous with the first build, and stagnated. With the first version, I'd focused just on my character, and hadn't given a second thought to other builds, and how different races, classes, and play styles might effect the way the app should be represented. Building for all the potential use cases was incredibly difficult, and ultimately, without a clear strategy for deployment, with work ramping up, and just little old me, I took a step back.

I'd established a clear visual dictionary for the app though, with a royal red, and muted tan color scheme, paired with plenty of serifs and drop caps. I wanted to keep in line with the fantasy feeling of D&D, and designing this second iteration of Playbook gave me an opportunity to work on something so different from my normal groove.

 
Shots of v2, with special focus on branding

Version Two, again

Having taken a several-month hiatus on Playbook, I picked it back up again after leaving Evaline in December of 2017. I went back to pen, paper, and Figma, and thought about how a desktop web-app might best represent different portions of a character sheet.

I did my research, and collected many different variations on the character sheet from the community. Some went more artistic, whereas some really geeked out on the PDF math they could do. I categorized different sections of the sheet, and grouped similar functions together.

I also partnered with my friend Connor. I'd worked with him before at Evaline (and before that), and he was a part of my weekly D&D group. Having another person on the project gave me motivation to put time in.

 
New Playbook and landing page

Right now, we're still working on building out support for all the basic classes and races. You can follow along on Dribbble, or sign up for the beta waitlist below. There's a ton of challenging design and engineering problems, and I'm looking forward to future posts about solving those.

Reach out if you want to chat about transportation tech, EVs, or if you just want to talk design.

Let's talk!

How can I contact you?

your.email@company.com

Success! I’ll be in touch within a day or so. Till then!

Something's gone horribly wrong.

Send an email