El documento presenta una guía de estilo (styleguide) para una institución bancaria. Explica los beneficios de tener un sistema de diseño unificado, como acelerar el proceso de diseño y desarrollo, mejorar la consistencia y reducir la deuda técnica. También describe los pasos iniciales para implementar el sistema de diseño, incluyendo entrevistas de descubrimiento, el equipo requerido y los componentes mínimos viables a adoptar.

1. Te comparto mi
styleguide

3. FONT
STYLES
COLOR
PALETTE
BUTTONS

4. ¿Por dónde comienzo?
¿Cuáles son las personas claves?
¿Cómo logro la adopción?
¿Cuándo sé que mi sistema funciona?
¿Quién usará el design system?

5. "Estoy por mi cuenta.
He creado un styleguide y un poco
de código en mis tiempos libres,
pero nadie más lo está usando.
¿Cómo doy el siguiente paso?”

6. Cada día creamos
experiencias para más
dispositivos, más
usuarios y más
marcas, etc…

7. ¿Por dónde COMIENZO?

8. Entrevistas
Líderes
Equipos (UX / UI)
Product Owners
Devs
Sponsors*
1.
Necesidades
Prioridades
Riesgos
Aspiraciones
2.
Benchmark3.
DISCOVERY

9. ¿Porqué NECESITO un sistema de diseño?

10. Acelerar el proceso de diseño
y desarrollo.
Disminuir deuda técnica.

11. ¿Qué EQUIPO necesito?

15. UI JHON

16. Ser conscientes
de lo útil que es
un sistema de
diseño, no solo
para diseñadores.

17. El sistema no solo
favorecer nuestro
proyecto.
Agiliza y unifica
todos los productos.

18. Crear empatía.
Componentes
rehutilizables para todos.
Explotar la capacidad del
componente al máximo
antes de considerar crear
uno nuevo.

19. Auditoria UI

20. Ayuda profundamente a adoptar
un enfoque sistemático.
Desde la visión y la estrategia del
producto hasta el estilo y las
fuentes.

22. Modal of alerts, with
1 button.
Modal with information,
with
2 button.

23. We think in 8’s
We use divisions of 8: 8px / 16px /
24px / 32px / 40px / 48px / 56px and
so on for all padding / margin
between elements (sometimes 4px if
you need to go in tight)
375 px
2800 px
Mobile
Web
UnselectedSelected
Cards

28. Auditoria UI, ¿qué hago después?

29. U I O W N E R S
B L U E B OX
F E L I
Globant
AO
M A R T H A
Citibanamex
MARKET
PLACE
A B R I L
Citibanamex
MARKETING
F E L I
Citibanamex
CRM
D I R C K
Nova Solution
PORTAL
N ATA L I A
ANZEN
PAY
T B D
TBD
ACCITRADE
I R A S E M A
Globant
APP
EMPLEADOS
S A N T I
Citibanamex
MOBILE
J U L I O
Anzen
BANCANET
M A R Í A
Anzen
BANCA
EMP.

30. COLABORACIÓN
JUEVES 11-1 PM

31. Arquitectura de INFORMACIÓN

34. 1.1
Branding
Splash
Logo
Co-branding
Favicon
Apps icons
Programas
(thank u P, Puntos premia)
Colores
Segmentos
Social media
Voice & Tone
Iconos
Avatars
Ilustraciones
Imágenes
UX sounds
PPT templetes
1.3
Navegación
Header (CC)
Menú (CC)
Menú horizontal (CC)
Mega menú (CC)
Menú vertical (CC)
Barra de Accesibilidad (CC)
Barra secundaria toolbar (CC)
Footer (CC)
1.2
Font
Parrafos
Headinss
Quotes
Font style
Legales
1.4
Hipervínculos
Links
Links visited
Go back
Breadcrumbs
Paginación
2.1
Botones
Primario
Secundario
Terciarios
Text Button
2.2
Data entry
Formularios (CC)
Inputs (CC)
Editor de texto (CC)
Search (CC)
Dropdown
Radio Button
Text areas
Labels
Barra de progreso
Tooltips
Hover
Lista de checks To-do (CC)
Steps
Input Card
Checkbox
Sliders
Feedback
2.3
Data
Agrupación de info.
Panel (CC)
Panel colapsable (CC)
Acordeones (CC)
Modales (CC)
Modal Fullscreen (CC)
Overlay (CC)
Tablas (CC)
Listas (CC)
2.4
Visualización de contenido
Hero images (CC)
Imagenes de productos
Thumbnails (CC)
Image gallery (CC)
Tarjetas (CC)
Carrusel (CC)
Banners (CC)
2.5
Data visualization
Dashboard (CC)
Data
Charts
2.6
Filtrado de contenido
Filtros
Tabs horizontales
Tabs verticales
Sorting
Drag & drop
2.7
Varios
Coach mark (CC)
Placeholders
Cambio de idioma
Chat (CC)
3.1
Productos del banco
Inversiones
Afore
Seguros
Hipotecário
DDA
TDC
3.3
Sucursales
Account Opening
Market place
Saleswall
ATM´s
CRM
3.4
Apps
Mobile
BNE
Pay
Accitrade
App empleados
3.5
Herramientas
Parametric offerts
3.7
Comunicación
Portal
BNE
BancaNet
AO online
Gateway
4.1
Mensajes
Notificaciones (CC)
Alertas (CC)
Mensajes de error (CC)
Toasters
2.8
Reglas
Do / Don´ts
Clausulas y legales
GRID
Animaciones motion
Content Patterns
Empty States

36. A Design System
isn’t a Project.
It’s a Product
Nathan Curtis
EightShapes

39. BENEFICIOS de tener un sistema de diseño

40. Acelera el proceso de diseño y
desarrollo
Homologación
Consistencia (mismo código, mismo diseño)
Personalidad
Menos recursos
Calidad
Reduce deuda

41. COLABORACIÓN
JUEVES 11-1 PM
“BOTONES”

42. Button Label
Button Label
Button Label Button Label
Button Label Button Label
Button Label
Button Label
Button Label
Button Label
Label
Label
Label
Label
Label
Label
Label Label
Label
Button Label
Continuar
Hazte cliente Hazte cliente
Hazte cliente

44. MAKE IT SIMPLE

46. KPI´S ADOPCIÓN

47. Productos principales Productos secundarios
Sucursales: AO, Market place.
Aplicaciones: Mobile App
Web: BANCANET
AO online
Herramientas: parametric offers
Sucursales: CRM, Saleswall, ATM´s
Aplicaciones: Pay, BNA app, Accitrade,
Transfer*
Web: BancaNet, Portal, BNA, Gateway
Comunicación: EMM, promociones

48. Adopción INICIAL
El 100% de los productos principales y
secundarios web instalaron el sistema
como una dependencia npm (Node
Package Manager) e implementaron:
MVP: Branding y core components (logo, color, iconos, fotos, botones,
formularios, header, footer y tipografía)

49. Adopción GRADUAL
El 100% de los productos emblemáticos y el
50% de los productos secundarios alcanzan
la adopción del sistema del nivel 3.

50. Niveles de adopción
Integración vía NPM
Roadmap
Backlog
Logo
Color
Tipografía
Iconos
Header
Footer
Estilo fotográfico
Co-Branding
Modales, Popovers,
overlays
Mensajes y notificaciones
Filtros
Toolbars
Data Visualization
Paneles
Animaciones
Botónes
Formas: Tooltips,
checkboxes…
Tablas (data)
Listas
Menús
Layouts y grids
Data entry
Nivel 1
Plan y
dependencia
Nivel 2
Estilo
visual
(branding)
Nivel 3
Core
components
(átomos)
Nivel 4
Librería
completa
(moléculas)
Nivel 0
no adoptante
No más de 9 meses detrás
del último lanzamiento
menor.
No más de 6 meses detrás
del último lanzamiento
menor.
No más de 3 meses detrás
del último lanzamiento
menor.

51. Compromiso de
ADOPCIÓN
Los productos
secundarios logran la
adopción de nivel 2.
Adopción como
migración /
actualización
Todos los productos
principales y
secundarios
sin dependencia de
styleguides o PDF´s
Edad de adopción
No más de 6 meses
para productos
principales y 12 meses
para productos
secundarios.

53. DEV ADRIÁN

54. COMUNICACIÓN

55. COLABORACIÓN

56. IMPLEMENTACIÓN

57. ERRORES COMUNES

62. ONE VOICE… ONE BANK

64. One voice, One bank
APP
.COM
EMPRESARIAL
EMAIL
MARKETING
BANCANET
ACCOUNT
OPENING