firmaView Transitions (nativo)
La foto viaja y el sol se dibuja
La foto de cada producto viaja desde su panel en la portada hasta la cabecera de su ficha, mientras el sol dorado del logo dibuja sus rayos.
~/portafolio/coopac-kori$ git log --reverse
Finanzas / cooperativa de ahorro y crédito · Propuesta · septiembre 2026
Hecho por MontreachInvestigación de marcaDirección creativaDiseño UX/UIDesarrolloPruebas
Una cooperativa de ahorro y crédito inclusiva, enfocada en mujeres emprendedoras. Rehicimos su web con todo su contenido en 55 páginas, una ficha por cada crédito y ahorro y un buscador de agencias, mucho más rápida en el celular.
- 55páginas con todo su contenido
- 18,3 → 1,8 shasta ver el contenido en el celular
- 4,4 → 0,36 MBdatos para abrir la página de inicio
- 22agencias con buscador
- 390detalles corregidos en revisión
/01 El encargo
Renovar su web con todo su contenido, para que cada socia entienda sus créditos y ahorros y encuentre su agencia rápido, incluso con datos prepago.
- Para quién
- Socias de Kori, en su mayoría mujeres emprendedoras del Perú, que entran desde el celular, muchas con datos prepago.
- Tarea principal
- Entender cada crédito y ahorro, con sus requisitos y pasos, y encontrar su agencia.
- Qué investigamos
- Su web actual, recorrida página por página
- Su logotipo, sus colores y sus fotos
- Su visibilidad en Google
- Su público: socias emprendedoras de todo el Perú
/02 Investigación
Antes de diseñar una sola pantalla investigamos la marca a fondo: su historia, sus símbolos, su color, su tono y a quién le habla. De ahí sale todo lo demás.
Su propósito
Inclusión financiera: créditos y ahorros para la micro y pequeña empresa, sobre todo de mujeres.
Su símbolo
El sol dorado del logotipo, que tomamos como hilo visual de todo el sitio.
Su color
El azul Kori y el dorado del sol: confianza institucional con calidez.
Su socia
Emprendedoras que entran desde el celular, muchas con datos prepago: cada megabyte cuenta.
Referentes que analizamos
Analizamos sitios de banca y finanzas reconocidos por CSS Design Awards y los evaluamos con criterios propios: confianza, cercanía, claridad en el celular y capacidad para ordenar mucho contenido.
Nedbank Private Wealth
CSS Design Awards · 2024
El referente que elegimos: un banco real con más de 60 páginas, ordenado con cortes diagonales y un sistema de color muy claro.
The Global FoodBanking Network
CSS Design Awards · 2023
El más cálido y comunitario: personas reales y cifras de impacto grandes.
Salem Co-operative Bank
CSS Design Awards · 2018
La única cooperativa del grupo: nos sirvió para ordenar el contenido, no para el estilo visual.
NexBank
CSS Design Awards · 2021
Visualmente impecable, pero oscuro y corporativo, lo contrario de lo que Kori necesita.
BonusBank
CSS Design Awards · 2020
Banca digital latinoamericana con personas reales y respuestas por tipo de cuenta.
Sight Banking
CSS Design Awards · 2023
Una propuesta amable y moderna, aunque sin el detalle de productos que exige una cooperativa.
La investigación, la dirección creativa, el diseño, el desarrollo y las pruebas los hicimos íntegramente en Montreach. Los referentes nos ayudan a entender el rubro; el resultado es siempre propio de cada marca.
/03 Dirección
A
Diagonales Nedbank
El sistema de la referencia bancaria más completa de la búsqueda, llevado a la marca Kori.
B
Ensayo documental
El relato humano de las socias emprendedoras como hilo del sitio.
C✓ elegida
Neobanco cinético
Un neobanco cálido: la solidez de la banca privada con la cinética de los neobancos, contada con el sol dorado de Kori y fotos de mujeres emprendedoras.
Por qué: Combina la confianza institucional que necesita una cooperativa supervisada con la cercanía de su público, y aguanta el volumen de contenido de Kori sin perder orden.
/04 Del boceto al diseño
Primero la estructura: jerarquía, bloques y recorrido, sin color ni fotos. Desliza para ver cómo esa misma estructura se convierte en la portada final.
/05 Sistema de diseño
Los colores y tipografías que salen de la marca y se usan como tokens en todo el sitio.
- Azul Kori
#009cdfMarca: formas, viñetas y títulos grandes - Azul enlace
#0072a8Enlaces y texto azul pequeño - Noche
#0b2233Texto principal y bandas oscuras - Dorado
#e4a92dBotón principal y acentos, como el sol del logo - Cielo
#e3f3fbFondos de sección claros - Crema
#fbf6ecFondo cálido
Libre Franklin · Titulares y texto
/06 Movimiento
Cada sitio tiene un gesto que solo puede ser suyo y nunca repetimos el de otro proyecto. Cada efecto usa la herramienta adecuada, no la de costumbre.
- Foto de portada que se abre con un corte diagonal
CSS (nativo) - Rayos SVG que se dibujan uno tras otro
CSS (nativo) - Panel de producto activo que se ensancha
CSS (nativo) - Línea de tiempo que se llena con el scroll
CSS (nativo) - Volver arriba con aro de progreso de lectura
CSS (nativo) - Cabecera que se esconde al bajar
JS propio
/07 Tecnologías
- HTML y CSS estáticos55 páginas sin gestor de contenidos ni complementos
- View TransitionsLa foto que viaja de la portada a la ficha
- animation-timeline: view()Revelados ligados al scroll sin JS
- NetlifyAlojamiento
/08 Cómo lo hicimos
- 01
Diagnóstico
Medimos su web actual: tardaba 18,3 s en mostrar el contenido en el celular y pesaba 4,4 MB.
- 02
Contenido
Llevamos todo el contenido y las fotos a 55 páginas: una por cada crédito y cada ahorro.
- 03
Referentes
Analizamos sitios de banca premiados y elegimos uno como referencia de orden y estructura.
- 04
Dirección creativa
Exploramos tres caminos y elegimos «Neobanco cinético», construido con los colores y el sol de Kori.
- 05
Diseño y desarrollo
Diseñamos fichas con requisitos y pasos, buscadores de 22 agencias y 30 gerencias zonales, noticias y formularios.
- 06
Revisión
Revisamos cada página en escritorio y en móvil y corregimos 390 detalles hasta no dejar ninguno pendiente.
- 07
Pruebas
Probamos 17 tamaños de pantalla y 173 enlaces con mouse, con el dedo y con teclado.
- 08
Propuesta
Presentamos el resultado comparando la web actual y la nueva, medidas en las mismas condiciones.
/09 Calidad
Pruebas: 17 tamaños de pantalla y 173 enlaces probados con mouse, dedo y teclado.
- 99Rendimiento
- 100Accesibilidad
- 100Buenas prácticas
- 100SEO
Lighthouse en móvil · septiembre 2026 · la web anterior obtenía 58 en rendimiento
/10 Pantallas
~/siguiente-paso$ montreach contact
Cuéntanos qué necesitas y te proponemos un primer paso concreto.