1 of 2 designers / Q3 of 2025 / ui design & design systems
ANDROID MOBILE DESIGN · AI TRAINING DATASETS
Designing Android UI Datasets for Gemini
Designed 130+ high-fidelity Android screens with real-world layouts and interaction patterns to support Gemini’s UI-to-code generation.
1 of 2 designers / Q3 of 2025 / ui design & design systems
1 of 2 designers / Q3 of 2025 / ui design & design systems
ROLE
ux designer
1 of 2 designers
3 months (2025)
mobile UI design
responsive design
accessible design
design systems
TIMELINE
SKILLS
The Google team’s goal was to train Gemini using reinforcement learning to reproduce code from screen designs. I partnered with IBM engineers to design and deliver the UI datasets needed to support this effort.
Gemini required training data that balanced UI diversity with structural consistency.
-
Coverage across multiple app categories, layouts, and interaction models
-
Use of production design systems
-
Material 3, Material 3 Expressive, Salesforce
-
-
Full light/dark mode parity to reflect real production constraints
-
Responsive layouts across compact, medium, and expanded breakpoints
-
Corresponding Jetpack Compose Code for each screen (dev team)
My role
Partnering with one other designer, I designed 130+ Android screens across layout variations, with a focus on:
-
Designing category-specific UI patterns grounded in real Android app behavior
-
Defining consistent component hierarchies aligned with selected design systems
-
Ensuring responsiveness across screens
Layout adaptability
Each screen was designed across multiple breakpoints, with adjusted spacing, alignment, and component behavior to maintain functional and visual consistency at scale.
Human context
We picked 12 app categories (e.g., financial charts, social feeds, health dashboards) to design for, in order to best reflect real-world apps.
UI patterns were intentionally aligned to each app category so the dataset reflected realistic, production-ready Android apps.
Design system diversity
We leveraged Material 3, Material You, and Salesforce component libraries to design all of our screens. Each group of screens included a lightweight, customized style guide showing how system components adapt across product contexts.
Outcome
Delivered 130+ annotated datasets to teach Gemini, each including:
-
Unique Android screen mockups with style guides
-
Alt-text for images to support accessibility and dataset clarity
-
Corresponding Jetpack Compose Code (engineered by our dev team)
Gemini can now:
-
Generate Android UI code from screenshots
-
Match layouts to target images
-
Iterate UIs with natural language prompts
-
Detect and fix UI quality issues
and more...
Key takeaway
This experience designing for AI training clarified what defines a high-quality dataset:
meticulous execution, intentional diversity, and production-realistic UI patterns.
It required thinking through how each design decision translates into data that teaches.