aCambio Rediseño Landing Page

Propuesta de diseño realizada en el contexto de la UX Challenger organizada por Laboratoria y Magical Startups en la cual las empresas entregaban diversos retos a sus participantes para desarrollarlos durante una semana aproximadamente.

Problemática

aCambio es una Startup basada en la economía colaborativa en base a intercambio de productos subutilizados de empresas, implementada hace décadas con éxito en otros países. La puesta en marcha en el mercado chileno lleva pocos meses del 2018, y la captación de nuevos clientes ha sido más lenta de lo esperado, pensando en que parte del problema podría ser su presencia online proponen el siguiente reto: rediseñar la experiencia de usuario de su Landing Page.

Dinámica de trabajo

Nuestro equipo de trabajo estuvo compuesto por una diseñadora de experiencia y una desarrolladora Front-end, quién también participó en parte del proceso de investigación de usuarios. Realizando las siguientes actividades:

• Análisis Eurístico Landing Page actual. Ver documento

• Entrevistas a Stakeholders.

• Entrevistas a usuarios actuales de aCambio.

• Entrevistas a potenciales usuarios del servicio.

• Testeo de usuario de Landing page actual con potenciales usuarios:

  

¿Qué encontramos?

Los usuarios que conocen y usan la plataforma, aunque propusieron algunas mejoras en el servicio, en general se mostraron satisfechos:

• Es útil y de gran ayuda.
• Valoran positivamente el servicio al cliente.
• Lo recomendarían a emprendedores.
• Les parece bueno para crear redes.
• Les gustaría que fuera adaptado para el celular
• Les parece humano y cercano.

Por otro lado las personas que no conocen aCambio si bien tienen curiosidad respecto a la modalidad de negocios, sienten desconfianza ante la propuesta tal que como se presentaba:

• Más información o la “letra chica”
• ¿Es un tipo de trueque?
• Problemas en la ubicación del registro de usuarios nuevos
• No entienden la finalidad del formulario.
• Idea es novedosa e interesante, por lo mismo quieren más información.
• Mucho texto en las descripciones.

Como equipo de trabajo unimos visiones entre la diseñadora de experiencia y la desarrolladora Front-end desde nuestras especialidades más el resultado del análisis eurístico de la landing page con los siguientes insigths:

• Pequeños problemas con estándares web y de usabilidad.
• Buen concepto de diseño, lo comprobamos con lo que nos dijeron los usuarios.
• Formulario tiene problemas de experiencia de usuario.
• Los textos se muestran lejanos para los usuarios.
• No se ha potenciado el uso de fotografías.

Análisis

Realizamos un mapa de afinidad primero recopilando los testimonios de los usuarios y entrevistas:

Opiniones de los usuarios en testeo landing page

Clasificación en debilidades y fortalezas de la web

Clasificacion de debilidades que pueden abarcar área front y/o ux

Separamos las fortalezas que tiene la web actual de acuerdo al feedback de las entrevistas y testeos, enfocandonos en los puntos problemáticos con la siguiente conclusión, si bien en general la idea de negocios era percibida como positiva y atrayente, existía un dejo de desconfianza debido a que no se entendía completamente el sistema de intercambio.

Si el problema era la información parcial que entregaba la Landing page a sus visitantes, nos hicimos la siguiente pregunta:

¿Y si optimizamos la información?

Para guiarnos en el proceso de mejora de la información entregada hicimos el siguiente ejercicio de reflexión:

Esbozando las necesidades de mis potenciales usuarios:

Ya que los usuarios actuales son escasos, creamos 3 protopersonas a partir del feedback de las entrevistas que nos sirvieran a modo de guía para empatizar con las necesidades de los posibles usuarios que tiene la plataforma actualmente y así definir propuesta de diseño.

Analizando referentes web y Landing Pages

Al querer enfocarnos en la mejora de la información hicimos un análisis de sitios web de negocios éxitosos relacionados con el intercambio de productos y/o servicios internacionales, de diversos casos de mejora en landing pages y Landing pages destacadas como MailChimp, Shopify y Lyft. Con esta nueva información llegamos a la conclusión de que:

• Debía tener mejoras en redacción de contenidos y organización de los mismos.
• Potenciar el uso de imágenes o gráficos.
• Ser adaptado a buenas prácticas web, ser web responsive y mejoras en la usabilidad del formulario.

El objetivo principal de la landing page de aCambiones que el visitante envié sus datos de contacto a través de un formulario para agendar una reunión y entregarle información de registro personalizada.

Con esto en cuenta, llegamos a la conclusión que el problema eran los contenidos de la web, los cuales no están alineados con sus objetivos comerciales, por lo tanto los visitantes que llegaban desde el buscador la abandonaban ya que esta no les ofecia una buena experiencia de usuario, por ejemplo específicamente en el formulario de contacto.

¿Y cómo podríamos mejorar la experiencia de estos usuarios? Nuestra propuesta se basa en:

Propuestas de diseño:

Definimos en líneas generales los contenidos de acuerdo a las necesidades de las protopersonas a través de la técnica de copywriting:

Y rediseñadmos los contenidos de acuerdo los objetivos planteados y a la imagen de marca actual de aCambio:

Optimizamos en primer lugar los contenidos para la versión móvil(mobile first), el resultado final se puede observar en los wireframes de alta fidelidad realizados en Figma:

Versión Móvil

Ver Landing page versión móvil en figma

Versión de Escritorio

Ver Landing page versión de escritorio en figma

Y la especialista Front-end realizó una primera versión de prototipo en html en base a la propuesta de los wireframes:

Versión Responsive HTML