Funetix is a non-profit dedicated to teaching disadvantaged children to read. When I joined, the founder wanted to expand their existing Android curriculum to larger-screen formats, specifically the web (via Pubbly) and Kindle e-readers. Operating with zero budget, no dedicated illustrator, and 2,000+ course screens across 28 modules, our small volunteer design team faced a severe production bottleneck. Manually redesigning every screen was unsustainable, so I needed to establish a scalable layout framework that could deliver quality lessons efficiently.
Funetix: Scaling a Design System for 2,000+ Screens
Volunteer Lead Product Designer•American Youth Literacy Foundation (Non-Profit)•Web (Pubbly), Kindle E-Reader, and Android App
Project summary
Manual design work was throttling the mission to teach kids how to read
The problem
Funetix had a massive, highly repetitive educational curriculum (28 modules, 2,000+ screens) on Android, but lacked a design system. When the founder set out to expand the curriculum to web (via Pubbly) and Kindle e-readers, designers were building every larger-screen layout manually, wasting immense time and bottlenecking the development cycle.
The outcome
Built a scalable template system and Sketch library that drastically accelerated handoff, enabling a single designer to manage the entire 2,000-screen curriculum efficiently across the Funetix platform.
Context
Translating 2,000+ screens with a volunteer team and zero budget
Synthesis
Turning 2,000 repetitive screens into reusable templates
Without a centralized system, manually editing screens across devices was an unsustainable bottleneck. But while the curriculum volume was massive, the underlying lesson structures were actually highly repetitive. We didn’t need 2,000 custom screens; we needed reusable templates that would eliminate busywork and keep our team focused on educational quality.
The solution
Empowering a single designer to do the work of a full team
I audited the 28 curriculum modules and isolated repeating mobile layouts into standardized templates. To support different device viewports, like Pubbly (1600x800px) and Kindle Basic (800x600px), I established simple scaling rules: anchoring core lesson content in the center while letting backgrounds adapt. Packaging these templates into a shared Sketch library enabled content managers to translate 2,000+ screens without needing a designer to build each one by hand.
Outcomes & impact
System efficiency
The centralized library drastically sped up the design-to-dev handoff process. The system was so robust and well-documented that, even after my volunteer tenure ended, a single designer was able to manage the handoff for the entire app.
Business impact
By eliminating manual design overhead, the non-profit was able to scale its multi-platform curriculum without expanding design headcount or hiring external agencies.
Trade-offs
Curated vector art over custom illustration
The compromise
I initially spent weeks illustrating custom mascots and GUI assets. But with 2,000+ screens and no in-house illustrator, producing custom art across 28 modules was impossible. I made the call to shelve my drawings and pivot to curated open-source vector art. While this sacrificed a unique brand aesthetic, it removed an impossible bottleneck and kept development moving.
Reflection
Shipping the mission matters more than protecting your pixels
Watching my custom illustrations get replaced by open-source vector assets was humbling, but it taught me that design exists to serve the mission, not the designer’s ego. The kids using Funetix didn’t care if the artwork was custom-drawn; they just needed a clear tool that helped them learn to read. Learning to prioritize real-world delivery and system scalability over personal artistic ownership is a mindset I bring to every product I design today.