< Volver

Rediseño de una web-app de surf para ser más intuitiva y atraer más al público

FoamSurfing

|

Sr. Product Designer

El reto

Foamsurfing es una web-app donde los amantes del surf pueden informarse sobre las playas con mejores condiciones para surfear, negocios útiles cercanos a la playa como escuelas de surf, alquiler de material u hostales.

Hasta ahora la web mostraba problemas de comportamiento y tenía fallos importantes de a nivel heurístico. Por ello, el proyecto planteaba un desafío importante: Cómo hacer para mostrar toda la información que tenemos sin abrumar al usuario y haciendo una experiencia eficiente y clara.

La web

El proceso

Se realizó un análisis heurístico de la web, detectando así pain-points y factores en los que trabajar para mejorar la experiencia de los usuarios. También, se trabajó la estructura, la información y el caracter visual; así como la imágen que la marca quería transmitir a los surfistas.

El resultado

Búsqueda de playas

Para la vista principal nos centramos en el core de la web: buscar playas donde surfear. Por lo que inspirandonos en GoogleMaps y Airbnb, planteamos un mapa con buscador como página principal. Aquí los usuarios podrían buscar la playa deseada, ver información esencial de manera ágil y acceder al detalle de aquella playa deseada.

De izquierda a derecha. Búsqueda de playas en desktop, búsqueda de playas en mobile, modal de filtros, modal de búsqueda por texto y ajustes de mapa.

Vista detalle de las playas

En la vista detalle de las playas y boyas se realizó un gran trabajo de sintetización y visualización para la tabla de datos. Si analizamos las tablas de webs similares como windy o surf-forecast, peremos que hay mucha data y es complicado de comprender si no se sabe demasiado sobre el tema.

Nuestro objetivo era llegar también a surfistas primerizos, por lo que necesitabamos mostrar de una manera más visual todos esos datos y facilitarle a los usuarios la lectura y comprensión. Por ello, utilizamos muchos recursos visuales para mostrar la información de otra manera, como en el caso de las mareas.

Además, nuestra hipótesis era que muchos de nuestros usuarios consultarían la web desde el móvil, por lo que habia que rediseñar la tabla de algún modo que fuese mobile-first. Es por eso que la dividimos en acordeones con carruseles horizontales para navegar entre las horas del día. De esta manera, habia una jerarquía clara, no saturabamos pero no eliminabamos información.

Tabla pronóstico con acordeones de vientos, mareas y olas.

Backoffice y gestión de negocios

Una de las funiconalidades que proporciona Foamsurfing a sus usuarios es la posibilidad de darse de alta para guardar las playas favoritas, crearse alarmas para ser avisado cuando una playa cumpla con las condiciones ambientales correctas o incluso registrar negocios y así poder promocionarse. Todo esto también fue diseñado y pensado para una experiencia fluida y sencilla.

Vista de lista de alarmas, modal de crear nueva alarma y formulario de gestión de negocio.

Estado actual

Actualmente el equipo está trabajando en el desarrollo de la web y las subidas a producción. Aún así, ya hay muchas cosas avanzadas que puedes ver tu mismo/a accediendo a Foamsurfing.

¿Hablamos?

Si quieres que colaboremos juntos o quieres hablar de algún tema mándame un mensaje a través de mi perfil en LinkedIn o por correo. ¡No tardaré en contestar! ✨