## **Pago referenciado SAT v.1**

* Rol: **Product Designer**

* Colaboradores: **Product Manager, Tech lead**

* Compañía: **Fondeadora®**

* Duración: **4 semanas  🏎️💨**

* Estatus: **Producción**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Ffondea-test%2F54f08742-c43a-4fc3-a7a9-20d9cec63681.mp4?alt=media&token=8fa8b5b9-47ff-4184-934c-684060afe06e","id":"54f08742-c43a-4fc3-a7a9-20d9cec63681","width":2720,"height":1600,"filename":"Referenced-payment-header.mp4","type":"video/mp4","caption":"","border":true}]}
```

---

### **Contexto**

En 2023, el principal reto de Fondeadora era **fidelizar a los usuarios**, convirtiéndose en la cuenta principal para empresas al ofrecer una oferta de valor sólida y aumentar la retención.

FONDEA | Empresarial es un producto dirigido a **Personas Morales y PFAEs**, diseñado para ofrecer funcionalidades clave que permiten la gestión y crecimiento financiero de las empresas:

* Multi-usuario

* Crédito revolvente

* Rendimiento del 5%

* Transferencias ilimitadas

* Wallet: Tarjetas física y virtuales

> Además, fui el responsable de diseñar todas estas funcionalidades, asegurando que cada una respondiera a las necesidades específicas de nuestros usuarios 🤓.

### **Objetivo del proyecto**

Mi responsabilidad fue **definir y diseñar** la primera versión de **Pago de Servicios** dentro de la plataforma. El objetivo clave era habilitar la posibilidad de que los usuarios pudieran realizar **pagos referenciados al SAT** directamente desde la plataforma, usando el servicio de **Actinver** como intermediario.

### **Desafíos**

El proyecto presentó varios desafíos técnicos y regulatorios. Las limitaciones impuestas por el SAT y la integración con Actinver requerían una arquitectura de diseño que no solo cumpliera con las normativas legales, sino que también mantuviera una **experiencia de usuario fluida y segura**. Asimismo, el manejo de errores y la sincronización con el servicio del proveedor externo.

```cv
figma
{"url":"https://www.figma.com/proto/TPiMsp3sUTolyI3WJzb6F9/FONDEA-%E2%8E%AF-Pago-de-servicios?page-id=0%3A1&node-id=1-6&node-type=frame&viewport=852%2C549%2C0.17&t=m6wGNZa147Fa4mxh-1&scaling=min-zoom&content-scaling=fixed"}
```

---

### **Solución**

Diseñé la arquitectura de la funcionalidad basada en cuatro elementos clave: el horario de servicio, el manejo de errores, la autorización de transacciones y la integración de la línea de captura. Estas características garantizaron una experiencia sencilla, segura y sin fricciones para los usuarios.

Puedes revisar las pantallas clave a detalle  **[aquí](https://www.figma.com/proto/TPiMsp3sUTolyI3WJzb6F9/FONDEA-%E2%8E%AF-Pago-de-servicios?page-id=1%3A1073&node-id=1-2825&node-type=canvas&viewport=4095%2C2077%2C1&t=SsvWMjHfyQ0uxJMz-1&scaling=min-zoom&content-scaling=fixed)** y el manejo de errores **[aquí](https://www.figma.com/proto/TPiMsp3sUTolyI3WJzb6F9/FONDEA-%E2%8E%AF-Pago-de-servicios?page-id=1%3A2826&node-id=1-3266&node-type=canvas&viewport=2206%2C-8%2C0.35&t=FuBMzpwpnHsq0AIr-1&scaling=min-zoom&content-scaling=fixed)**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Ffondea-test%2F84de31bd-b6d2-46d2-bbc1-021163a56a93.mp4?alt=media&token=6fc0f59e-3100-4a74-ad66-a0b49d90b80b","id":"84de31bd-b6d2-46d2-bbc1-021163a56a93","width":2720,"height":1600,"filename":"Referenced-payment 60FPS.mp4","type":"video/mp4","caption":"Motion study ⎯ Exploración de nuevos componentes","border":true}]}
```

---

### **Resultados e impacto**

* En la fase inicial, se liberó la funcionalidad en 3 lotes de 100 usuarios con registro de Persona Moral, seleccionados según su comportamiento transaccional, obteniendo una **tasa de apertura del 64.75%** 🤩.

* Más de **8 millones de pesos** transaccionados durante las 2 primeras semanas de liberación 🤑.

* Aumento del **32.8% en la frecuencia de depósitos** en la plataforma, especialmente en fechas clave de pagos al SAT 💸.

### **Siguientes pasos**

* **Implementar pagos adicionales**: Explorar la necesidad de los usuarios por integrar más servicios, como pago al IMSS y otros impuestos, diversificando las opciones de pago dentro de la plataforma.

* **Implementación en la aplicación móvil**: Integrar la funcionalidad de Pago de Servicios a la aplicación móvil, permitiendo a todos los usuarios realizar pagos directamente desde sus teléfonos, brindando mayor comodidad y accesibilidad.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Freference-payments%2Fb2af1147-ca3d-403d-aaec-8f04a225a048.png?alt=media&token=cab65fe5-3fa5-4f72-bacb-7553f34a7e68","id":"b2af1147-ca3d-403d-aaec-8f04a225a048","width":4800,"height":3300,"filename":"demo.png","type":"image/png","caption":"Aplicación móvil ⎯ Exploración visual ","border":false}]}
```

---

### **Herramientas utilizadas**

* **Miro**: Product Discovery

* **Figma**: Arquitectura y Diseño de interfaz

* **Lottielab**: Animación

* **Zendgrid**: Maquetación y envío de comunicación email

* **Notion**: Documentación

* **Doble diamante**: Metodología de diseño

FONDEA | Empresarial ⎯ Pago de servicios

## **Verko**

* Rol: **Product Designer**

* Compañía: **Automatia**

* Duración: **4 días 🏎️💨**

* Estatus: **En progreso**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fverko%2F68099fe0-6fa2-4199-b123-e736a3bc4006.mp4?alt=media&token=8f31977e-72d0-49c3-b3ef-f904fd15f857","id":"68099fe0-6fa2-4199-b123-e736a3bc4006","width":2160,"height":2160,"filename":"verko.mp4","type":"video/mp4","caption":"","border":false}]}
```

---

### **Contexto**

**Verko®** es un software para **contact centers inbound**, pensado para equipos que manejan sus propias operaciones internas. La idea es ayudar a las empresas a organizar mejor sus centros de llamadas, optimizando la **productividad de los agentes** y facilitando la vida a los **supervisores** con herramientas fáciles de usar. Todo, con un enfoque en operaciones de soporte **entrantes**.

### **Discovery**

Mi proceso comenzó con una **lluvia de ideas** sobre conceptos clave en la industria de contact centers, como la **gestión de llamadas** y el **cumplimiento de SLA**. Luego de identificar a los **usuarios principales** (supervisores, agentes y gerentes), hice un poco de **desk research** para ver cómo la competencia posicionaba sus productos. Esto me permitió identificar cómo Verko® podía destacarse con un enfoque más ágil y accesible con un lenguaje más expresivo.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fems6U9NR6HUNdEU4CWJ5%2Fd57934d2-81fc-49db-b7b5-ee58021a0b3a.png?alt=media&token=dcb4a809-94c1-49bf-af52-e882c81730e3","id":"d57934d2-81fc-49db-b7b5-ee58021a0b3a","width":3840,"height":2160,"filename":"1.png","type":"image/png","caption":"Lluvia de ideas ⎯ Descomposición del problema ","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fems6U9NR6HUNdEU4CWJ5%2F4d3330fa-2aca-4d0c-8c79-33462a63f0a0.png?alt=media&token=46c937a0-286b-47bd-8426-9703957cd19e","id":"4d3330fa-2aca-4d0c-8c79-33462a63f0a0","width":3840,"height":2160,"filename":"2.png","type":"image/png","caption":"Power users ⎯ Definición de usuarios","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fems6U9NR6HUNdEU4CWJ5%2F282e6d7c-0fe9-48ec-8812-3f47992786c1.png?alt=media&token=8892baca-7f4a-45b9-94ce-5354fa4e630e","id":"282e6d7c-0fe9-48ec-8812-3f47992786c1","width":3840,"height":2160,"filename":"3.png","type":"image/png","caption":"Benchmark ⎯ Mapeo y análisis competitivo","border":false}]}
```

---

### **Identidad Visual**

El diseño visual de Verko® lo enfoqué en ser **vibrante**, **moderno, minimalista y tecnológico**. Usé un **moodboard** para guiar el estilo, con colores modernos y tipografías expresivas que comunicaran profesionalismo y agilidad. El objetivo era tener una interfaz que no solo fuera funcional, sino que también transmitiera **cercanía**, **confianza y modernidad**, sin distraer a los usuarios de sus tareas diarias.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fems6U9NR6HUNdEU4CWJ5%2Fab16c043-5470-46b7-ac4e-b1536de0e369.png?alt=media&token=38d6fcfb-0ed0-4e62-9dca-764a06348f9d","id":"ab16c043-5470-46b7-ac4e-b1536de0e369","width":3840,"height":2160,"filename":"4.png","type":"image/png","caption":"Propuesta de naming ⎯ Generado con IA basada en la personalidad de marca","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fems6U9NR6HUNdEU4CWJ5%2F4ab1cc2e-2525-4bf4-80cf-774bd05746a7.png?alt=media&token=470e7c11-1bfd-4013-9fa5-b0d1a8923c6d","id":"4ab1cc2e-2525-4bf4-80cf-774bd05746a7","width":3840,"height":2160,"filename":"5.png","type":"image/png","caption":"Logo moodboard ⎯ Recopilación de logotipos basados en estilo y expresividad","border":false}]}
```

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fems6U9NR6HUNdEU4CWJ5%2Faa969b0a-a82c-43cf-b467-89fb563fc3cc.png?alt=media&token=706132e3-5bf4-4963-9126-dd6a0b8d3c7b","id":"aa969b0a-a82c-43cf-b467-89fb563fc3cc","width":2160,"height":2160,"filename":"6.png","type":"image/png","caption":"Identidad visual ⎯ Propuesta","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fems6U9NR6HUNdEU4CWJ5%2Fedd0da47-a49b-406e-9449-05767f6e23cb.png?alt=media&token=b2353407-8f95-4d97-a009-829500fa074b","id":"edd0da47-a49b-406e-9449-05767f6e23cb","width":2160,"height":2160,"filename":"9.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fems6U9NR6HUNdEU4CWJ5%2Fe08cbe36-8861-4b5a-ad85-bb22eceaca66.mp4?alt=media&token=e3564c15-aa37-402f-b96b-d0cf886da331","id":"e08cbe36-8861-4b5a-ad85-bb22eceaca66","width":2160,"height":2160,"filename":"verko-UI-bits.mp4","type":"video/mp4","caption":"","border":false}]}
```

---

### **Diseño de Producto**

Para el prototipo, me centré en el **usuario 'Supervisor'**, creando un **task flow** que reflejara su día a día:

1. **Inicio de sesión**,

2. **Revisión de métricas clave** (tiempos de espera, llamadas en cola, etc.),

3. **Detección de problemas** (alertas visuales si algo anda mal),

4. **Ajuste de recursos** (redistribuir agentes),

5. **Monitoreo** post-ajuste,

6. **Cierre del día** (revisión de estadísticas y reportes).

La interfaz está diseñada para que el supervisor pueda tomar decisiones rápidas en tiempo real y ajustar las operaciones sin perder tiempo.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fverko%2Faaa26011-f036-404e-afc0-9b9e38774bd7.png?alt=media&token=b29f11e3-f4c3-4a20-923d-620874e33f43","id":"aaa26011-f036-404e-afc0-9b9e38774bd7","width":3840,"height":2160,"filename":"12.png","type":"image/png","caption":"Task flow ⎯ Mapeo de acciones","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fverko%2Ffbf8829c-a961-416a-9a3f-a52998397a5f.png?alt=media&token=fbd572a8-6053-4d1b-a96a-5612efdea45b","id":"fbf8829c-a961-416a-9a3f-a52998397a5f","width":2178,"height":2160,"filename":"13.png","type":"image/png","caption":"Foundation ⎯ Tipografía de sistema","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fverko%2Fa26dc0bc-18fd-4327-b1d0-e6de7ccd910f.png?alt=media&token=f24124f8-e8d2-46d2-a177-a68ee0e5be72","id":"a26dc0bc-18fd-4327-b1d0-e6de7ccd910f","width":3840,"height":2160,"filename":"14.png","type":"image/png","caption":"Foundation ⎯ Paleta de colores","border":false}]}
```

---

### **Solución final**

Verko® ofrece una solución fácil de usar para gestionar **call centers** internos, ayudando a los equipos a **ser más eficientes** y mejorar la **experiencia del cliente**. Con un diseño intuitivo, moderno y orientado a la optimización del rendimiento, Verko® está diseñado para simplificar el trabajo de los supervisores y agentes, haciéndolo todo mucho más fluido y amigable.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fverko%2F312dded2-eb90-42bf-9cfd-114d8a1564c6.mp4?alt=media&token=9cee3832-428f-4f02-8353-c048eb6166ac","id":"312dded2-eb90-42bf-9cfd-114d8a1564c6","width":2160,"height":2160,"filename":"verko.mp4","type":"video/mp4","caption":"Verko ⎯ Expresión de marca","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fverko%2F5d3667aa-ab27-4eb1-83d5-1ad135c56cf1.mp4?alt=media&token=a1ac7e3a-db3e-4ef3-b550-d4d6283c6329","id":"5d3667aa-ab27-4eb1-83d5-1ad135c56cf1","width":2880,"height":1760,"filename":"Verko-UI.mp4","type":"video/mp4","caption":"Dashboard ⎯ Vistazo general","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fverko%2F5d9b689f-aaf6-4846-83b3-93df9ca22865.mp4?alt=media&token=4f94ea7c-6eaf-4332-86e4-a45f23750dcb","id":"5d9b689f-aaf6-4846-83b3-93df9ca22865","width":2880,"height":1760,"filename":"Verko-queue.mp4","type":"video/mp4","caption":"Queue ⎯ Asigna agentes con un clic","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Fverko%2F539bec3b-da8d-4905-9929-e80f922c35fb.mp4?alt=media&token=e1a560de-adf2-40c4-aac3-0c1d914750f2","id":"539bec3b-da8d-4905-9929-e80f922c35fb","width":2880,"height":1760,"filename":"Verko-team.mp4","type":"video/mp4","caption":"Monitoring ⎯ Gestiona el estatus de tus agentes","border":false}]}
```

---

### **Siguientes pasos**

* **Prototipar nuevas secciones**: Crear prototipos funcionales para las siguientes áreas:

  1. **Reportes diarios automáticos**: Incluir visualizaciones claras y útiles de rendimiento y métricas clave.

  2. **Gestión de equipo**: Facilitar la asignación y supervisión de agentes, con opciones de ajuste en tiempo real.

  3. **Módulo para Gerentes y Agentes**: Diseñar un espacio dedicado donde tanto gerentes como agentes puedan acceder a la información y funcionalidades relevantes para su rol.

* **Validación de métricas**: Probar las métricas propuestas en el sistema con datos reales o simulados para asegurar que reflejan correctamente el rendimiento del call center y ofrecen insights accionables y objetivos.

---

### **Enlaces de interés**

[Call center: ¿qué es y cómo funciona? \[GUÍA BÁSICA\]](https://www.zendesk.com.mx/blog/que-es-call-center/?gad_source=1&gclid=Cj0KCQjwgrO4BhC2ARIsAKQ7zUmOAsPf3HSrVsX61yi8nPEIAXeTuoDR3SqTev20xcMG3aqX2BuMTsoaAjxBEALw_wcB)

[What is a call center dashboard?](https://www.geckoboard.com/dashboard-examples/support/call-center-dashboard/)

[What is an Inbound Call Center?](https://getvoip.com/blog/inbound-call-center/)

---

### **Herramientas utilizadas**

* **Figma jam**: Product Discovery

* **Figma**: Diseño de interfaz

* **Jitter video**: Animación

* **GPT 4o**: Validación de conceptos

Verko ⎯ Un Call Center, pero cool

## **Optimización de diseño enfocada en aumentar el número de conversiones a través del portal de ventas: maximización de la velocidad en la realización de tareas.**

* Rol: **Diseñador principal**

* Colaboradores: **Project manager**, **UX designer**

* Compañía: **Multiplica**

* Estatus: **Liberado**

---

### **Contexto**

Grainger es una empresa líder en distribución de productos de mantenimiento, reparación y operación industrial. Su producto principal es un e-commerce enfocado en empresas y profesionales en búsqueda de compra y administración de suministros.

### **Objetivo**

Grainger llegó a Multiplica con el requerimiento de traducir hallazgos de investigación de usuario en mejoras de interfaz con el objetivo de mejorar la experiencia de usuario en la interacción de búsqueda y compra a través del portal de venta.

[grainger.com.mx](https://www.grainger.com.mx/)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2FnP0PwzOEoObvRr4BkgiQ%2F97da48f0-6eee-4d5b-8ce8-a4a0e639f022.jpg?alt=media&token=7ec16466-d75e-42d7-a3d7-93fda28066cf","id":"97da48f0-6eee-4d5b-8ce8-a4a0e639f022","width":8192,"height":3936,"filename":"before.jpg","type":"image/jpeg","caption":"Grainger, interfaz previa a la colaboración con Multiplica","border":false}]}
```

### **Proceso**

Enfoque holístico ⎯ Basándonos en reportes de investigaciones previas proporcionados por The Cocktail (Usabilidad) y Usaria (Experiencia del cliente), mi equipo y yo desarrollamos un informe de priorización de insights para que sirviera como guía durante el proceso de rediseño.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2FnP0PwzOEoObvRr4BkgiQ%2F8d3db2ca-721a-46a5-bea0-2428bcc94478.jpg?alt=media&token=f1257e46-2637-4c1e-8952-18697028982d","id":"8d3db2ca-721a-46a5-bea0-2428bcc94478","width":2760,"height":1784,"filename":"process.jpg","type":"image/jpeg","caption":"Priorización de hallazgos","border":false}]}
```

---

### **Resultado**

Experiencia personalizada ⎯ Con la estrategia en marcha, diseñamos una propuesta que nos permitió impulsar la visión del diseño sin perder de vista las necesidades de los usuarios y las limitaciones del negocio. Una experiencia de usuario basada en el método de entrega: promociones, disponibilidad de stock y fecha de entrega según la opción de entrega elegida.

### **Pantallas clave, búsqueda de producto**

```cv
figma
{"url":"https://www.figma.com/proto/QzV9C1wq08LDK0iWGSKmIs/Grainger?page-id=0%3A1&node-id=1-7&node-type=FRAME&viewport=-1803%2C876%2C1&t=TRxIaANn0V6UAUY5-1&scaling=min-zoom&content-scaling=fixed"}
```

---

### **Pantallas clave, flujo de compra**

```cv
figma
{"url":"https://www.figma.com/proto/QzV9C1wq08LDK0iWGSKmIs/Grainger?page-id=1%3A12&node-id=1-13&node-type=CANVAS&viewport=2102%2C671%2C1&t=rANDqZN2WIODvOjP-1&scaling=min-zoom&content-scaling=fixed"}
```

---

### **Handoff, guías de estilo**

```cv
figma
{"url":"https://www.figma.com/proto/QzV9C1wq08LDK0iWGSKmIs/Grainger?page-id=1%3A19&node-id=1-20&node-type=FRAME&viewport=2050%2C551%2C0.44&t=UOP7YfhRWJGdufJe-1&scaling=min-zoom&content-scaling=fixed"}
```

Grainger ⎯ Optimización de diseño

### **GBM**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Farchive%2Fbc5b67b9-7633-4f25-bed3-20bf9a97505d.mp4?alt=media&token=30bdda0f-da43-4e31-a910-64d4ee1b4853","id":"bc5b67b9-7633-4f25-bed3-20bf9a97505d","width":2160,"height":2160,"filename":"Hide amount.mp4","type":"video/mp4","caption":"GBM Private — Hide amount","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Farchive%2F52973403-3c13-436b-9926-1470d7b87372.mp4?alt=media&token=e01ab211-fa05-4654-9740-69fa2b518fe6","id":"52973403-3c13-436b-9926-1470d7b87372","width":2880,"height":2160,"filename":"Reorder-accounts.mp4","type":"video/mp4","caption":"Accounts — reorder","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Farchive%2F9b53d4a8-c1f6-449e-83fb-84c4e43a6df6.mp4?alt=media&token=dfb0e14b-f025-44a6-81af-1152b71c8a03","id":"9b53d4a8-c1f6-449e-83fb-84c4e43a6df6","width":2160,"height":2160,"filename":"Advisor.mp4","type":"video/mp4","caption":"Advisor — Launcher","border":false}]}
```

---

### **Fondeadora**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Farchive%2F4a0dd9e0-d277-4432-aab2-1c41c54ca29b.mp4?alt=media&token=045a3338-9ed3-4a0b-b215-4e7092f4441f","id":"4a0dd9e0-d277-4432-aab2-1c41c54ca29b","width":2720,"height":1600,"filename":"FONDEA-Splash.mp4","type":"video/mp4","caption":"Spectrum ⎯ Lenguaje visual","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Farchive%2F63a463b1-6ad7-4b0b-8edc-077af15bda16.png?alt=media&token=cda1a42a-9bb9-4b02-bcf6-55d2304c0907","id":"63a463b1-6ad7-4b0b-8edc-077af15bda16","width":1440,"height":2048,"filename":"FN Card.png","type":"image/png","caption":"FN  ⎯ Tarjeta física","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Farchive%2F992c1872-b343-47bb-a610-2281e36dec89.mp4?alt=media&token=f6a4a1bf-00a3-4c59-9095-7f4df3eeae42","id":"992c1872-b343-47bb-a610-2281e36dec89","width":2880,"height":1760,"filename":"F-Insights (1).mp4","type":"video/mp4","caption":"Insights ⎯ Landing de funcionalidad","border":false}]}
```

---

### **Zeneca**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2Farchive%2Fc8e244f5-3e97-4f5c-82c1-1f59b6bf3b02.mp4?alt=media&token=e0fb4171-9cbc-4a82-9379-5fe66085a31b","id":"c8e244f5-3e97-4f5c-82c1-1f59b6bf3b02","width":1600,"height":1600,"filename":"Zeneca-OB.mp4","type":"video/mp4","caption":"App móvil ⎯ Dirección de diseño","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2FnTVde35rq6TYARb2aEHi%2F3b212e78-54d0-40a9-8d53-035050c65fcd.mp4?alt=media&token=2829e4ce-38ed-4b3a-b0da-95f6f6f5bfcf","id":"3b212e78-54d0-40a9-8d53-035050c65fcd","width":1600,"height":1600,"filename":"Zeneca-Transfer.mp4","type":"video/mp4","caption":"","border":false}]}
```

---

### **Zuno**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2FnTVde35rq6TYARb2aEHi%2Fc8db0e48-a311-421a-8975-2c14dbff2f32.mp4?alt=media&token=b56f0b14-82cb-4887-b488-ef58af8871dc","id":"c8db0e48-a311-421a-8975-2c14dbff2f32","width":2880,"height":1680,"filename":"Zuno-metrics.mp4","type":"video/mp4","caption":"Métricas ⎯ Concepto visual","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2FnTVde35rq6TYARb2aEHi%2F21b61d95-5fe7-4f92-9b6f-698947a2c347.mp4?alt=media&token=154f5f50-3caa-426d-b064-1ad00af77086","id":"21b61d95-5fe7-4f92-9b6f-698947a2c347","width":2880,"height":1680,"filename":"Zuno-benchmark.mp4","type":"video/mp4","caption":"GA ⎯ Activar Benchmark","border":false}]}
```

---

**Objects in practice**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2FnTVde35rq6TYARb2aEHi%2F9cdf534a-1d0c-496d-86d2-5741b7f24de6.mp4?alt=media&token=49cf907a-d97a-4a65-95d0-e1da84837416","id":"9cdf534a-1d0c-496d-86d2-5741b7f24de6","width":3840,"height":2160,"filename":"001.mp4","type":"video/mp4","caption":"Postal de Yona Lee ⎯ Dirección de arte","border":false}]}
```

Archivo ⎯ Visual, Motion y UI

Untitled

## **Un rediseño web completo que comunica los mensajes clave y el valor de KTBO: su trayectoria, relevancia y cultura interna para atraer talento.**

* Rol: **Diseñador**

* Colaboradores: **Líder de proyecto, Diseñador senior**

* Compañía: **23 design**

* Estatus: **Archivado**

Última versión [aquí](https://web.archive.org/web/20180903144840mp_/https://ktbo.agency/us)

---

### **Contexto**

KTBO es un grupo de creativos apasionados por crear soluciones innovadoras combinando creatividad y tecnología, especialistas en medios digitales.

KTBO llegó a 23 design con el objetivo de rediseñar su sitio web.

### **Proceso**

Diseñando con propósito ⎯ Para entender el contexto de KTBO, realizamos dos sesiones de co-diseño que nos ayudaron a establecer nuestra visión del producto: *Objetivos*, *Knowledge graph*, *Mapas de empatía* y *Moodboards*.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FynA1zLCyTBR2FkfZ4LW4QD5wWEw2%2FzNpv0haDsfXHQ6BnAczD%2Fba3a81b4-67b0-4533-9765-51691c3c1748.png?alt=media&token=82645f2a-6cdb-49be-95c8-0c5f28eacf24","id":"ba3a81b4-67b0-4533-9765-51691c3c1748","width":2760,"height":1784,"filename":"process.png","type":"image/png","caption":"KTBO, visión de producto","border":false}]}
```

### **Resultado**

Definiendo el lenguaje visual correcto ⎯ Para desarrollar el lenguaje visual, pasamos tiempo en la oficina de KTBO para comprender sus principios, inspiración, trabajo y trayectoria detrás de la marca. De digital a digital.

### **Lenguaje visual**

```cv
figma
{"url":"https://www.figma.com/proto/oX6Q0Ng6ebI4nMOi9RjzNt/KTBO?page-id=0%3A1&node-id=1-2&node-type=CANVAS&viewport=937%2C597%2C0.48&t=csA4VmQntRxiFPqY-1&scaling=min-zoom&content-scaling=fixed"}
```

---

### **Exploraciones finales**

```cv
figma
{"url":"https://www.figma.com/proto/oX6Q0Ng6ebI4nMOi9RjzNt/KTBO?page-id=1%3A23&node-id=1-31&node-type=FRAME&viewport=889%2C549%2C0.26&t=tGIocvg1P4CB4zgx-1&scaling=min-zoom&content-scaling=fixed"}
```