Visión general del proyecto

Este proyecto es una página especial de campaña (LP) para promover el uso del sitio oficial de votación 'AutoRace.JP Voto' con motivo de la celebración del 'SG 44th All-Star Auto Race'.El objetivo es atraer a los miembros de votación existentes y a los potenciales fans de las carreras de autos, presentando claramente incentivos como premios de lujo y asignación de puntos, para dirigirlos a la participación (conversión).

Fui responsable del desarrollo front-end general en este proyecto.Desde el diseño de la información hasta la adaptación responsiva y la implementación de interacciones, prioricé la experiencia del usuario en el desarrollo.

Pila tecnológica adoptada

• HTML5
• CSS3
• JavaScript (ES6)
• jQuery
• Google Tag Manager (GTM)
• Adobe Fonts (Typekit) / Google Fonts

Seleccioné estas tecnologías y construí un entorno de desarrollo moderno y eficiente que satisface los requisitos de la campaña, aprovechando los activos existentes del sitio (CSS/JS común).

Diseño e implementación en los que me enfoqué

Diseño responsivo optimizado para todos los dispositivos

Para maximizar el atractivo de la campaña, implementé un diseño responsivo riguroso para una visualización óptima de la información en todos los dispositivos, desde teléfonos inteligentes hasta PC.

En particular, .sp_none(ocultar en smartphone) y .pc_none(ocultar en PC)utilicé clases de utilidad como para cambiar la imagen principal y las imágenes ilustrativas a las más adecuadas para cada dispositivo.Esto no solo se limitó al ajuste del diseño, sino que también logró la optimización de la visibilidad y el volumen de transferencia de datos de acuerdo con el tamaño de pantalla de cada dispositivo.

Diseño UI/UX y flujo de usuario para maximizar la conversión

El objetivo del usuario es 'participar en la campaña'.Para lograr esta conversión, realicé un diseño de interfaz de usuario que anticipa el comportamiento del usuario.

• Colocación estratégica de CTA: En múltiples puntos donde se esperaría que el usuario comprendiera el contenido de la campaña y aumentara su deseo de participar (inmediatamente después del resumen, después de las condiciones detalladas, después de la presentación de los premios), se colocaron estratégicamente botones de entrada (CTA) con la clase .btn_entry. Esto aseguró un flujo que previene la pérdida de oportunidades, permitiendo al usuario actuar de inmediato en el momento en que piensa 'Quiero participar'.
• Provisión de información estructurada: La página completa se dividió en secciones con IDs lógicos como #about, #prize, #terms y utilizando adecuadamente etiquetas de encabezado como <h2> y <h3>. Esto no solo facilita la comprensión de la información por parte del usuario, sino que también garantiza la accesibilidad (a11y) para los motores de búsqueda y las tecnologías de asistencia.

Diseño CSS que garantiza mantenibilidad y consistencia

En este proyecto, primero introduje destyle.css para restablecer las diferencias en los estilos predeterminados entre navegadores y construir una base de diseño consistente.

Además, adopté una cascada basada en los ID de cada sección de la página (ej: #prize) y diseñé una combinación de clases genéricas reutilizables como .inner(centrado) y .btn_entry(botón común).Esto permitió una gestión adecuada del alcance de los estilos y la creación de un CSS altamente mantenible, aplicable al desarrollo de futuras páginas de campaña.