01 – Introducción

Nuestra relación con Copec

El tiempo nos ha dejado varios aprendizajes, entre ellos, observar cómo en varios proyectos nuestros clientes han vuelto por más y es porque claro, han quedado conformes con lo que se ha hecho. Fue el caso de Copec, quienes comprobaron nuestra capacidad de escalar marcas y ofrecer nuevas soluciones frente a nuevos paradigmas. Esta vez nos planteó el desafío de crear su nuevo programa de beneficios bajo una marca que se destaque más allá de la categoría. ¡Mira cómo nos fue!

02 – Desafío

Crear una marca y su experiencia

El desafío estaba planteado: crear el branding y extensión del proyecto dentro de la app Muevo, además de su página web en distintas plataformas. El programa debía ser capaz de acoger y representar todas las marcas de Copec, y de ser el caso, a comercios externos que se unieran en un futuro. Basados en los aprendizajes y éxitos obtenidos en el proyecto de Muevo, consideramos que la marca debía ser fundada desde la experiencia de uso y que a su vez, su imagen debía ser dinámica, atractiva y reconocible en sus distintos puntos de contacto.

03 – Naming

Lo estudiado en un solo nombre

Posterior a la etapa exploratoria, recién contábamos con certezas sobre qué características debíamos desarrollar para crear un sistema de marca y posicionarnos como un programa con beneficios relevantes y alcanzables para el día a día de las personas. Así fue como mediante diferentes metodologías y herramientas de testeo con usuarios, creamos el nombre Full Copec, no sin antes pasar por un largo listado de opciones.

En este proceso cada opción se sometió a una evaluación hecha por especialistas de cada área para determinar cuál cumplía con las exigencias comunicacionales y funcionales. Los criterios a evaluar iban desde la fonética hasta la usabilidad en distintos entornos y situaciones.

Como ya sabes, Full Copec fue el ganador. Nombre 100% coherente con las expectativas de nuestros usuarios y de lo que necesitaba transmitir la promesa de marca.

Refleja un estado descriptivo frente a los desafíos que propone tu día a día, una disposición a que te muevas lleno de todo eso que te gusta y que te ayuda a continuar en movimiento en todo momento. Ahora, declarado el sentido de la marca y definido su nombre, el paso siguiente fue el desarrollo de una identidad verbal y visual.

04 – Identidad Verbal

¿Cómo habla la marca?

Sabemos que las palabras sirven para establecer y determinar el tipo de relación que tenemos con alguien. Por eso desde Match asumimos la identidad verbal como la definición de un lenguaje propio el cual sigue los principios estratégicos de la marca pero plasmándolos de forma humana, creativa y empática. Para el desarrollo de la voz consideramos 2 variables: la personalidad de la marca + su territorio comunicacional. En el caso de Full Copec, la voz requería ser espontánea, entretenida, motivadora y directa, capaz de adaptarse a diferentes situaciones, contextos, personas y puntos de contacto.

En Match buscamos la escalabilidad en cada acto comunicacional, el desarrollo de la voz, su tono y estilo, no fue la excepción. Ahora ¿cómo luce esa amigable voz?

05 – Identidad Visual

Simple y grandes capacidades

Nuestros criterios de diseño estaban orientados a crear un ecosistema phygital, el cual debía lucir simple, ser escalable (capaz de adaptarse y crecer con el paso del tiempo), adaptable – modular (que pueda adaptarse a distintos soportes se pueda relacionar con otras marcas sin perder identidad), consistente (que su identidad resista el paso del tiempo pudiendo crecer desde una raíz marcaria sólida) y memorable (que no pase desapercibida y sea reconocida entre los demás actores del mercado).

06 – Principio de Diseño

De lo mínimo a lo máximo

Antes de contarte más detalladamente cómo fue el proceso de identidad visual, es importante destacar que nuestro principio de diseño, es decir, los elementos esenciales que definen el comportamiento gráfico, comienzan desde una expresión mínima como lo son el cuadrado y el círculo. Ambas figuras representan el concepto de la marca ya que son abstracciones visuales súper adaptables, versátiles y presentes en la morfología marcaria de todas las unidades de negocio Copec consideradas en la génesis de este proyecto.

07 – Sistema Visual

Logo, Iso, Imagotipo

Desde estos 2 elementos trabajamos un sistema visual completo, el que se compuso por un isotipo que habla de variedad y movimiento (aplicado a cualquier escala), y de un logotipo el cual debía transmitir simplicidad y cercanía. Del cruce de estos elementos marcarios nace el actual imagotipo de Full Copec, una composición que puede vivir en distintos formatos y que a través de su paleta de colores representa a distintas personas y a las diferentes marcas de Copec.

08 – Tipografías

TT Norms y sus formas de uso

Para la elección tipográfica usamos criterios similares, respetando también lo ya trabajado anteriormente en la app nativa de Full Copec, Muevo. Las características esenciales de nuestra elección fueron: consistencia, simpleza, cercanía y flexibilidad. Normamos el uso tipográfico escogiendo la TT Norms Bold y regular para uso general, sin embargo también contamos con otros integrantes de esta familia tipográfica para generar contrastes y jerarquía en los mensajes aplicados en distintos soportes o piezas gráficas.

09 – Fotografía

Nuestros pilares en imágenes

Para efectos fotográficos, normamos su uso con el objetivo de transmitir los pilares de la marca: transversalidad, transparencia y cotidianidad. Este proceso no solo fue normativo, ya que para velar por la correcta ejecución de las definiciones estratégicas participamos activamente de procesos tales como casting, sesión fotográfica y posterior implementación en las piezas troncales de la marca Full Copec.

El principal desafío de este proceso es determinar la manera de tratar los distintos énfasis comunicacionales; por ejemplo ¿cómo lucen las personas consumiendo un producto (lifestyle)?, ¿cómo trataremos las recargas de combustible? ¿cómo serán los primeros planos a los beneficios / productos? Estas y otras definiciones son parte del apartado “Fotografía” que también está incluido dentro del Brandbook desarrollado para Full.

10 – Íconos

Potenciando la interacción

Al trabajar los íconos no perdemos de vista nuestro principio de diseño (simplicidad y cercanía), teniendo súper claro que son elementos fundamentales en la interfaz del usuario y que nos ayudan a entablar una comunicación más amigable y fácil de entender. Los desarrollamos en base a una grilla de 24 px, que nos aseguró su correcto funcionamiento dentro de la app y en soportes gráficos y digitales.

11 – Ilustraciones y micro ilustraciones

Cercanas y memorables

Nuestras ilustraciones respetan el sistema visual y dialogan con los íconos trabajados, destacando un estilo gráfico simple en las tonalidades de la marca, y a su vez, enseña el territorio de los beneficios con un carácter lúdico a través de piezas concretas que viven en el mundo digital y que refuerzan los mensajes a comunicar. Trabajamos las ilustraciones con un sello 2D compuestas por formas simples, de colores planos, usando la paleta de colores primaria y secundaria. Este elemento del sistema visual tiene un rol protagónico en la app, la web y en distintos contextos digitales.

Complementariamente desarrollamos un sistema de micro ilustraciones que nos permitió apoyar o expresar de manera simple, amigable y didáctica acciones concretas como procesos o beneficios tangibles e intangibles propios de Full Copec.

12 – Patrones

Movimiento constante

Para alimentar el universo visual de Full Copec y siguiendo una conducta marcaria que ya habíamos implementado en Muevo, desarrollamos patrones usados de manera repetitiva los que denotan movimiento, variedad, continuidad y dinamismo. Estos patrones están presentes en toda la comunicación de manera consistente, consolidando la experiencia phygital de Full Copec tanto en entornos digitales, o por ejemplo, en una gráfica impresa en tiendas Pronto.

13 – Layouts

Un desplante dinámico y consistente

Los layouts se componen de la distribución de todos nuestros elementos gráficos que corresponden a nuestro sistema visual. Al crearlos y normarlos, velamos que cada pieza comunicacional sea consistente y dinámica, logrando un desplante óptimo en cualquier plataforma a trabajar.

14 – UX/UI

Estrategia/ Investigación ¿Cómo funciona el programa?

Junto al branding trabajamos en paralelo el desarrollo UX/UI para integrar ambos conocimientos en el lenguaje, forma, estilo y todo lo que se debía plasmar de una marca en este “brazo” que salía desde la app de Muevo que ya se encontraba con más tiempo en uso, por lo mismo, nos vimos en el punto de tener que tomar la decisión de adaptar “el espacio” para que el diseño fuese centrado en el usuario o DCU pensando en que la visión o filosofía del diseño es donde el proceso va de la mano con información de quienes utilizarán este servicio o producto final. La principal diferencia del DCU frente a otros enfoques es que su proceso no es secuencial o lineal, sino que presenta ciclos en los que iterativamente vamos testeando el diseño y se optimiza hasta alcanzar el nivel de calidad esperado.

Es importante recordar que todo producto nunca se entregará de alguna forma como “definitivo” por lo mismo que mencionamos arriba, esto no significa que no esté terminado, si no que, nos referimos a que con el tiempo la idea es ir moldeando este diseño a lo que espera el usuario, por ello, existe un concepto central en la experiencia de usuario donde es tan importante el rol de la interacción. En ocasiones esta interacción es denominada “diálogo” y en Match nos gusta optimizar esta experiencia al máximo.

15 – Arquitectura

Ideación e Investigación

Testeamos continuamente y desde un inicio creamos algunos arquetipos para llegar a ciertos mapas de experiencias, también llamados User Journey Maps, los cuales son documentos muy relacionados con los de personajes, aquí se representó la experiencia del usuario con el producto en forma de línea de tiempo, incluyendo necesidades y motivaciones del usuario, emociones y reacciones ante el producto, sentimientos, valores, momentos de interacción, barreras o brechas de interacción.

16 – Diseño

Wireframes, interfaz y flujos

Dentro de los distintos prototipos que simulan el aspecto y comportamiento que tendrá el producto final presentamos variadas pantallas y wireframes como etapa de ideación, ya que estos diagramas nos permitían llevar a posibles acciones que tendría el usuario y la respuesta del producto describiendo mediante distintos conectores y pantallas de toma de decisiones que nos conducían a la ramificación del proyecto. Si bien no existe un vocabulario gráfico estándar para este tipo de diagramas, uno de los más extendidos y populares para productos digitales es el propuesto por Garrett.

Teniendo nuestras propuestas presentadas en flujos nos da el pase para seguir avanzando con los usuarios, sobre todo al momento de llegar con una propuesta de testeo y creemos, ha sido el mayor desafío con el contexto actual de una pandemia, trabajar con los usuarios de manera remota.

17 – Testeo interacción y diseño

¿funciona o no?

Con nuestro equipo de research aplicamos distintos test, pruebas A/B, card sorting, recordando y tratando de aplicar reglamentos heurísticos, pruebas con usuarios presentando distintos escenarios a distancia ya que, debido a la pandemia, nos adaptamos a herramientas remotas para lograr nuestro objetivo.

Pensar en testear de forma remota nunca fue algo que convenciera a todo el equipo, ya que debíamos repensar muchas veces en cómo plantear las situaciones ante el usuario remoto. Cada uno tiene un estilo propio al momento de expresar una idea y tener que llevar todo ese proceso a una plataforma digital fue un desafío enorme y no solo de cara ante el usuario, también en los procesos de trabajo internos, revisores e iteraciones, pero salimos victoriosos y con una mochila enorme de aprendizajes.

18 – Entregables

MVP y beta del programa

¿El usuario entenderá todo lo que hicimos? Es la pregunta que siempre nos hicimos desde un inicio y si bien la idea siempre fue ir construyendo un sistema donde no fuese necesario explicarle al usuario qué hacer tipo “paso a paso”, también existe una instancia de aprendizaje que incluye tiempo, observación y mecánica.

Bien recordamos el término de ‘affordance’ introducido por Norman, como una premisa o requisito de usabilidad: si nos vemos obligados a explicarle al usuario cómo usar algo, probablemente es porque en verdad se encuentre mal diseñado. La cualidad de ‘affordance’ no solo es aplicable a productos interactivos o interfaces completas, sino también a cada uno de los elementos que las componen.

Este proyecto nos enorgullece como equipo y como profesionales, ya que cumplimos con nuestras expectativas, las de cliente y de los usuarios, siendo capaces de crear algo más que una marca; creamos una experiencia a Full.