Alan Franco Díaz

All projects

Drawing Game UI Overhaul

A layout and interaction overhaul for a legacy ABCmouse drawing game: every core control on screen, and clearer, reactive drawing tools.

Studio
Age of Learning
Role
Technical Artist
Tools
Unity
Year
2026
  • Unity
  • UI implementation
  • Responsive layout
  • UI animation
  • UX feedback
  • Legacy game update
Drawing game screen with a colored cat and yarn ball, a palette of colors and a column of drawing tools on the right, and an active Submit button on the left

Overview

A targeted UI overhaul for Art Engine, a legacy digital drawing game in the ABCmouse app, focused on layout responsiveness and visual feedback.

The original layout had a critical framing problem: the main Submit button was cut off the screen, buried beneath the drawing tools. The tool icons were also unclear and gave little visual feedback when selected.

I reconfigured the whole screen layout so every core interactive element, including Submit, is fully visible and accessible across device screens. I also refreshed the drawing tools with clearer assets and reactive animations that show which tool and which color are currently active.

Disclaimer: developed during my tenure at my previous studio. Property of the respective IP holders.

What I did

  • Reconfigured the entire screen layout so all core controls, including the Submit button, are fully visible and accessible across device screens.
  • Re-implemented the persistent, timed shaking animation on the Submit button so it draws the eye naturally toward progression.
  • Refreshed the drawing tools UI (pencil, bucket tool, paintbrush, pen and eraser) with clearer asset presentation.
  • Built reactive animations that highlight which tool and which color are currently active.
Drawing game with an empty canvas, the bucket tool selected with a blue ring, and the Submit, Undo and Clear buttons disabled
Bucket tool selected: the ring matches the active color. With an empty canvas, Submit, Undo and Clear are disabled.
Drawing game with an empty canvas, the brush selected with a green ring and the green swatch highlighted in the palette
Brush selected with green: the ring and the highlighted swatch show the active tool and color.

Video