Caso práctico: UpFront

UpFront ha sido un viaje desafiante y de aprendizaje. Cuando los cofundadores compartieron su idea con nosotros, nos entusiasmó mucho: crear una plataforma de financiación de automóviles que ayudara a las personas a generar ahorros que no habrían captado o descubierto. Aunque el proyecto era un paradigma nuevo, respetamos nuestro proceso habitual: empezamos con la definición y el concepto de la marca, luego desarrollamos el diseño y creamos la maquetación.

¿Qué es?

Upfront es una plataforma de financiación de automóviles. Existimos para ayudar a las personas a generar ahorros que no habrían obtenido o descubierto sin nosotros. Se trata de una combinación de (a) hacer que se den cuenta de que esos ahorros existen y (b) reducir la fricción en la medida de lo posible para obtenerlos.

¿Qué hace?

Upfront genera ahorros en la refinanciación de deudas de automóviles.

El equipo de Upfront identificó que esta categoría de préstamos estaba infrautilizada y decidió lanzar este producto para aprovecharla. Cómo decidieron aprovecharlo:

• Por un lado, querían dar a conocer el producto porque no era muy conocido: tenían que darse a conocer por sí mismos.
• Por otro lado, una de las grandes ventajas era que querían reducir al máximo la fricción del proceso: hacerlo lo más rápido y fluido posible.

¿Cuál era su principal problema?

Upfront estaba lanzando un nuevo producto desconocido, por lo que necesitaban un nuevo sitio web que transmitiera con precisión su propuesta de valor.

Nuestro proceso

Primero, definimos los objetivos y desarrollamos un plan de medición. En el plan de medición definimos los objetivos en los que considerábamos centrarnos. A continuación, dimos paso al proceso de diseño y creamos un moodboard y una estrategia de marca personalizados con estos conocimientos y los valores clave que Upfront compartió con nosotros. Luego, rediseñamos y adaptamos el nuevo diseño del sitio web. Tras la aprobación de este diseño por parte de Upfront, empezamos a trabajar en el desarrollo del proyecto en Webflow y, finalmente, Upfront nos ofreció el sitio web adaptable.

Ahora vamos a explicar el proceso que hemos seguido:

Investigación

En la fase de investigación analizamos diferentes marcas y proyectos que eran similares a Upfront, lo que nos permitiría tener una mejor idea de qué camino tomar al comenzar con el diseño. Así que buscamos ideas sobre marcas relacionadas con el ahorro de dinero, sitios web que nos indicaran cómo ahorrar más en el préstamo de un automóvil, refinanciación de viviendas y automóviles, empresas que ofrecieran servicios para ayudarlo a ahorrar dinero, etc.

Diseño

Con las ideas reunidas tanto en la investigación que realizamos como en las ideas compartidas con nosotros por el equipo de Upfront, comenzamos el proceso de diseño.

Para esta parte del proceso, nos apoyaremos en la herramienta Figma, que nos permitirá capturar el diseño del nuevo sitio web. Ahí creamos una guía de estilo con diferentes aspectos:

• Lo primero que hicimos fue establecer qué colores darían vida a la marca. Finalmente nos decantamos por los tonos claros, que buscaban dar sencillez, confianza, facilidad de uso y cercanía; frente a los trazos de color protagonistas, que intentan representar la fuerza, la humanidad, el descubrimiento y la tecnología.

• En segundo lugar, elegimos el tipo de tipografía, eligiendo polisanos, que encajaran con lo que la marca quería transmitir, dándole un toque de confianza y frescura.

• En tercer lugar, también introdujimos ilustraciones dentro del diseño web, buscando la sencillez, la confianza y la cercanía. Al mismo tiempo, servían de acompañamiento a las explicaciones dentro de la web, facilitando la comprensión de la misma.

• En cuanto a nuestra propuesta de UX, desarrollamos una arquitectura basada en la simplicidad y el atractivo de la marca. Lo que buscábamos era facilitar a los usuarios la navegación por el sitio web para facilitar el proceso de obtención de clientes potenciales. Como también buscábamos transmitir el sentimiento de confianza, dado que un servicio que ofrece a las personas un servicio para generar ahorros que no habrían captado o descubierto, en algunos casos puede llegar a desconfiar, las explicaciones iban acompañadas de ilustraciones y fotografías, lo que daba claridad a la explicación y confianza al lector.

Después de crear y desarrollar todo el diseño en Figma, hicimos una propuesta final al cliente y, con su aprobación, comenzamos a construir el diseño en Webflow.

Construir

Una vez que tuvimos el diseño web listo, empezamos a construirlo. Tener claro que el objetivo principal era ayudar a las personas a generar ahorros que no hubieran captado o descubierto.

Por eso, para lograr que el sitio web pudiera transmitir lo que el cliente quería, nos basamos en la herramienta Webflow para su maquetación, buscando que fuera sencilla y atractiva, por lo que decidimos integrar animaciones en ella, con el claro objetivo de captar la atención del lector y servir de soporte para las explicaciones.

Tuvimos que hacer diferentes animaciones en todo el sitio web, empezando desde el principio, cuando se carga la página de UpFront, haciendo una flecha que bordea una imagen dentro de un círculo. Para ello, al principio, en un equipo mínimo queríamos confiar en React, una biblioteca de JavaScript para crear aplicaciones, pero poco después de hacer las animaciones, nos dimos cuenta de que no funcionaban tan bien como esperábamos, por eso decidimos cambiarlas.

El resultado

Con el diseño final lanzado con éxito, solo podemos esperar a ver si cumple con las expectativas de nuestros objetivos, ¡y eso es exactamente lo que ha sucedido!

Disfrutamos colaborando con un cliente tan increíble que ya está revolucionando el mundo del ahorro con el objetivo claro de poder ayudar a las personas a generar ahorros. Hemos aprendido muchas cosas en nuestro proceso previo a la entrega final, ¡y estamos muy contentos de haber realizado un proyecto que cumplía con los requisitos del cliente!

Te recomendamos encarecidamente que visites su sitio web y, si tienes la oportunidad, respondas a su cuestionario para ver en qué puedes ahorrar, lo que estoy seguro de que te será de gran ayuda: https://saveupfront.co/

¿Necesitas lanzar un nuevo producto y necesitas un sitio web? ¡Podemos ayudarte a crearlo! ¡Puede contactarnos a través de nuestro formulario de contacto en nuestro sitio web!

¡Espero que os haya gustado la funda! Estén atentos para más información.

‍