Google Play — Developer Earnings.
Google Play — Developer Earnings.
Design and complete developer handoff for an interactive earnings calculator for app and game developers — implemented and approved by QA. The product hasn’t launched, so this page covers my role and process; the real screens are shown in interviews.
Diseño y handoff completo a desarrollo de una calculadora de ingresos interactiva para desarrolladores de apps y juegos, implementada y aprobada por QA. El producto no ha salido, así que esta página cuenta mi rol y mi proceso; las pantallas reales las muestro en entrevista.
Earnings models are dense. Developers needed to enter a few numbers and instantly see an estimate — with clear validation, no finance jargon and a layout that works from 375 to 1440 px.
Los modelos de ingresos son densos. Los desarrolladores necesitaban ingresar unos pocos datos y ver un estimado al instante, con validaciones claras, sin jerga financiera y con un layout que funcionara de 375 a 1440 px.
The experience also had to fit an existing brand system, so every new piece had to be built on its foundations, not next to them.
Además, la experiencia debía encajar en un sistema de marca existente: cada pieza nueva tenía que construirse sobre sus fundamentos, no al lado.
- From wireframes to visual design for the full landing and the calculator.De wireframes a diseño visual de la landing completa y la calculadora.
- 4‑step calculator flow — Basic information → Product information → Additional details → Your results — with default, success and error states.Flujo de calculadora en 4 pasos — Información básica → Información del producto → Detalles adicionales → Resultados — con estados default, éxito y error.
- A component library on top of the existing brand foundations — button, stepper, radio, accordion, range slider, total indicator and currency input — each with intro, anatomy, breakpoints and changelog.Una librería de componentes sobre los fundamentos de marca existentes —botón, stepper, radio, acordeón, range slider, indicador de total e input de moneda—, cada uno con intro, anatomía, breakpoints y changelog.
- Annotated handoff with specs, notes and versioned update rounds — the experience was fully implemented and approved by QA.Handoff anotado con specs, notas y rondas de actualización versionadas; la experiencia quedó implementada por completo y aprobada por QA.
The flow
El flujo
One amount, one yes/no question. Next stays disabled until both are valid.
Un monto y una pregunta de sí/no. “Siguiente” queda deshabilitado hasta que ambos sean válidos.
Multi‑select cards: the next step only asks about what the user picked.
Tarjetas de selección múltiple: el siguiente paso solo pregunta por lo que el usuario eligió.
Accordions with sliders and a live total that must reach 100% — default, success and error states.
Acordeones con sliders y un total en vivo que debe llegar a 100 %: estados default, éxito y error.
KPI cards plus a breakdown table that turns into an accordion on mobile.
Tarjetas de KPIs y una tabla de desglose que se vuelve acordeón en móvil.
Component library
Librería de componentes
- Intro & usage
- Intro y uso
- Annotated anatomy
- Anatomía anotada
- 4 breakpoints
- 4 breakpoints
- States & changelog
- Estados y changelog
States & breakpoints
Estados y breakpoints
The real screens live behind an NDALas pantallas reales están bajo NDA
The product hasn’t launched, so the interface, copy and figures stay private. I’m happy to walk you through the full case — landing, calculator, library and handoff files — in a call.
El producto no ha salido, así que la interfaz, los textos y las cifras son privados. Con gusto te muestro el caso completo —landing, calculadora, librería y archivos de handoff— en una llamada.
Implemented and approved by QA, the project left a documented, reusable library the team can build on if the product moves forward.
Implementado y aprobado por QA, el proyecto dejó una librería documentada y reutilizable sobre la que el equipo puede construir si el producto avanza.
It’s also a good example of how I work: every state, breakpoint and edge case designed and annotated before handoff.
También es un buen ejemplo de cómo trabajo: cada estado, breakpoint y caso borde diseñado y anotado antes del handoff.