Transforming how we ship products

Since it's inception, CaptainU hasn't had a real styleguide. I took the work from 4 designers covering 5 product lines from the past 2 years, cleaned up or recreated all of the core elements of our UI and produced our first styleguide. During the 2 week process, I negotiated our color palette, lead the typography re-branding, and unified our theories on whitespace, padding and margins. I also built it to be ready to use in Zeplin.io, giving our developers immedate access to CSS and layout info right out of the gate.

accordions
branding and colors
typography

Popovers were something that really needed to be standardized across all of our products. On the desktop, I like giving users quick and easy ways to make edits that don't require them to leave the experience. Popovers are great for this, feel more lightweight than a modal and maintain context. On mobile, however, these are best served up as full screen modals.

popovers

Shipping to developers

The second half of this project was to give all of our developers access to our styles quickly and with out spending months coding a live styleguide. Zeplin.io made this very easy and efficient. Unlike InVision, which let's devs wander through a repackaged sketch file and it's layers, Zeplin let's devs hover and click around to choose what CSS and SVGs they want to export without distraction.

zeplin-sensing

When I update the styleguide with new elements or adjust existing work, I can make release notes to capture what I'm changing. I'd love to see GitHub integration with this in the future.

zeplin-release-notes

My product design writing

Product Design Adventures