Case Studies

Below are some of the case studies showcasing my work and design process.

JudoPedia is designed to be a comprehensive resource for Judo practitioners (Judokas), providing detailed information on techniques, vocabulary, history, and in-app games to speed their learning and preparation for their upcoming promotion tests. The design process focused on creating an intuitive and engaging user experience.

JudoPedia in Figma

Origin: JudoPedia was inspired by the need for a centralized resource for Judo practitioners to improve their learning and studying methodology by using in-app games. The goal was to create a platform that supports users in their learning journey and helps them prepare for promotions without feeling like they are studying.
Key Features
Design Process: The design process for JudoPedia involved extensive research and real user testing to ensure the platform meets the needs of its unique users. Key decisions included the choice of color scheme, typography, and layout to create a visually appealing and easy-to-use interface.
Development Stack

Light/Dark Mode Themed

The project began with envisioning JudoPedia as a modern, mobile-first learning tool. The initial mockups focused on clean navigation and a user-centered layout, ensuring newcomers could immediately understand the app’s core value.

From there, I introduced light and dark themes. Offering these modes wasn’t just about visual style, it was a deliberate step toward accessibility and inclusivity.

By giving users control over their environment, I ensured the app could adapt to diverse lighting conditions, reduce eye strain during long study sessions, and align with individual preferences.

This flexibility transformed the interface from a static design into a personalized learning space, reinforcing the idea that good UI/UX should feel responsive to the user, not the other way around.

Iconography

As JudoPedia began to take shape, I turned my focus toward visual identity. Navigation alone wasn’t enough — the experience needed to feel instantly recognizable, intuitive, and memorable.

Custom iconography was crafted to reinforce brand identity and craft industry-specific symbols for which most generic icon libraries fell short. Each icon was carefully designed for quick recognition, ensuring learners could focus on studying rather than searching for features.

The result was a set of symbols that not only supported the visual aspect of Judo and its usability but also built a visual language unique to JudoPedia.

Logos

With the foundation of iconography set, I expanded the identity system to the logo. The challenge was creating a mark that could scale across contexts — from an app icon to large-format marketing assets.

The United States Judo Association (USJA) logo served as an anchor point. It provided heritage and credibility, linking JudoPedia back to the established traditions of the sport while setting the stage for a modern learning platform.

From there, I created the JudoPedia logo — versatile, adaptive, and designed to work seamlessly across both digital and print environments. Whether appearing on a splash screen, in an app store, or within a presentation, the mark remained consistent and recognizable.

This dual approach — respecting tradition while introducing innovation — built trust, reinforced identity, and gave JudoPedia a professional, polished presence at every touchpoint.

Main Colors

Color theory played a central role in shaping the emotional tone of JudoPedia. I needed a palette that balanced energy and trust, while still appealing to a broad audience of learners.

The primary accent blue was selected as the anchor — bold, confident, and associated with reliability. Paired with a deeper accent tone, it provided depth and versatility across light and dark modes.

To further strengthen accessibility, I introduced both light and dark themes. This gave users the freedom to adapt the interface to their environment, whether studying during the day or late at night.

Finally, a gradient system was developed to bring vibrancy and motion into the design. The smooth transition from blue to purple created visual energy and modern appeal, especially in key highlights and call-to-action elements.

Together, this palette not only established brand recognition but also reinforced the app’s personality — professional, inclusive, and engaging.

Supporting Colors

To complement the primary palette, I introduced a system of supporting colors that worked as functional accents. These weren’t just decorative — they were purposeful tools that enhanced usability and reinforced the app’s hierarchy.

Neutral tones like black, gray, and white provided balance, ensuring content remained legible and the interface uncluttered. They acted as the canvas, allowing the accent colors to shine without overwhelming the user.

Functional colors like red, green, and amber were applied with precision — signaling actions, warnings, or success states. This made the experience more intuitive by tying visual feedback directly to user expectations.

By carefully layering these supporting tones, I was able to create a visual rhythm across the app: guiding attention, emphasizing key interactions, and ensuring the design felt cohesive yet dynamic.

Belt Rank Colors

One of my goals was to ground the design in Judo’s traditions, ensuring that JudoPedia didn’t just look like another generic learning app. Belt rank colors became the perfect bridge between heritage and modern design.

Each rank color was carefully integrated into the interface — not as decoration, but as a meaningful layer of context. For practitioners, these hues immediately sparked recognition and familiarity, connecting their digital experience to years of dojo practice.

By weaving belt progression into the UI, I created moments of emotional reward. Advancing through the app mirrored the journey of earning belts in real life, giving users a sense of achievement that felt both personal and authentic.

This approach transformed color from a purely aesthetic choice into a storytelling device, reinforcing JudoPedia’s identity as a platform built with respect for its community and traditions.

Typography

Typography became a cornerstone of JudoPedia’s usability. Since the app was designed as mobile-first, I had to ensure every font decision enhanced clarity on small screens where space is limited.

I chose Alexandria for its modern, approachable feel — a typeface that communicates professionalism without sacrificing warmth. Its clean geometry gave the app a contemporary edge, while still remaining highly legible across different screen sizes and resolutions.

Hierarchy played a critical role in my approach. By defining clear typographic scales and weights, I created a rhythm that naturally guided users’ eyes — from titles that inspired attention, to body text that encouraged comfortable, sustained reading.

This balance between sleek aesthetics and functional readability meant that learners could quickly scan content, absorb lessons efficiently, and stay engaged without cognitive strain. In effect, typography became the invisible layer that supported the entire learning experience.

Media

From the start, I knew that JudoPedia needed to be more than a static reference guide — it had to feel alive. Judo is a discipline rooted in movement, and a purely text-based or still-image approach would never fully capture its essence.

To solve this, I integrated media as a core design element. Videos allowed users to watch techniques in action, breaking down each move into a dynamic, learnable sequence. This wasn’t just about adding visual flair — it made the app a far more powerful educational tool.

Audio also played a role, introducing an additional sensory layer to the experience. Learners could not only see the techniques but also hear instructions, creating a richer, multi-dimensional environment.

By embedding imagery, video, and audio into lessons, I transformed JudoPedia from a simple knowledge base into an immersive, interactive learning space. This approach boosted engagement, increased retention, and ultimately made learning more rewarding and memorable.

UI Components

The final step in JudoPedia’s design journey was ensuring the product could scale. Designing individual screens was not enough — I needed to create a system that could support growth, consistency, and efficiency over time.

To achieve this, I built a reusable library of UI components. Every button, form field, and interactive element was designed as part of a larger system. This meant developers could build new features faster while maintaining a cohesive look and feel across the app.

For users, this translated into familiarity and trust. No matter where they navigated, the interface behaved predictably, reducing cognitive load and making the learning experience smoother.

For the team, it meant scalability and sustainability. Instead of redesigning from scratch for each iteration, we had a foundation that supported long-term innovation. In essence, the component library became the bridge between creative design and efficient engineering — future-proofing JudoPedia for growth.