Rediseño de Red de Colegios

Sitios múltiples: el valor de respetar identidades y trabajar con bases de desarrollo.

Client: Soc. Educacional Domingo Santa María
Website:
Date: 30/06/2016
Services: Diseño Ux, Diseño de Interfaz, Integración con Wordpress

01. La Situación

Los proyectos de desarrollo donde el desafío implica renovar desde cero, otorgan excelentes oportunidades de crear, pero también requieren de un enorme esfuerzo en planificación e investigación. Esta red de colegios acudió a nosotros buscando desarrollar los sitios web para sus 7 establecimientos instalados en diferentes ciudades de Chile.

Con comunidades, tamaños y objetivos muy diferentes, la aventura de crear para todos ellos respetando su individualidad fue, sin duda, el desafío en este proyecto. Desde sus sostenedores, recibimos la solicitud de contar con nuevos sitios web que permitieran reflejar la identidad propia de cada colegio, así como suplir las necesidades compartidas y específicas.

¿Cuál fue mi rol en el proyecto?

Investigación con usuarios

Supervisé el trabajo de diseño de la interfaz y fui guiando al cliente en la toma de desiciones.

Arquitectura de Información

Creación de un prototipo de wireframes completamente navegables en Axure, incluyendo todas las pantallas que se utilizaron en el proyecto, para el posterior diseño de interfaces y desarrollo.

Dirección del proyecto

Coordiné el trabajo de mi equipo para diseñar, construir e integrar las más de 70 plantillas que creamos para este proyecto en particular.

02. ¿Cómo fue el proceso?

Levantamiento de Requerimientos: Una web para todos pero no todas para uno

Lo primero al comenzar a trabajar en este desarrollo múltiple fue el levantamiento de necesidades y expectativas de cada colegio. Así, durante algunas semanas trabajé en terreno con los equipos de los diferentes establecimientos en Arica, La Serena, Vicuña, Santiago y Puerto Montt, periodo en que también aprovechamos de realizar un levantamiento fotográfico, un punto muchas veces olvidado al momento de planificar un desarrollo web pero de vital importancia para este tipo de proyectos en que el entorno es parte vital de la identidad de la marca.

Con este trabajo logramos levantar necesidades muy precisas como simplificar y mejorar la comunicación entre la comunidad del colegio y el establecimiento -una de las necesidades más urgentes considerando que hasta ese momento cada mensaje, formulario, matrícula o aviso debía pasar por la oficina central de Santiago para varios de los establecimientos de la red-, además de poder distribuir material educativo de forma más eficiente y oportuna.

Asimismo, los colegios buscaban poder reflejar la “vida escolar”, el contexto, las actividades, los alumnos y todo lo que pudiera demostrar el valor de la identidad de cada establecimiento, de sus beneficios, infraestructura y entorno.

Con este levantamiento también establecimos las funcionalidades que serían necesarias para que cada colegio cumpliera sus expectativas, con lo que mi propuesta fue, entonces, trabajar una base de desarrollo común, incluyendo las funcionalidades que se aplicaban a todos, pero desarrollando un Look&Feel, navegación y características específicas a cada colegio.

Parte del levantamiento fotográfico que hicimos en cada colegio

Arquitectura de Información y diseño de interfaz.

Así, construimos esta estructura base, mediante wireframes diseñados en Sketch, que se utilizarían como bas de diseño y desarrollo en todos los sitios, generando un mapa de navegación para cada uno de ellos y definiendo un conjunto de funcionalidades que agregaríamos mediante plugins de WordPress específicos. Según la estrategia de desarrollo que definimos, todos los sitios comparten una estructura similar en cuanto al tipo de secciones y features, definida en base a identificar quién será el interesado por cada información que se quiere entregar.

El paso siguiente fue diseñar las plantillas a utilizar basándonos en las características y particularidades de cada colegio, con cuyo equipo iteramos y validamos las plantillas mediante la plataforma Invision, para luego comenzar la construcción de las plantillas que integraríamos con el CMS.

Wireframes Base para las plantillas de wordpress que luego adaptamos en cada uno de los sitios
Detalle de algunas de las plantillas que diseñamos basadas en la arquitectura propuesta.

Integración con WordPress y configuración de plugins

Cuando tuvimos las más de 70 plantillas responsivas construidas y validadas comenzó la tarea de integrarlas en cada uno de los sitios creados. Durante varias semanas nos dedicamos a desarrollar las distintas plantillas y plugins para luego poblarlas de contenido.

Detalle de las vistas responsivas una vez integrado el diseño en Wordpress

Contenidos y mantención sustentable

Una vez finalizados los entregables por cada colegio, incluimos una etapa de capacitación con los equipos de cada uno de ellos, encargados de manejar y poblar cada sitio, para que pudieran familiarizarse con las funcionalidades y procesos de actualización de la información según lo necesitaran.

Junto con esto, aprovechamos de realizar el levantamiento de contenidos para cada colegio, tanto los existentes como los que era necesario generar, lo que derivó en apoyar en la definición de una la estrategia de contenidos para la publicación de sus principales ventajas, como la infraestructura y otros atractivos según la cultura de cada colegio.

Detalle del manual de uso que entregamos a cada colegio para que pudieran administrar el sitio de manera autónoma

Un cliente jugado, es un cliente satisfecho.

Trabajar con una base estructural en común, aplicando las características para cada colegio en las sutilezas y diseño, fue sin duda lo que hizo que este enorme desafío fuera posible, considerando que la alternativa era desarrollar para 7 colegios por separado, una idea carísima en términos de tiempo y dinero.

Además, la posibilidad de reunirme con directores y encargados en cada colegio nos permitió levantar la información suficiente para que este proceso funcionara de verdad. Durante todo el camino del levantamiento y desarrollo, los colegios mantuvieron constante comunicación con mi equipo, a través de correos, reuniones pero sobretodo, se animaron a utilizar la plataforma Basecamp, según mi recomendación, para corroborar cada hito, desde la arquitectura, experiencia de usuario, levantamiento de información, diseño e integración, logrando así en tiempo ajustado (desde noviembre de 2015 a marzo de 2016), diseñar y lanzar una red de 7 sitios web especialmente creados para la identidad y necesidades de cada colegio.

03. Ficha Técnica

Equipo del proyecto

Arquitectura de Información: Claudio Merino

Lead Designer: Claudio Merino

UI Designer: Valeria Cerón, Randy Bazán, Juán Pablo Álvarez.

Front-end Dev: Kelly Puelpan, Randy Bazán

Herramientas utilizadas:

Axure RP: Para wireframes y documentación para integradores.
Sketch 3: para diseño de interfaz.
WordPress: CMS Utilizado
InvisionApp: para elaboración de prototipos para feedback y testeo con usuarios.