Rookly
Modern glow-up for an ancient game
Scholastic Chess Platform + League Experience | Product + Experience Design | Summer 2024–Present
Long story short
The setup
Rookly started as a simple online platform connecting chess coaches and learners. Fine enough. But the real opportunity showed up when they launched a K-12 scholastic chess league that could bring structured team play to schools without geographic or funding limitations.
The problem? You can't just move scholastic athletics online and expect it to work. Especially not chess.
How do you recreate the experience of representing your school, the nerves before a match, the thrill of watching your teammate pull off a comeback? How do you make kids care about a board game on a screen the way they care about basketball or debate team?
Rookly had momentum but no foundation. The product was functional but forgettable. Generic. It felt like a utility, not an experience. And if you're asking schools to pay for this and kids to show up after class, you need more than functional.
The problem
Rookly faced steep challenges if they wanted to grow beyond a hobbyist tool into an organized, rewarding scholastic experience:
No structure for scale.
The UX was built for individual play, not leagues, teams, or tournaments. There was no sense of season, no progression, no reason to keep coming back. Just... matches. One after another. No arc.
Zero school spirit.
Nothing about the product said "I represent my school." No team identity. No locker room energy. No way for kids to feel like they were part of something bigger. It was solo chess that happened to involve other people.
Inaccessible and inconsistent.
Built on Tailwind defaults with no design system. Accessibility was an afterthought. The experience fell apart on mobile, which is a problem when kids are playing on school buses.
No social layer.
Chess is a social game. The trash talk. The mutual respect. The "good game" at the end. Rookly had none of that. It was sterile. Just you, the board, and a timer.
To grow, the product needed structure, storytelling, and systems that could scale. It needed to feel like a real league, not just a place to move pieces on a board.
My role
Since mid-2024, I've been embedded with Rookly as their lead product designer. Which at a startup means I do whatever needs doing. Some days that's strategy and stakeholder management. Other days it's shipping Figma files and writing motion specs. Most days it's both.
I'm responsible for:
Design systems.
Built a complete system from scratch to replace Tailwind defaults. Focused on accessibility, scalability, and performance. Every component needed to work on mobile, support keyboard navigation, and feel cohesive across the app.
UX architecture.
Redefined game flow and navigation for K-12 usability. This meant designing for distracted 8-year-olds and focused 17-year-olds simultaneously. (That range is wider than it sounds.)
Motion design.
Created animation systems using Rive. Startup-friendly, lightweight. Animations needed to add energy without slowing down the experience or requiring a huge engineering lift.
Gamification strategy.
Led documentation and framework design for progression, rewards, social interaction, and player identity. We needed systems that rewarded consistency, growth, and sportsmanship, not just wins. (Losing has to feel okay, or kids stop playing.)
Brand evolution.
Partnered on typography, UI voice, visual updates. Rookly needed to feel less "learn to code" and more ESPN-meets-schoolyard.
Marketing site redesign.
Contributed to conversion-focused updates for the public website, with messaging tailored to educators and school districts. (Different pitch for the people signing the checks.)
This is ongoing work. We're still building, refining, testing, learning.
Approach + process
The work with Rookly has been wide-ranging and flexible. Some strategic discovery. A lot of hands-on design. Building frameworks for features that don't exist yet. Here's how we've been tackling it.
Strategic discovery
I started with a broad competitive audit. Not just chess platforms (Chess.com, Lichess) but also:
- Youth-oriented platforms (Roblox, YouTube Kids, Discord) to understand what kids expect from digital experiences now. Spoiler: a lot of social signaling, customization, and visible progression.
- Sports and esports tools (ESPN app, Hudl, Twitch) to see how they build team identity and spectator engagement. The score ticker became a direct lift from ESPN's model.
- Educational tools (Khan Academy, Duolingo, Classcraft) to understand progression mechanics that keep students motivated without feeling punitive. Duolingo's streak model is brilliant. Also deeply manipulative. We borrowed the good parts.
I also dug into accessibility needs across devices. Touch interfaces. Screen readers. How do you make chess playable for students with motor or visual impairments? What does "fair play" mean when one kid has a gaming mouse and another has a Chromebook trackpad?
The big cultural question: how do you replicate the camaraderie of school sports in a digital chess league? The bus rides. The pep talks. The inside jokes. That's not something you can just bolt on.
Design + brand foundations
Once we understood the landscape, I focused on building systems that could grow with Rookly:
- Developed a bespoke design system. Built for scalability, accessibility, and performance. Every component needed to work on mobile, support keyboard navigation, and feel cohesive across the app. (Tailwind gets you 80% of the way there. The last 20% is where the personality lives.)
- Defined motion principles. Implemented them via Rive because it's lightweight and startup-friendly. Animations needed to add energy without slowing down the experience or requiring a huge engineering lift. Rive lets you build once and deploy everywhere. Worth the learning curve.
- Replaced generic visuals with custom elements. Team-based UI. Locker rooms, roster screens. ESPN-style match tickers showing live league activity. Emoji reactions kids could use during games. Small touches that make the experience feel alive. (The emoji reactions were controversial internally. They stayed. Kids love them.)
Interaction design + gamification
This is where the real complexity lived. Chess gameplay is one thing. Making it feel like a scholastic league is another.
- Created modular layouts that support flexible device use. Kids play on phones, tablets, Chromebooks, whatever they have access to. Sometimes on the school bus. The UI needed to adapt. (Responsive design is table stakes. Context-aware design is the hard part.)
- Introduced animated emoji reactions. Lightweight social connection between players. You can't chat during a match (safety, moderation), but you can send a quick emoji. It's enough to feel human.
- Designed spectator mode. Real-time scoreboards. Clickable game previews. Parents and coaches can watch matches unfold like they're courtside.
- Documented full gamification strategy: Progression dimensions (puzzle use, wins, consistency, sportsmanship). Ranking systems (exponential growth curves, badge rarities common to legendary). Personalization features (titles, emoji packs, unlockables). (1.5 million avatar combinations wasn't an accident. Identity matters.)
The goal was to create systems that could roll out in phases without overwhelming the engineering team. Document now, build later, but make sure we're building toward something coherent.
The solution
We're still building, but here's what we've shipped and what's in the pipeline.
Scalable, student-centered platform
- Chess gameplay UI redesigned with flexible panels, cross-device support, real-time interactivity. Games feel responsive and alive. Not just functional.
- Emojis and motion elements woven into matches to replicate in-person dynamics. Excitement. Frustration. Respect. (Chess can be isolating. This makes it social.)
- Locker Room and Spectator Mode support community and team cohesion. Kids can hang out before matches. Parents can watch from home.
- Animated score ticker visualizes league activity like a school sports broadcast. (Borrowed directly from ESPN.)
New public-facing web experience
- New typography, motion design, illustration style. The brand needed to grow up a bit without losing playfulness.
- Clearer school sign-up flows and structured CTAs. Different pitch for the people signing the checks.
- Deeper storytelling of Rookly's value to schools, educators, and students. Equity. Access. School pride. Community building.
Systems that scale
- Gamification frameworks ready for phased rollout. Custom exponential scoring and rating systems. Beginners can feel progress. Advanced players can chase mastery.
- Parent and coach features for match viewing and sharing.
- Accessible-first design baked into component library and layouts. WCAG standards from the start.
Outcomes + reflections
We've seen real growth already. From a few dozen schools to 170+ contracted across the U.S. Transitioning from a side project into a revenue-generating scholastic league without losing the individual and group lesson roots. Creating and implementing systems that enable tournaments, leagues, and real-time spectating from any device.
On the design and brand side, we've shipped a robust design system used across web, app, and internal tools. Launched a high-conversion marketing site with tailored messaging for educators and school districts. Delivered visual and interaction polish with startup-ready performance via Rive.
What this work has challenged me to do:
- Create playful, high-quality UX that holds up to classroom scrutiny. (You can't fake rigor in an educational context. It shows.)
- Scale a design system that serves K-12 players. Finding opportunities to bring joy and expression in a way that feels good for all students has been genuinely hard.
- Shape Rookly so kids feel pride, connection, and identity whether they win or lose. This has been the most rewarding North Star.
This isn't just chess. It's school spirit. Online.