Ittybit

I spent two weeks working with Ittybit—a devtools platform for media files—on a design engineering assessment that combined visual redesign with hands-on implementation. The goal was simple: make the product feel more polished and cohesive while setting up a design system they could scale with.

Ittybit cover image

What I Did

I started by redesigning key screens in their webapp, tightening up typography, spacing, and overall visual consistency. From there, I rethought how users moved through the product—navigation patterns, modal interactions, and panel systems all got a fresh look with better UX in mind.

I built out a component library in Figma with reusable design elements, then translated those designs into production-ready React components using TypeScript and Tailwind CSS. The designs weren't just mockups—they were built to work seamlessly in their existing codebase, with clean, maintainable code that their team could easily extend.

I also created an implementation roadmap showing how to roll out the design system across the entire app without disrupting ongoing development.

What I Delivered

• A complete Figma design system with redesigned webapp screens and consistent styling
• A component library with reusable UI components and detailed specifications
• Interactive prototypes demonstrating key user flows and interactions
• Production-ready React + TypeScript code with Tailwind CSS styling
• An implementation roadmap for adopting the design system company-wide
• Documentation for the component library to ensure smooth handoff

Empty media page

File uploading

File upload complete

Media page populated with uploaded files

Tech Stack

React • TypeScript • Tailwind CSS • Figma

Why This Approach Works

Working as both designer and developer meant I could design with implementation in mind from the start. No awkward handoffs, no "this doesn't work in code" surprises—just a smooth path from concept to production. The result? Faster delivery, fewer revisions, and designs that actually ship as intended.

For early-stage startups and growing companies, this approach cuts down on coordination overhead and ensures your design vision makes it into the final product without compromise.

Client Feedback

"Really happy with the work you've done... Appreciate all the work you put in so far." — Paul Williams, CEO of Ittybit