Jimmy Esteban

UI/UX Pocket: A Daily Design-Fundamentals Trainer

App Design
Personal Project
UI/UX Pocket: A Daily Design-Fundamentals Trainer

OVERVIEW

UI/UX Pocket is a personal Expo/React Native application I designed and developed to bridge the gap between knowing design laws in theory and spotting them in practice. It serves as a daily calibration tool for UI/UX fundamentals, pairing a pocket reference guide with interactive, gamified perception drills.

TIMELINE

July 2026 – Present

MY ROLE

Solo UX Engineer (End-to-end Design & Full-Stack Development)

TOOLS USED

Expo, React Native, TypeScript, GitHub Actions

The Problem: Theory vs. Visual Calibration

I built UI/UX Pocket to solve a specific problem I noticed in myself and other designers: skill degradation. We all know principles like Fitts's Law or the WCAG contrast standards, but knowing them and instinctively seeing them are two completely different muscles. I didn't want another static article to skim and forget; I needed a daily utility that would actively test and calibrate my visual accuracy.

Gamifying the Fundamentals

Instead of building a dry, read-only glossary, I engineered eight distinct interactive perception drills—like "Contrast Call," "Kerning Call," and "Pixel Match". By isolating a single design fundamental in each mini-game, the app turns a wrong answer into a highly specific, instructive learning moment rather than just a penalty.

games list

games list

judgment call

judgment call

contrast game

contrast game

Onboarding & Persona Mapping

To make the experience sticky and engaging, I designed an onboarding flow that classifies the user into one of eight design archetypes (e.g., "The Grid Zealot" or "The Precision Provocateur") based on how they answer initial judgment calls. This injected personality into the application, transforming a technical reference tool into an experience with a distinct point of view.

types list

types list

Retention & Measurable Progress

To drive long-term habit formation, I built a daily challenge engine that rotates judgment calls, tracks streaks, and measures overall accuracy. The profile dashboard breaks down performance across specific categories like Spacing, Hierarchy, and Tap Targets, making visual calibration quantifiable rather than just based on "vibes".

As a UX Engineer, I didn't just want to design this—I wanted to ship it. I established a CI/CD pipeline using GitHub Actions so that every push to the main branch automatically deploys the latest build to GitHub Pages. It is now a genuine part of my daily routine, keeping my design instincts razor-sharp. That being said, it is very much a living application; there is still a lot more to be done, and I will continue to build out new features and games whenever I have the time.

profile

profile

laws list

laws list