UpFront ha sido un viaje lleno de retos y aprendizaje. Cuando los cofundadores compartieron su idea con nosotros estábamos súper entusiasmados: una plataforma de financiación de coches, para ayudar a la gente a generar ahorros que no habrían captado o descubierto. Aunque el proyecto era un nuevo paradigma, respetamos nuestro proceso habitual: empezamos con la definición y el concepto de la marca, y luego desarrollamos el diseño y creamos la maqueta.

¿Qué es?

Upfront es una plataforma de financiación de coches. Existimos para ayudar a las personas a generar ahorros que no habrían captado o descubierto sin nosotros. Esto es una mezcla de (a) hacer que se den cuenta de que esos ahorros existen y (b) reducir al máximo la fricción para conseguirlos.

¿Qué es lo que hace?

La anticipación genera un ahorro en la refinanciación de la deuda del automóvil.

El equipo de Upfront identificó que esta categoría dentro de los 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, ya que no era muy conocido: necesitaban darse a conocer.
• 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 que era desconocido, por lo que necesitaban un nuevo sitio web que transmitiera con precisión su propuesta de valor.

Nuestro proceso

En primer lugar, 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, creando un moodboard personalizado y una estrategia de marca con estos insights y los valores clave que Upfront compartió con nosotros. A continuación, elaboramos un wireframe y adaptamos el nuevo diseño del sitio web. Después de que este diseño fuera aprobado por Upfront, empezamos a trabajar en el desarrollo del proyecto en Webflow, consiguiendo finalmente la web responsive de Upfront.

Ahora explicaremos el proceso que hemos seguido:

Investigar

En la fase de investigación analizamos diferentes marcas y proyectos que fueran similares a Upfront, lo que nos permitiría tener una mejor idea de qué camino tomar al comenzar con el diseño. Así, buscamos ideas sobre marcas relacionadas con el ahorro, páginas web que indicaran cómo ahorrar más en el préstamo del coche, la refinanciación de la vivienda y el coche, empresas que ofrecieran servicios para ayudar a ahorrar, etc.

Diseño

Con las ideas recogidas tanto en la investigación que realizamos como en las que nos compartió el equipo de Upfront, comenzamos el proceso de diseño.

Para esta parte del proceso, nos apoyaremos en la herramienta Figma, que nos permitirá plasmar el diseño de la nueva web. Allí crearemos 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 las pinceladas de color protagonistas, que tratan de representar fuerza, humanidad, descubrimiento y tecnología.

• En segundo lugar, elegimos el tipo de tipografía, optando por las polisanas, que encajaban 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 de la web, buscando la sencillez, la confianza y la cercanía. Al mismo tiempo sirvieron 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 sencillez y el atractivo de la marca. Lo que buscábamos era que los usuarios pudieran navegar fácilmente por la web para facilitar el proceso de obtención de leads. Como también buscamos transmitir la sensación de confianza, ya que un servicio que ofrece a las personas un servicio para generar ahorros que no habrían captado o descubierto, en algunos casos se puede desconfiar, haciendo que las explicaciones estuvieran acompañadas de ilustraciones y fotografías, que dieran claridad en la explicación y confianza al lector.

Después de que todo el diseño fue creado y desarrollado en Figma, hicimos una propuesta final al cliente y con su aprobación empezamos a construir el diseño en Webflow.

Construcción

Una vez que tuvimos listo el diseño de la web, empezamos a construirla. Teniendo claro que el objetivo principal era ayudar a la gente a generar ahorros que no hubieran captado o descubierto.

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

Teníamos que hacer diferentes animaciones a lo largo de la web, empezando por el principio, cuando se carga la página de UpFront, haciendo una flecha bordeando una imagen dentro de un círculo. Para esto al principio en el equipo mínimo queríamos apoyarnos en React, una librería de javascript para crear aplicaciones, pero al poco tiempo de haber realizado las animaciones, nos dimos cuenta que estas no funcionaban tan bien como esperábamos, por eso decidimos cambiarlas.

El resultado

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

Disfrutamos colaborando con un cliente tan increíble que ya está revolucionando el mundo del ahorro con el claro objetivo de poder ayudar a la gente a generar ahorros. Aprendimos muchas cosas en nuestro proceso hasta la entrega final y estamos muy contentos de haber hecho un proyecto a la altura de las necesidades del cliente!

Te recomendamos encarecidamente que visites su página web y, si tienes oportunidad, realices su cuestionario para ver en qué puedes ahorrar, que seguro que te será muy útil: https://saveupfront.co/

¿Necesita lanzar un nuevo producto y necesita un sitio web? Podemos ayudarle a construirlo! Puede ponerse en contacto con nosotros a través de nuestro formulario de contacto en nuestra página web.

Espero que os haya gustado el caso. Estad atentos a más.

‍