Nueva web Centro de Innovación

Transcripción

1 Nueva web Centro de Innovación

2 centrodeinnovacionbbva.com

3 El proyecto Objetivos, Equipo y metodología

4 Objetivo Nuevo Gestor de Contenidos (CMS) Nuevo plataforma de gestión de contenidos OpenSource que aporte mayor flexibilidad para la evolución funcional de la web, preparado para personalizar múltiples países e idiomas y NUEVO GESTOR DE NUEVA INTERFAZ WEB CONTENIDOS que facilite la inclusión de contenido. Nueva interfaz Nuevo diseño, con nueva estructura Objetivos Sopra UX de contenidos y categorías, más fácil, simple de navegar Integración y más personalizada. con Vinculación con CRM Dynamics CRM INTEGRACIÓN CON CRM DYNAMICS MIGRACIÓN DESDE RUBY ON RAILS Migración desde el gestor actual Migración de contenidos al nuevo CMS. Introducción

5 Equipo de trabajo Gerente proyecto Sopra Jefe de proyecto Sopra Jefe proyecto BBVA Stakeholders Centro de Innovación BBVA Consultor UX Arquitecto CMS Parcial Programador Ruby on Rails Arquitecto de contenidos Programador PHP Programador Front-end Diseñador UX Seguridad e infraestructura Head of UX Equipo y Planificación

6 Equipo de trabajo Oscar Viñan Raül García Jefe proyecto BBVA Stakeholders Centro de Innovación BBVA Miriam Roizo Manuel López Parcial José Manuel López Dona Antonio Jimenez Alicia García Jesús Vázquez Jonás Talavera Juan Pablo Lázaero Claudio Lobos Equipo y Planificación

7 Alcance del proyecto Investigación de usuarios Diseño funcional Definición requerimientos Inventario de contenidos Análisis de contenidos y funcionalidad Wireframes Cardsorting Arquitectura contenidos Objetivos de negocio Concepto visual Prototipos Diseño Plantillas Metas del usuario Diseño y Usabilidad Diagrama procesos Guías de estilo Test de usuarios Desarrollo de plantillas Componentes HTML5 Front-end Migración de contenidos CMS instalación CMS CMS Framework Desarrollo CMS Migración actualizada de contenidos Integración CRM Desarrollo Funcionalidades Testing Lanzamiento Nueva interfaz

8 Metodología

9 Scrum, desarrollo incremental Metodología

10 Metodología y planificación Sopra utilizó Scrum como metodología de desarrollo ya que permite trabajar de manera ágil y colaborativa con iteraciones y validaciones ágiles. Se realizaron Sprints de 3 semanas cada uno, con entregables propios en las distintas líneas de trabajo (Usabilidad, Diseño, HTML5 y Drupal). El último Sprint tuvo como objetivo refactorizar código de los sprints anteriores y hacer la integración de usuarios con el CRM. El proyecto se descompuso en 7 Sprints de 3 semanas cada uno y 5 meses y medio, arrancando en Octubre 2013 y entregado el proyecto en producción en Marzo El contenido de secciones entregables en cada Sprint se definió conjuntamente con BBVA una vez definida la arquitectura de contenidos y funcionalidad. Metodología

11 Planificación del proyecto Sprint 01 Sprint 03 Sprint 02 Sprint 01 Sprint 04 Sprint 04 Sprint 05 Sprint 07 Sprint 06 Sprint 05 Equipo y Planificación

12 Herramientas: Basecamp Metodología

13 Herramientas: Hotgloo Metodología

14 Desarrollo Front

15 Desarrollo de intefaz + + Nueva interfaz

16 Trello, Metodologías agiles

17 Desarrollo Front Visualizaciones Desktop / Tablet landscape ( >980) ( ) La columna derecha se recoloca debajo del contenido principal. Tablet Portrait ( ) Elementos/componentes líquidos. Se adaptan al ancho de pantalla. Smartphone (<480) (eliminación operativas, necesidades de diseño etc.)

18 CSS, con preprocesador SASS Código CSS con preprocesador SASS

19 Desarrollo Back

20 Gestor de contenidos: Drupal Después de analizar los requerimientos y por la experiencia de Sopra en la implantación de plataformas de gestión de contenidos se decidió que Drupal se adaptaba perfectamente a este proyecto. Drupal es una plataforma opensource, con licencia GNU/GPL, programado en PHP, desarrollado y mantenido por una enorme y activa comunidad de usuarios. Destaca por la calidad del código y de las páginas generadas, el respeto de los estándares web, y un énfasis especial en la usabilidad y consistencia de todo el sistema. El diseño de Drupal es especialmente idóneo para construir y gestionar comunidades en Internet. Su flexibilidad y adaptabilidad, así como la gran cantidad de módulos adicionales disponibles, hace que sea adecuado para realizar la nueva web del Centro de Innovación de BBVA. Nuevo gestor de contenidos

21 Personalización del desarrollo CMS Se realizó la personalización de las interfaces de generación de contenido, orientadas a simplificar la publicación y automatizar la vinculación de contenidos. La personalización realizada correspondía a la programación de módulos que mejoraban la administración. La interfaz de generación de contenidos es flexible, adaptada a las necesidades de publicación de contenidos de BBVA y permite: Introducir código HTML y CSS dentro de los contenidos Mover contenidos reutilizables dentro de la estructura del site, facilitando su inclusión en distintas secciones y con distintos tipos de presentación. Posibilidad de clonar blogs existentes y crear nuevos blogs con la misma plantilla o con distintas plantillas de visualización. Posibilidad de usar templates de páginas de manera intuitiva para el administrador o generador de contenidos, visualizando thumbnails o vista previa de estos. Nuevo gestor de contenidos

22 Personalización del desarrollo CMS Agrupar y desagrupar contenidos en categorías y etiquetas y la posibilidad de generar microsite o secciones a partir de estas agrupaciones. Posibilidad para el administrador de editar los items de navegación y otros elementos de la estructura de pantallas. Posibilidad de integrar contenido externo (artículos externos, noticias...), embebiendo contenidos externos de manera sencilla. Adaptación de plantillas de contenido (sin funcionalidad Responsive) para versiones de Explorer 6 y 7. Posibilidad de modificar las estructura y el diseño visual de las subhome para adaptarlas a las necesidades puntuales de BBVA. Integración completa con Google Analytics Acceso de administrador con cuentas de usuario de BBVA-Google. Generación de una guía de administración y publicación en formato web que facilite la actualización del contenido relacionado con formación para el administrador o el redactor de contenido. Nuevo gestor de contenidos

23 Successfull Git branch model

24 Sistema de Deploy Sistema de despliegue basado en 3 entornos: DESARROLLO PREPRODUCCIÓN PRODUCCIÓN Nuevo gestor de contenidos

25 Migración

26 Migración desde CMS actual El Centro de Innovación de BBVA disponía un gestor de contenidos (Content Manager System - CMS) hecho a medida y programado en una plataforma Ruby on Rails; un framework de aplicaciones web. La web antigua del Centro contaba con cerca de 90 módulos o plugins que permiten funcionalidades específicas y en torno a 20 mil artículos. Se realizó la migración de los contenidos al nuevo Gestor de Contenidos (CMS) de la web del Centro de Innovación. Sopra migró (manual y automáticamente) y adaptó a Drupal, la nueva plataforma CMS, todas las funcionalidades presentes en la web actual, más todas las nuevas funcionalidades desarrolladas con Sopra en el período de construcción de la nueva web.. Migración

27 Integración con CRM

28 Integración con CRM Dynamics En paralelo a este proyecto Sopra se trabajó con el Centro de Innovación de BBVA en la implantación de CRM es Dynamics 2011 de Microsoft con el objetivo de crear una comunidad de usuarios y visitantes al CIBBVA. Se realizó la integración de usuarios únicos del CRM con el gestor de contenidos CMS, de manera se dispone de un único perfil de usuario para web y visitantes físicos y facilitando el uso de herramientas de marketing online como puede ser la gestión de Newsletters & Marketing con ClickDimensions (solución para la automatización de campañas de marketing online sobre la plataforma de CRM Microsoft Dynamics CRM). El hecho que ambos proyectos sean desarrollados por Sopra aseguró una correcta y fluida integración. Integración con CRM

29 Entregable Final

30

31

32 Gracias!