Spk28

One-page promocional del altavoz portátil de la marca SP28K, dirigida a conversión

Objetivos

Este proyecto tiene como principal objetivo el diseño de una página One-Page, promocional del SP28K, un dispositivo portátil para escuchar música.

En este proyecto el enfoque que deseaba el cliente era fundamentalmente visual, desarrollando una estética muy visual y que causara un gran impacto en nuestros potenciales usuarios.

Un reto artístico y tecnológico

Soluciones

Para poder solventar con éxito este proyecto, hemso tenido que hacer frente a una serie de retos:

1.-Dirección de arte: En este producto digital era fundamental establecer una dirección de arte clara, atrevida, impactante y que tuviera un impacto duradero en nuestros usuarios
2.-Modelado 3D: Haciendo uso de la herramienta Spline, realicé el modelado 3D de la radio, partiendo de las imágenes y especificaciones facilitadas por el cliente.
3.-Desarrollo Webflow: Usando el framework de Client-First, realizamos este desarrollo No-Code tan atrevido y vistoso.
5.- Desarrollo front-end: Realizamos un desarrollo mediante código, utilizando el framework de GSAP, pra las animaciones más complejas.

Dirección de arte

El proceso que seguimos para construir la direcciónd e arte de este sitio web fue:

1.- Escucha activa del cliente: En esta serie de proyectos la escucha activa y concienzuda del cliente es fundamental. Entender que referencias y visuales le inspiran es el punto de partida fundamental.
2.- Moodboarding: Realizar un correcto moodboard y recopilación de referencias fue muy útil para encarrilar la estética del proyecto correctamente desde un inicio.
3.-Primeras iteraciones: Con esta información trabajé la primera iteración de la propuesta visual, de secciones y pantallas clave para recopilar un feedback valiosísimo por parte del usuario
4.-Diseño final: Tras este primer feedback, aplique lo que el cliente me transmitió y pudimos ejecutar una segunda iteración que fue la definitiva por parte del cliente.

Modelado 3D

Haciendo uso de la herramienta Spline, realicé el modelado 3D de la radio teniendo en cuenta:

1.-Medidas específicas: Utilice de forma escrupulosa las medidas y características del producto a mostrar.
2.-Iteración: Este es un modelado clicable e iteraccionable, por lo que hubo que añadir estas características dentro del proyecto de Spline:
3.-Dirección de arte: A la hora de obtener los renders para la landing, hubo que alinear el trabajo de modelado, con la dirección de arte de la web en general.
4.-Hand-off: Para que el modelado fuera usable y no causara un grave perjuicio en el rendimiento del sitio web, hubo que preparar concienzudamente el mode para exportarlo con éxito.

Construcción móvil

Responsive

Una web de estas características, con una maquetación más atrevida y con esta clase de animaciones es muy complejo, por lo que es un reto en sí mismo.

No obstante, logramos un resultado muy bien adaptado, teniendo en cuenta las características del dispositivo.

Manteniendo la estética

Implementamos la misma estética en responsive teniendo en cuenta:

1.-Tipografía responsive: Construimos una escala tipográfica adaptada a las necesidades del dispositivo.
2.-Espaciados adaptados: Usamos medidas relacionadas con el tamaño del dispositivo para mantener las proporciones del diseño en cualquier formato.
3.-Optimización imágenes: En un formato de menor tamaño, también hay que realizar un trabajo de optimización de imágenes, para no penalizar la velocidad de carga.

Narrativa UX

A pesar del foco en la estética, hemos cuidado la narrativa del producto proporcionando:

1.-Características clave: Contar y vender de forma atractiva las características clave del dispositivo es clave para la conversión.
2.-Relacionar animaciones con info clave: Las animaciones siempre tienen que acompañar adecuadamente a la narrativa general de la web, para ayudar al usuario a que enfoque la información clave.
3.-Evitar la sobrecarga cognitiva: Con tantas animaciones es fácil caer en la sobrecarga cognitiva, pero utilizando amplios espaciados entre secciones, y diseminando la información correctamente, evitamos un exceso de contenido.

Los números mandan

Resultados

Velocidad de carga

+22%

Conversión

+4%

Facturación

+5%