Arrastra para explorar. Desplázate o pellizca para acercar. Abre la Ayuda para ver los atajos de teclado.

Yan
ABIERTO A
PROYECTOS
Hablemos
Yan Fontão Boring view
All work

Case 002Diseño de app web y panel

Rei do Pitaco

El flujo de registro de una lista de espera para un producto de apuestas: elegir cómo entrar, dar los datos en pasos cortos y confirmar el correo electrónico.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Logo de Rei do Pitaco sobre un disco negro.
El logo.

01

Mi contribución

Trabajé en Rei do Pitaco como Product Designer de marzo a octubre de 2022, en su juego de fantasy y en el lanzamiento de un nuevo producto de apuestas. Eso incluyó diseño de UX y UI, diseño de interacción, pruebas de usabilidad, evaluación heurística, investigación de UX y product discovery.

Este caso sigue la lista de espera del producto de apuestas, desde el plan hasta el área con sesión iniciada. La investigación con usuarios que hay detrás es un caso aparte, con acceso por código.

Un desplazamiento por el diseño: la página de la lista de espera, de los premios a cómo funcionan los puntos.
Pantalla de celular con una foto de aficionados al fútbol con camisetas amarillas, el logo de Rei do Pitaco Betting, dos botones de registro y enlaces para iniciar sesión o recuperar la contraseña.
Pantalla oscura de celular que pide el CPF, con un campo vacío de borde rojo, un error de campo obligatorio, una nota debajo y los controles Atrás y Siguiente.
Grabado del prototipo de Figma. El registro, una pregunta a la vez. Un correo de ejemplo está difuminado. La primera pantalla del registro separa una cuenta nueva de una existente. El paso de identidad muestra su error en el mismo lugar, con el campo vacío.

02

Mapear el lanzamiento antes de diseñarlo

El trabajo empezó como estructura: un mapa del sitio para la lista de espera y un flujo principal en cuatro etapas. La suscripción incorpora a la persona, el KYC confirma quién es, los referidos y el compartir suman a otras personas, y el puntaje muestra en qué posición está. Cada pantalla posterior tenía que servir a una de esas etapas.

Pantalla oscura de celular con campos para nombre completo, fecha de nacimiento, contraseña y confirmación de contraseña, dos casillas de confirmación y los controles Atrás y Siguiente.
Pantalla oscura de celular con el logo, un mensaje que dice que se envió un correo electrónico, un botón verde de reenviar y un botón de cerrar con contorno.
El último paso reúne los datos de la cuenta y dos confirmaciones. La fecha que se muestra es de ejemplo. Después del registro, el flujo pide confirmar el correo electrónico y ofrece reenviar el mensaje.

03

Dos formas de entrar, un paso a la vez

La primera pantalla separa dos situaciones: crear una cuenta nueva o usar una cuenta de Rei do Pitaco que ya existe. Quienes vuelven tienen sus propios enlaces debajo de esos botones, uno para iniciar sesión y otro para recuperar la contraseña.

Cada paso posterior mantiene la misma estructura: el logo arriba, un título, los campos de ese paso y, abajo, Atrás y Siguiente alrededor de tres puntos de progreso. El paso del CPF muestra el error de campo obligatorio en el mismo lugar, con una nota debajo que explica que el número no se puede cambiar después. Después del último paso, el flujo se reduce a un mensaje y dos acciones: reenviar el correo o cerrar.

Flujo principal: suscripción, KYC, referidos y compartir, y puntaje.
El flujo principal, en cuatro etapas.

04

Una lista de espera que explica el premio

La landing page anuncia el nuevo producto de apuestas con una frase, “O betting do Rei vem aí!”, y una acción: dejar el correo y entrar a la lista. Todo lo que hay debajo responde por qué vale la pena, empezando por más de R$ 1 millón en premios.

Los niveles de premios, cómo funcionan los puntos y unas preguntas frecuentes breves vienen en ese orden, así la página resuelve la duda sobre el dinero antes de pedir cualquier otra cosa.

Mapa del sitio de la lista de espera.
El mapa del sitio de la lista de espera.

05

Después del registro, una cuenta regresiva

Una vez dentro, el área con sesión iniciada mantiene presente el lanzamiento: los días que faltan, una escalera de premios y el estado de la verificación de la cuenta. El archivo incluye tanto la versión verificada como la no verificada, así que quien se detuvo a medio camino puede ver qué falta.

El registro en sí pide una cosa por pantalla, del correo al nombre y la fecha de nacimiento, y luego el CPF, con una nota simple que explica por qué hace falta ese número.

Área con sesión iniciada, con la posición en el ranking, los puntos y la checklist de verificación.
El área con sesión iniciada de una cuenta no verificada. Nombre de ejemplo y premios ocultos.
000

Instrucciones

Yan Fontão
Toque
Abre una pantalla
Clic
Abre una pantalla
Arrastrar
Recorre el mural
Rueda
El mouse acerca, el trackpad mueve, el pellizco acerca
− +
Aleja hasta ver todo el mural, o acerca
Flechas
En un caso: ↑↓ cambian de caso, ←→ cambian de medio. En el mural: mueven
Espacio
Abre o vuelve
Enter
Abre
Esc Backspace
Vuelve
Home
Vuelve al centro y luego a la apertura
PgUp PgDn
Canal anterior o siguiente
Tab
Recorre proyectos y enlaces
R
Proyecto al azar
0–9
Escribe un canal, 1–61
?
Esta página
Atajos

Música del mural

Archivos comprimidos y nivelados para la web.

ABIERTO A
PROYECTOS
Hablemos

Nuevo mensaje para Yan

Cuéntame quién eres y te respondo.

000

Sobre Yan

Hola, soy Yan

Product Designer/ Design Engineer

La mayoría de los productos pierde algo entre el diseño y el código. Los míos no: investigo el problema, diseño el producto y lanzo la interfaz yo mismo, así que lo que apruebas es exactamente lo que reciben tus usuarios.

  • 2018inicio en software
  • UI + codediseño e implementación

Trabajé con Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido o presencial

Retrato de Yan Fontão sentado, con suéter verde y gafas, sosteniendo un micrófono.
ABIERTO A
PROYECTOS
Hablemos
ABIERTO A
PROYECTOS
Hablemos
000

canal bloqueado

Bajo NDA

Ingresa el código

Pídele el código a Yan ↗
ABIERTO A
PROYECTOS
Hablemos
YAN FONTÃO Casos completos

Canal 02 Diseño de app web y panel

Rei do Pitaco

El flujo de registro de una lista de espera para un producto de apuestas: elegir cómo entrar, dar los datos en pasos cortos y confirmar el correo electrónico.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Logo de Rei do Pitaco sobre un disco negro.
El logo.

Una lista de espera en pasos cortos

Pantallas de los archivos de diseño originales de Figma, con datos de ejemplo.

Mi contribución

Trabajé en Rei do Pitaco como Product Designer de marzo a octubre de 2022, en su juego de fantasy y en el lanzamiento de un nuevo producto de apuestas. Eso incluyó diseño de UX y UI, diseño de interacción, pruebas de usabilidad, evaluación heurística, investigación de UX y product discovery.

Este caso sigue la lista de espera del producto de apuestas, desde el plan hasta el área con sesión iniciada. La investigación con usuarios que hay detrás es un caso aparte, con acceso por código.

Grabado del prototipo de Figma. El registro, una pregunta a la vez. Un correo de ejemplo está difuminado.

Mapear el lanzamiento antes de diseñarlo

El trabajo empezó como estructura: un mapa del sitio para la lista de espera y un flujo principal en cuatro etapas. La suscripción incorpora a la persona, el KYC confirma quién es, los referidos y el compartir suman a otras personas, y el puntaje muestra en qué posición está. Cada pantalla posterior tenía que servir a una de esas etapas.

Flujo principal: suscripción, KYC, referidos y compartir, y puntaje.
El flujo principal, en cuatro etapas.
Mapa del sitio de la lista de espera.
El mapa del sitio de la lista de espera.

Dos formas de entrar, un paso a la vez

La primera pantalla separa dos situaciones: crear una cuenta nueva o usar una cuenta de Rei do Pitaco que ya existe. Quienes vuelven tienen sus propios enlaces debajo de esos botones, uno para iniciar sesión y otro para recuperar la contraseña.

Cada paso posterior mantiene la misma estructura: el logo arriba, un título, los campos de ese paso y, abajo, Atrás y Siguiente alrededor de tres puntos de progreso. El paso del CPF muestra el error de campo obligatorio en el mismo lugar, con una nota debajo que explica que el número no se puede cambiar después. Después del último paso, el flujo se reduce a un mensaje y dos acciones: reenviar el correo o cerrar.

Pantalla de celular con una foto de aficionados al fútbol con camisetas amarillas, el logo de Rei do Pitaco Betting, dos botones de registro y enlaces para iniciar sesión o recuperar la contraseña.
La primera pantalla del registro separa una cuenta nueva de una existente.
Pantalla oscura de celular que pide el CPF, con un campo vacío de borde rojo, un error de campo obligatorio, una nota debajo y los controles Atrás y Siguiente.
El paso de identidad muestra su error en el mismo lugar, con el campo vacío.
Pantalla oscura de celular con campos para nombre completo, fecha de nacimiento, contraseña y confirmación de contraseña, dos casillas de confirmación y los controles Atrás y Siguiente.
El último paso reúne los datos de la cuenta y dos confirmaciones. La fecha que se muestra es de ejemplo.
Pantalla oscura de celular con el logo, un mensaje que dice que se envió un correo electrónico, un botón verde de reenviar y un botón de cerrar con contorno.
Después del registro, el flujo pide confirmar el correo electrónico y ofrece reenviar el mensaje.

Una lista de espera que explica el premio

La landing page anuncia el nuevo producto de apuestas con una frase, “O betting do Rei vem aí!”, y una acción: dejar el correo y entrar a la lista. Todo lo que hay debajo responde por qué vale la pena, empezando por más de R$ 1 millón en premios.

Los niveles de premios, cómo funcionan los puntos y unas preguntas frecuentes breves vienen en ese orden, así la página resuelve la duda sobre el dinero antes de pedir cualquier otra cosa.

Un desplazamiento por el diseño: la página de la lista de espera, de los premios a cómo funcionan los puntos.

Después del registro, una cuenta regresiva

Una vez dentro, el área con sesión iniciada mantiene presente el lanzamiento: los días que faltan, una escalera de premios y el estado de la verificación de la cuenta. El archivo incluye tanto la versión verificada como la no verificada, así que quien se detuvo a medio camino puede ver qué falta.

El registro en sí pide una cosa por pantalla, del correo al nombre y la fecha de nacimiento, y luego el CPF, con una nota simple que explica por qué hace falta ese número.

Área con sesión iniciada, con la posición en el ranking, los puntos y la checklist de verificación.
El área con sesión iniciada de una cuenta no verificada. Nombre de ejemplo y premios ocultos.