Prototipado: Del concepto al boceto
Una iniciativa de eCollective
Nuestro MVP cobra vida
Tras haber puesto el foco en el problema (Fase de Empatía) y planteado nuestra solución particular (Definición e Ideación), llegamos a la fase de darle forma y color a la experiencia Ecolyp.
En este hito de nuestro recorrido, observamos como esa semilla que plantamos al inicio del proyecto se convierte en una bellísima flor llena de luz y color.
El reto
Una vez planteada nuestra propuesta de valor, el mayor reto fue transformarla en un producto digital tangible con las funcionalidades necesarias para validar nuestra hipótesis.
A su vez, tuvimos que desarrollar un apartado visual atractivo y capaz de transmitir todos los valores del proyecto que estábamos desarrollando. Este proceso incluyó la creación de una marca y un moodboard con los componentes mínimos necesarios para ser aplicados en la UI de nuestra webapp.
El siguiente paso lógico fue crear una arquitectura de la información clara y sencilla para hacer que todas las piezas de nuestro rompecabezas funcionasen de forma coherente.
Teniendo en cuenta los elementos visuales que diseñamos y todo el conocimiento obtenido, todo desembocó en la creación de un prototipo interactivo de la webapp.
Para el desarrollo de esta fase utilizamos las siguientes herramientas y plataformas:
- Miro: Puesta de ideas en común y realización de dinámicas.
- Adobe Suite: Creación del branding y elementos gráficos.
- Figma: Creación de Wireframes de baja y alta fidelidad — Prototipado e interacciones.
Todo este proceso tuvo una duración de alrededor de 2 meses divididos en sesiones semanales de 2 horas.
El proceso
Con el objetivo de convertir nuestro MVP teórico en un producto real, fuimos creando diferentes entregables hasta llegar a nuestro destino final.
1. DEFINICIÓN MÍNIMA DE MARCA
1.1. Paleta de colores: Vistiendo la ecología a todo color
Según Isaac Newton, el color es sólo una percepción de nuestro cerebro. Por ello, tuvimos que elegir una paleta de colores correlacionada con lo que queríamos transmitir.
Al tratarse de un proyecto muy relacionado con la naturaleza, valoramos colores que estuviesen estrechamente relacionados con ella.
Utilizamos Miro y la plataforma coolors.co para definir qué colores iban a conformar nuestra paleta de colores.
Se analizó la paleta más votada y se adaptaron colores con alto contraste optimizando el diseño de interfaz, obteniendo finalmente los siguientes colores:
- Verde: Asociado generalmente con la naturaleza, el crecimiento, la fertilidad y la salud.
- Blanco: Símbolo de pureza y limpieza.
- Negro: Símbolo de misterio, poder, elegancia y sofisticación entre otros. Opuesto del color blanco.
1.2. Naming: Presentando nuestra solución al mundo
Después de elegir la paleta de colores ya estábamos empezando a convertir nuestro producto digital en algo más tangible, como parte de la construcción de marca. Por eso, la siguiente sesión la dedicamos, entre otras cosas, a proponer nombres que cada compañer@ tuviéramos en la cabeza. Lanzamos unas cuantas opciones, pero ya se sabe que a veces una idea aparece al conectar otras anteriores. Así, nos dimos unos días para ir haciendo un brainstorming y que cada uno tuviera su momento perfecto de inspiración en la almohada, en la ducha o en ese semáforo eterno que da para tanto…
Pronto aparecieron nuevas propuestas que gustaron y que, para no perder las costumbres, quisimos votar. Sobre la mesa había nombres como Eco Collective, Tribeco, Ecolyp, Green Foundation, EcoReto, RecoEco, Recoveco o Ecoloc. Hubo bastantes votos para Ecollective y Ecolyp, de modo que el abanico ya se cerraba bastante.
Para entender la elección final haremos un inciso que ponga al lector en contexto. Los meses previos del trabajo en grupo habían dado para compartir muchas ideas, conceptos e iniciativas. Gracias a toda esa conciencia medioambiental, lecturas, investigaciones y ganas de hacer algo por nuestro planeta, habíamos compartido muchas ideas e inquietudes. Como soñar es gratis, propusimos distintas ideas más allá del ámbito digital que pudiesen generar un impacto social, que tuviese una repercusión, que supusiera esa chispa para el cambio.
Nos dimos cuenta de que era necesario diferenciar, por un lado, al grupo de personas y sus pretensiones de un cambio social y, por el otro, el proyecto digital que teníamos entre manos. Esta reflexión nos llevó a elegir el resultado:
- Ecollective como fusión de Eco — Collective, sería el nombre del colectivo
- Ecolyp el nombre de nuestro producto digital.
Pero… ¿Qué es eso de Ecolyp? Como concepto tendríamos un eucalipto, un árbol con muchas raíces, símil de comunidad y expandir conocimiento ecológico:
Eucalipto — Eucalyptus — Ecolyp
1.3. Claim: Los valores de Ecolyp como motor de cambio
Una de las primeras preguntas que un equipo se plantea a la hora de construir y dar forma a un producto o servicio es ¿qué queremos transmitir con nuestra marca?
Por ello dedicamos un tiempo a plasmar conceptos, palabras e ideas que pudieran formar parte del ecosistema Ecolyp. Cabía todo aquello que pudiera sugerir una relación con el medioambiente, la ecología o el reciclaje entre otros. Rápidamente sonaron muchos conceptos que fuimos agrupando en un pseudo-mind map con la intención de clasificar ideas.
Verbalizar todos estos conceptos nos ayudó a acotar el mundo en el cual nos moveríamos. El fin era pensar en posibles claims, es decir, frases que definan el entorno y el momento en que nos encontramos. Recordamos estamos en un primer MVP, con la idea de que sea escalable en el tiempo, y podamos ofrecer nuevas soluciones, muchas de ellas ya definidas.
Queríamos transmitir varias perspectivas: emocional, de conciencia, de persuasión y de invitar a la acción. Así que trabajamos con distintas propuestas, enfocadas a distintos públicos y edades, hasta quedarnos con 3 posibles claims que mostramos a continuación:
- VAMOS A CONTAR VERDADES, TRALARÁ: Conecta con la infancia de esas personas nacidas antes de los 80, en referencia a la canción infantil que decía precisamente lo contrario, vamos a contar mentiras, tralará. Pretende formar parte de una campaña donde mostrar que el mundo ha cambiado a peor en unos pocos años.
- NO LO DEJES PARA EL 2030: Es la fecha límite que, hoy en día, la mayoría de la población relacionamos con los objetivos que gobiernos, instituciones ONG’s han establecido y que los medios de comunicación nombran continuamente. Enfocada a ese segmento de la población que tiene en su mente el cambio climático pero que no tienen una actitud activa ante esta situación mundial.
- VÍSTETE DE VERDE: Un mensaje positivo y más genérico en cuanto a target de sociodemográfico, que llama a la acción y que invita a pasar a formar parte en muchos sentidos de una conciencia medioambiental. Usamos el verbo Vestir como símbolo de transformación pero también de un consumo más consciente del textil.
1.4. Logotipo: La cara visible de nuestro proyecto
Simultáneamente al naming y al claim estuvimos trabajando con el logotipo. La premisa que elegimos era jugar con elementos de la naturaleza y con otros de la vida cotidiana relacionados con el reciclaje.
Versión 1
Esta primera versión la dividimos en 2 fases. Como primer acercamiento, trabajamos con algunas propuestas visuales más genéricas para plasmar el concepto sin nombrar al producto ya que aún no lo habíamos decidido.
A continuación se expusieron diferentes propuestas de nombres, y se plasmaron unas primeras opciones para ver qué tal funcionaban.
Versión 2
En una segunda iteración y después de haber aclarado la diferencia entre nombre del colectivo (eCollective) y del de la webapp (Ecolyp), se presentaron varias opciones para cada una.
Marca definitiva
2. STORYBOARD
De la idea al papel: Un día en la piel del usuario
Nada como dibujar escenas de la vida diaria de nuestros User personas para entrar en contacto con sus situaciones y su contexto. Estos bocetos ayudan a transmitir fácilmente escenarios de uso del producto digital, tomando conciencia de ciertos detalles que, como diseñadores, se nos pueden pasar por alto.
A través de las vidas de José, María y Carla pudimos ponernos en su piel y ver qué posibles pain points u oportunidades podría encontrarse Ecolyp en el camino.
3. ARQUITECTURA DE LA INFORMACIÓN
Uniendo las piezas de nuestro árbol
De la misma forma que los afluentes de un río fluyen hacia el mar, necesitábamos contar con un sistema para organizar toda la información de forma sencilla y comprensible.
Decidimos realizar un sitemap para tener una representación visual de las diferentes secciones que iba a tener nuestra webapp y detectar posibles fallos de concepto.
Tras realizar diferentes iteraciones del mismo, decidimos simplificarlo para conseguir un flujo de información más sencillo.
4. WIREFRAMES & WORKFLOW
Del concepto al boceto
Una vez creado el sitemap nos dispusimos a hacer un primer acercamiento al diseño del prototipo a través de wireframes de baja fidelidad.
Al tratarse de un proyecto colaborativo, nos dividimos en grupos y fuimos desarrollando las diferentes categorías y/o pantallas que iban a conformar nuestra app.
Después de esta primera iteración, tomamos algunas decisiones en torno al diseño de Ecolyp. Pensando en un diseño escalable, decidimos utilizar el Carbon Design System de IBM para contar un diseño basado en componentes moleculares que nos hiciesen más fácil el proceso a la vez que favoreciesen la escalabilidad del proyecto.
Una vez importado este Design System, diseñamos los componentes que faltaban e incluimos los elementos del diseño de marca de Ecolyp y de la UI planteada para los wireframes de alta fidelidad.
5. PROTOTIPADO E INTERACCIONES
La experiencia Ecolyp cobra vida
¡Luces, cámara, acción! Como si de una película de Spielberg se tratase, comenzamos a vincular las pantallas de la versión en alta fidelidad de nuestro prototipo.
Todo tenía que funcionar como en una app de producción, por lo que nos centramos en que hubiese una coherencia visual, tanto en el contenido como en las transiciones, para guiar a nuestro usuario por los flujos de nuestra app.
Se crearon todas las interacciones entre los distintos frames y se iteró hasta reducir las inconsistencias para desarrollar la versión 2 del prototipo.
Como resultado final, se obtuvo una navegación fluida, precisa y sencilla. ¿Será aceptada por nuestro usuario?
Reflexiones
Esta fase del desarrollo de Ecolyp ha tenido un valor trascendental, ya que, nos ha permitido ponerle cara al proyecto y desarrollarlo hasta obtener un producto tangible, fiel a lo que queríamos transmitir desde un principio.
A medida que avanzábamos en el proceso, comprendimos la importancia de mantener una coherencia tanto visual como jerárquica en el desarrollo del proyecto.
Trabajar en equipo nos ha permitido ver distintos puntos de vista, aportando diferentes propuestas de valor tanto en el desarrollo de la marca Ecolyp como en el desarrollo de la capa visual del prototipo.
Todo el desarrollo de esta fase, se validará por nuestros usuarios potenciales en la fase de testeo.
Enlaces de interés
Psicología del color: https://www.oberlo.es/blog/psicologia-del-color-significados-del-color
Carbon Design System: https://www.carbondesignsystem.com/
