Copec Pay, la cuenta digital que se mueve contigo.

01 – Contexto

La relación
con Copec

Desde 2018, nuestro equipo ha trabajado en estrecha colaboración con varios grupos empresariales en COPEC para crear productos digitales, construir marcas y definir estrategias comunicacionales. Si bien no podemos contar todos los detalles, podemos decir que nuestros esfuerzos de colaboración han sido exitosos.
Hemos contribuido con servicios integrales, que van desde la estrategia y el desarrollo de su identidad visual adaptable y consistente en los distintos puntos de contacto y despliegue en RRSS.

02 – Introducción

El camino hacia una cuenta phyigital

Copec Pay nace como una cuenta financiera digital que busca brindar transparencia y facilidad de uso a los usuarios. El proyecto se basa en los cimientos establecidos por Muevo/App Copec, llevándolos a un nivel superior dentro de la aplicación, con una comunicación propia que aún conserva la esencia de la app principal de Copec. Para iniciar el proyecto, la investigación juega un papel fundamental.

En Match, comprendemos la importancia de detectar los movimientos de la competencia, cómo se dirigen a su público objetivo, qué mensajes comunican y cuáles son las necesidades de sus usuarios. Estos insights son clave para impulsar un proceso creativo integral y transversal en todos los formatos, permitiendo obtener resultados fructíferos en su totalidad

03 – Desafío

Proponer desde
la investigación

Luego de realizar las investigaciones correspondientes, surge la pregunta: ¿Cómo tomamos estos insights para transformarlos en algo útil para la estrategia? Aquí es donde el trabajo en equipo y colaborativo con cliente es fundamental en nuestros procesos, utilizando la información correspondiente, iterando ideas y depurando conceptos hasta llegar un producto que satisfaga las necesidades de cliente.

04 – Principio de diseño

Mantener lo
que funciona, modernizando
lo importante

El diseño sigue una línea continuista, fusionando la esencia de Muevo con las novedades que Copec presenta en su más reciente cambio de imagen. Se incorporan la diagonal, la repetición y el contraste como elementos fundamentales de la marca, los cuales transmiten movimiento y dinamismo, logrando una actualización integral y acorde a los tiempos actuales. Junto con un diseño moderno, flexible y escalable, se busca realzar la sensación de movimiento a través de sus formas y aplicaciones visuales. De esta manera, creamos una marca memorable, reconocible y funcional que se expresa en un único lenguaje de diseño.

05 – La Marca

Diseñando una
experiencia
adaptable

Copec Pay es una cuenta digital diseñada para ser fácil de usar y adaptarse a las necesidades de cada usuario. Con un enfoque en la simplicidad y la modernidad, la aplicación ofrece flexibilidad y usabilidad tanto para los usuarios existentes como para los nuevos.

La paleta cromática busca ser coherente y consistente con app Copec, integrándose de manera fluida en su medio de comunicación digital. Se ha optado por una gama de azules junto con un verde vibrante como color de acento, los cuales, representan seguridad, compromiso, modernidad e innovación. Estos colores vibrantes y digitales refuerzan la identidad.

Hemos seleccionado la tipografía Barlow como parte de nuestra identidad visual, siguiendo las directrices de la marca Copec. Barlow es una tipografía lineal de palo seco con ligeros redondeos, versátil y adecuada para diferentes elementos de texto. Su elección nos permite mantener la coherencia visual y transmitir mensajes claros y legibles en todas nuestras comunicaciones.

06 – Fotografía

Capturar
la vida en movimiento

Nuestro tono fotográfico se basa en el profundo análisis de nuestros arquetipos y su estilo de vida, capturando la esencia de vivir en movimiento. Transmitimos energía, vitalidad y conexión humana a través de imágenes auténticas. Utilizamos composiciones dinámicas y encuadres que reflejan diversidad y energía.

07 – Iconografía

Simplicidad
y cercanía

La iconografía se ha desarrollado siguiendo el principio de diseño y se ha convertido en un elemento fundamental. Su simplicidad contribuye a crear un lenguaje amigable y cercano. Los íconos fueron diseñados utilizando una grilla de 24 px para garantizar su correcto funcionamiento tanto dentro de la app Copec como en entornos digitales.

08 – Patrones

En constante
movimiento

Para enriquecer el universo visual de Copec Pay hemos creado patrones que se originan a partir de nuestro principio de diseño, utilizándolos bajo el principio de repetición para transmitir una sensación de movimiento, continuidad y dinamismo. Estos patrones pueden ser aplicados en fondos o como elementos contenedores de información visual, siendo uno de los componentes distintivos de nuestra marca.

09 – Ilustración

Comunicación
amigable y
lúdica

Hemos mantenido el sistema de ilustraciones provenientes de Muevo, ahora app Copec, que nos permite comunicar de forma sencilla, lúdica y amigable los beneficios tangibles e intangibles de Copec Pay. Estas ilustraciones se integran perfectamente con nuestros principios de diseño, utilizando elementos lineales y acentos de color para agregar dinamismo y presencia de marca en cada composición. De esta manera, logramos transmitir mensajes claros y atractivos a nuestros usuarios.

10 – Layouts

Escalables y
flexibles

Hemos creado layouts con una grilla flexible de 6 columnas para adaptarnos a diversas necesidades y formatos. Esta grilla puede ampliarse horizontal y verticalmente de manera modular, garantizando la proporción de los elementos y la coherencia visual en todas las interacciones.

11 – Ux Research

Propuesta y proceso
de investigación

Durante el proceso de desarrollo de Copec Pay, nos enfocamos en un diseño centrado en el usuario. Realizamos diversas actividades respaldadas con herramientas de investigación, en una etapa exploratoria iniciamos con workshops de co-creación e ideación con el equipo interno de Copec, entrevistas cualitativas con usuarios, encuestas, y análisis de referentes. Todo esto con el objetivo de comprender a fondo las necesidades y la relación de los usuarios con la marca.

Este enfoque de investigación y comprensión del usuario en una etapa de definición nos permitió generar journey maps, user-personas y mapa de empatía, lo que a su vez nos permitió generar nuevas propuestas y realizar testeos presenciales y/o remotos, para validar con usuarios. Durante este proceso iterativo, nos comprometimos con la mejora continua, lo que nos permitió asegurarnos que el proceso de diseño estuviera respaldado por la retroalimentación y la compresión de nuestros usuarios. Como resultado, logramos diseñar y co-crear lo que es hoy en día Copec Pay.

12 – UI

Diseño de interfaz modular y atómico

En UI trabajamos en conjunto con células copec en donde establecimos que el tipo de navegación sería en entornos para bajar la carga cognitiva y que, presentaríamos las funcionalidades modularmente. Utilizando metodología de Atomic Design para asegurar escalabilidad y flexibilidad de los componentes.

Diseñamos nuevos flujos y funcionalidades, creamos nuevos elementos del kit UI, diseñamos iconografías, e ilustraciones y el prototipo navegable del producto. Además, en el camino nos pasamos de sketch a Figma y se nos abrió un mundo mayor de posibilidades: de co-creación, comunicación, centralización del trabajo y agilidad.

Lo que conseguimos como producto final consta de tres componentes principales: Una cuenta prepago (billetera), una tarjeta física y digital. Ambas tarjetas se administran desde app Copec, y funcionalidades adicionales en la app para hacer que el proceso sea complementario con sus otras funcionalidades.

Funcionalidades para tu día a día, desde realizar pagos y cobros a tus contactos, división de cuentas, pagos y cobros presenciales QR y NFC, cuentas compartidas. Retiros y abonos desde y hacia tus cuentas bancarias con transferencias o efectivo en tiendas y cajeros automáticos. Pago en comercios físicos y electrónicos nacionales e internacionales, y más..