Desarrollo rápido de una landing para una plataforma de contenido social

Las MVPs (mínimo producto viable) nos ayudan a comprobar si nuestra idea despierta el interés de nuestro público objetivo con el mínimo esfuerzo posible. Nuestro cliente, una ONG enfocada en la justicia social, quería validar si desarrollar una plataforma de contenido social, con historias de todo el globo podría aportar valor a las suficientes personas.

PROBLEMA

Aunque el cliente tuviera los medios para desarrollar la landing que les permitiera recoger el contacto de aquellas personas interesadas en esta plataforma, creían que iban a tardar demasiado a nivel interno. Contactaron con nosotros para acelerar el desarrollo, terminar de definir el diseño UI y generar el código necesario para construir la landing en su propio dominio.

RETO

¿Cómo podríamos determinar el look and feel de una landing de contenido social asociada a una ONG? ¿Cómo podríamos tener un código totalmente funcional para llevar a cabo un experimento de Lean Startup en el menor tiempo posible?

OBJETIVO

Llevar a cabo el diseño UI y el desarrollo de una landing con feeling de plataforma de contenido en el mínimo tiempo posible.

METODOLOGÍA

Durante la reunión de Kickoff, la primera reunión con el cliente, se conversó con ellos sobre su idea, sus objetivos dentro del proyecto y las restricciones del trabajo. Esto nos permitió entender mejor qué se buscaba (y qué no) con la landing. Se aprovechó el kickoff para solicitar documentación previa necesaria para agilizar el trabajo: guías de marca, logos, referencias, etc. En este caso, los clientes habían desarrollado una preselección del contenido y un wireframe, un esquema de distribución del contenido, en el que pudimos basarnos para llevar a cabo el diseño final y aceleró tremendamente el proceso.
Una vez tuvimos todo claro, llevamos a cabo un sprint de par de jornadas para llevar a cabo una propuesta de diseño mediante un prototipo funcional. Usamos webflow para generar el prototipo.

Paso 1. Diseño del look and feel

Al partir de una estructura de contenido definida, el desarrollo de la estructura de la web fue muy rápido. El mayor reto era determinar una estética de plataforma de contenido con base en unas guías de marca de una ONG.

Optamos por tomar el color principal de la marca y oscurecerlo para obtener el fondo de la web. De esa manera, pasamos a obtener un aspecto oscuro,  similar a otras plataformas de contenido. A su vez, mantuvimos las tipografías de la marca y el color principal para los botones de CTA de la web y otros detalles de color. Preparamos gráficos similares a los del cliente para apoyar con iconos alguno de los mensajes de la web y preparamos el favicon y una imagen de portada que representase el contenido principal de la web y ayudase a los usuarios a identificar la misma como una página de contenido.

Las webs responsive se ajustan al tamaño del explorador, permitiendo que su contenido se vea bien en diferentes dispositivos

Finalmente, preparamos la navegación, la interacción de los elementos y el comportamiento responsive de la página para que se pudiera adaptar a diferentes dispositivos de la mejor manera posible.

Paso 2. Revisión del diseño y cambios naturales

En trabajos de diseño lo que queremos, lo que esperamos y lo que se transmite no tienen el mismo formato y por ende, es común que la idea cambie durante el proceso. Es normal que la primera vez que se lleve a cabo un prototipo y se presente al cliente este vea necesario llevar a cabo cambios en este. Esto se puede dar tanto por que a la hora de comunicar la idea no se han tenido en cuenta ciertos detalles o que una vez que vemos nuestra idea en la realidad nos damos cuenta de posibles mejoras. Los cambios que preceden a la primera representación real de la idea los llamamos cambios naturales.
Una vez tuvimos hecha la primera versión de la landing se la enseñamos al cliente para recoger feedback y ver cuales eran los cambios naturales que se debía hacer sobre ella. En este caso, aunque en general estaban satisfechos con el resultado decidieron cambiar cierto contenido mostrado en la landing y el estilo de los iconos generados.

El segundo sprint de una jornada permitió llevar a cabo los cambios propuestos.

Paso 3. Generación del código e integración de herramientas para la recogida de datos del experimento.

Al terminar con los cambios se volvió a presentar el diseño al cliente. Nos aseguramos que el diseño estaba de acuerdo a sus expectativas antes de generar el código necesario para integrar el diseño en su dominio específico.
Para llevar a cabo los análisis se integraron mediante código las herramientas de medición necesarias y se integraron unos formularios de hubspot. Al ser componentes externos, los formularios se debían modificar visualmente para adaptarse al estilo de la web así que vimos junto al cliente como modificar estos formularios de la manera más conveniente para ellos.

CONCLUSIONES

En menos de una semana de trabajo pudimos preparar una landing interactiva y responsive, diseñada por un experto, que permitiera al cliente llevar a cabo su experimento. En Thinkers Co. te apoyamos en tus procesos de transformación y agilizamos tus proyectos de diseño. Contacta con nosotros para saber más.