31/01/19
Cómo agilizar procesos en el desarrollo de una web
Cómo realizar un proyecto de desarrollo web y no morir en el intento.
“No explica lo que somos hoy, no es atractiva y moderna, hay secciones que no entiendo porque las pusimos, a veces muestra mensajes de error…” ¿Cuántas veces hemos escuchado estas palabras al recoger vuestras necesidades?
Y cuando os preguntamos ¿cómo os imagináis vuestra nueva web?, habitualmente vuestras respuestas son: “Me gustaría que explique todo lo que hacemos realmente, que tenga un diseño atractivo, que se vea moderna y elegante, que se vea bien en el móvil, que respire profesionalidad, que se encuentren las cosas porque ahora es un caos, que nos sintamos identificados con ella, hemos intentado imaginarnos cómo debería de ser, qué secciones tendría, pero no somos capaces de llegar a buen puerto….”.
Tenemos que confesar que sí, es cierto, es mejor que te ayuden externos que no intentar hacer el gran esfuerzo de idear y crear desde la propia compañía sin ayuda. Lleváis una mochila a cuestas que os hace más difícil ser libres para romper ciertas reglas, que no os permite cuestionarnos por qué hacéis las cosas de cierta forma.
¿Cuál es la mejor manera de enfocarlo? Uno de los grandes cambios que han surgido con la digitalización es cómo el consumidor se relaciona y consume productos y, más que nunca, servicios.
Los consumidores son más exigentes que nunca y ya no demandan buenos productos a un buen precio. Quieren más, quieren servicios líderes. Se han multiplicado los canales y los puntos de contacto entre clientes y empresas, desde el momento de la compra pasando por todo el autoservicio. El cliente exige a todas las compañías los mismos estándares de calidad en el servicio que ofrecen los grandes players digitales.
Por este motivo, es más imprescindible que nunca ofrecer una buena experiencia de cliente. Porque es la única manera que tienen las empresas de diferenciarse y ser verdaderamente competitivas.
El reto de ‘rediseñar la web’ debe ofrecer la oportunidad de replantear la relación con vuestros usuarios para que ésta sea personalizada, accesible y transparente. Vamos a generar una experiencia con él, poniéndole en el centro, a él y a sus necesidades.
Desde RocaSalvatella afrontamos esta tipología de proyectos centrándonos en 6 aspectos principales, basándonos en la máxima eficiencia y nuestra experiencia en otros proyectos de éxito. Estos seis principios serán decisivos en la toma de muchas decisiones durante el proyecto.
Nuestra metodología se basa en cuatro fases principales.
FASE 1. ESTRATEGIA
En esta primera fase se establece la orientación de la nueva web, definiendo objetivos, la propuesta de valor, el ecosistema web y el target.
¿Qué hacemos?
Lo primero que hacemos es conocernos y profundizar en vuestro dÍa a dÍa, entender vuestro negocio e identificar qué papel puede jugar vuestra web a la hora de ayudaros a alcanzar vuestros objetivos de negocio. Analizamos vuestros servicios en detalle, cuál es vuestra propuesta de valor actual y la relación con el cliente a través de los canales, procesos y agentes actuales.
Identificamos vuestros principales Stakeholders, internos y externos, actuales y futuros a los que os queréis aproximar, influenciar, atraer, captar, convertir, mantener, convencer… y infinidad de casuísticas distintas según cada caso.
Siguiendo con nuestro principio de #CENTRIC, realizamos workshops de forma conjunta con la finalidad de conocer a vuestros clientes y sus necesidades. Mejoramos la comprensión de cada público construyendo un mapa de empatía y su customer journey. Este es Un ejercicio que nos permite identificar los grandes momentos y necesidades de los stakeholders en relación a los ámbitos actuales de prestación de los servicios para encontrar insights de cómo debemos adaptarlos al entorno digital. Si entendemos qué necesitan vuestros stakeholders en cada momento seremos capaces de anticiparnos a sus necesidades y ofrecerles soluciones que le aporten el máximo valor en el momento preciso.
Conociendo los públicos, objetivos y vuestra propuesta de valor realizamos un Benchmark, tanto sectorial como extra sectorial, donde perseguimos detectar learnings, best practices y oportunidades en nuestro entorno. Ejercicio que nos ayuda a poner en contexto nuestros ámbitos de análisis cerrando así nuestra fase estratégica.
FASE 2. ANÁLISIS FUNCIONAL
Se trata de priorización de los requerimientos funcionales y la determinación de las bases conceptuales para su posterior desarrollo.
¿Qué hacemos?
Identificamos los contenidos principales de vuestra web y su organización en función de los diferentes targets priorizados obteniendo así la definición de la arquitectura web.
Estudiamos en profundidad los flujos e integraciones necesarias, así como la tecnología adecuada, obteniendo el primer esbozo del documento funcional, que recoge las principales funcionalidades y características técnicas que tendrá la web (formularios, inscripciones, buscadores, redes sociales, eventos, calendarios, notificaciones, etc.).
Elaboramos la big picture, un esquema de la web dibujada a alto nivel, con la ubicación de cada módulo según el resultado del análisis técnico y de contenido. Y realizamos la planificación de trabajo por sprints para la siguiente fase, ahora que establecemos las primeras premisas que nos permiten obtener datos de volumen, número de tipologías de páginas necesarias, roles necesarios, recursos y complejidad técnica.
FASE 3. DISEÑO CONCEPTUAL
Es la fase en que definimos y prototipamos el interfaz web, la estructura de las páginas y su navegación, así como el aspecto visual de la plataforma, previo al traspaso a la fase de programación.
¿Qué hacemos?
En este punto, y para entender cómo trabajamos, hemos de presentar los superpoderes del UX/UI. Donald Norman fue el que acuñó el término user experience. La experiencia del usuario se centra sobre todo en sus pensamientos y emociones, y no sólo se tiene en cuenta durante la navegación sino que se ha de considerar antes y después de la interacción.
El superpoder del UX se basa en la usabilidad, la utilidad, la accesibilidad y la funcionalidad. Usabilidad en el sentido de que la web debe ser sencilla al uso. Útil por recoger todas las funcionalidades que necesita el usuario a la par que accesible para que la información se pueda localizar de manera fácil y rápidamente. Y funcional para la optimización de la web. El diseñador UX analiza la web actual, en el caso que exista, y la competencia en el entorno digital. Realiza el wireframing que es la creación de los prototipos de las páginas de la web que definen la posición de cada módulo y su interacción con el usuario. Analiza la interacción y actualiza las funcionalidades para planificar el posterior desarrollo y las pruebas de usabilidad para finalizar con el QA para garantizar la calidad de la nueva web.
El superpoder del UI es la interfaz de usuario. La interfaz es el medio por el que el usuario interactúa con la web. El diseño es la parte importante de la experiencia con el usuario. La parte más gráfica donde se define el look&feel de la página. El diseñador UI investiga la competencia y analiza tendencias de diseño a nivel de look&feel. Desarrolla gráficamente según el manual de estilo de marca, define y diseña las animaciones y transiciones. Y finalmente adapta el diseño para dispositivos móviles.
De este modo, el equilibrio perfecto entre los superpoderes del UX/UI es una garantía del éxito.
Cerramos la fase con la generación de la guía definitiva y única para el desarrollo de la web llamada “Documento funcional”. Un documento que incluye todos los wireframes, diseños, funcionalidades y integraciones necesarias explicadas al detalle. Un documento maestro que nos permite empezar y acabar la fase de desarrollo conociendo al detalle la nueva web, cómo debe de comportarse y de qué forma formará parte en el ecosistema interno antes de escribir una sola línea de código.
FASE 4. DESARROLLO Y PUESTA EN MARCHA
El desarrollo web comprende todas aquellas acciones necesarias para poder tener una web 100% operativa funcionando en el mercado.
¿Qué hacemos?
Trabajamos con metodologías Agile, realizando sprints de 3 o 4 semanas, según cada proyecto, segmentando todas las tipologías de páginas a maquetar en diferentes packs. Segmentamos las diferentes entregas de manera que vamos trabajando la web por partes, empezando y terminando sus secciones por sprints, facilitando la gestión y subida de los contenidos de forma escalonada.
Realizamos la programación Front-End que es la maquetación responsive del sitio web a partir del diseño gráfico aprobado, utilizando patrones estándar de programación que permitiran su mantenibilidad, escalabilidad y reusabilidad. Según el proyecto, se trabaja, en paralelo o por separado, la programación Back-End. Parametrizando y personalizando el CMS mediante los lenguajes de programación que más se adapten al tipo de proyecto manteniendo los estándares de cada lenguaje y buenas prácticas, garantizando así su escalabilidad y integridad estructural del CMS escogido.
Después, se generan interfaces de datos mediante apis, buses de datos, ficheros, etc. según las diferentes casuísticas propias de cada cliente. A continuación, la realización de los Q&A (Quality Assurance) y tests de aceptación así como la formación de equipos. Y, finalmente, el Go - Live. El día de la publicación de la web, no hay sorpresas, ya que todos los departamentos conocen perfectamente cómo es la web, a que da respuesta ya que todos hemos participado activamente en su conceptualización y puesta en marcha.
Escrito por Sònia Rocafull y Marc Gabau.
“No explica lo que somos hoy, no es atractiva y moderna, hay secciones que no entiendo porque las pusimos, a veces muestra mensajes de error…” ¿Cuántas veces hemos escuchado estas palabras al recoger vuestras necesidades?
Y cuando os preguntamos ¿cómo os imagináis vuestra nueva web?, habitualmente vuestras respuestas son: “Me gustaría que explique todo lo que hacemos realmente, que tenga un diseño atractivo, que se vea moderna y elegante, que se vea bien en el móvil, que respire profesionalidad, que se encuentren las cosas porque ahora es un caos, que nos sintamos identificados con ella, hemos intentado imaginarnos cómo debería de ser, qué secciones tendría, pero no somos capaces de llegar a buen puerto….”.
Tenemos que confesar que sí, es cierto, es mejor que te ayuden externos que no intentar hacer el gran esfuerzo de idear y crear desde la propia compañía sin ayuda. Lleváis una mochila a cuestas que os hace más difícil ser libres para romper ciertas reglas, que no os permite cuestionarnos por qué hacéis las cosas de cierta forma.
¿Cuál es la mejor manera de enfocarlo? Uno de los grandes cambios que han surgido con la digitalización es cómo el consumidor se relaciona y consume productos y, más que nunca, servicios.
Los consumidores son más exigentes que nunca y ya no demandan buenos productos a un buen precio. Quieren más, quieren servicios líderes. Se han multiplicado los canales y los puntos de contacto entre clientes y empresas, desde el momento de la compra pasando por todo el autoservicio. El cliente exige a todas las compañías los mismos estándares de calidad en el servicio que ofrecen los grandes players digitales.
Por este motivo, es más imprescindible que nunca ofrecer una buena experiencia de cliente. Porque es la única manera que tienen las empresas de diferenciarse y ser verdaderamente competitivas.
El reto de ‘rediseñar la web’ debe ofrecer la oportunidad de replantear la relación con vuestros usuarios para que ésta sea personalizada, accesible y transparente. Vamos a generar una experiencia con él, poniéndole en el centro, a él y a sus necesidades.
Desde RocaSalvatella afrontamos esta tipología de proyectos centrándonos en 6 aspectos principales, basándonos en la máxima eficiencia y nuestra experiencia en otros proyectos de éxito. Estos seis principios serán decisivos en la toma de muchas decisiones durante el proyecto.
- #CENTRIC. Stakeholders en el centro del proyecto.
- #SIMPLIFICACIÓN. Eliminar la complejidad y buscar la sencillez.
- #ALINEACIÓN. Con las necesidades y expectativas.
- #MEDICIÓN. Medir y maximizar el retorno.
- #FOCALIZACIÓN. En los aspectos clave y públicos.
- #FACILITACIÓN. A través de la correcta tecnología y organización.
Nuestra metodología se basa en cuatro fases principales.
FASE 1. ESTRATEGIA
En esta primera fase se establece la orientación de la nueva web, definiendo objetivos, la propuesta de valor, el ecosistema web y el target.
¿Qué hacemos?
Lo primero que hacemos es conocernos y profundizar en vuestro dÍa a dÍa, entender vuestro negocio e identificar qué papel puede jugar vuestra web a la hora de ayudaros a alcanzar vuestros objetivos de negocio. Analizamos vuestros servicios en detalle, cuál es vuestra propuesta de valor actual y la relación con el cliente a través de los canales, procesos y agentes actuales.
Identificamos vuestros principales Stakeholders, internos y externos, actuales y futuros a los que os queréis aproximar, influenciar, atraer, captar, convertir, mantener, convencer… y infinidad de casuísticas distintas según cada caso.
Siguiendo con nuestro principio de #CENTRIC, realizamos workshops de forma conjunta con la finalidad de conocer a vuestros clientes y sus necesidades. Mejoramos la comprensión de cada público construyendo un mapa de empatía y su customer journey. Este es Un ejercicio que nos permite identificar los grandes momentos y necesidades de los stakeholders en relación a los ámbitos actuales de prestación de los servicios para encontrar insights de cómo debemos adaptarlos al entorno digital. Si entendemos qué necesitan vuestros stakeholders en cada momento seremos capaces de anticiparnos a sus necesidades y ofrecerles soluciones que le aporten el máximo valor en el momento preciso.
Conociendo los públicos, objetivos y vuestra propuesta de valor realizamos un Benchmark, tanto sectorial como extra sectorial, donde perseguimos detectar learnings, best practices y oportunidades en nuestro entorno. Ejercicio que nos ayuda a poner en contexto nuestros ámbitos de análisis cerrando así nuestra fase estratégica.
FASE 2. ANÁLISIS FUNCIONAL
Se trata de priorización de los requerimientos funcionales y la determinación de las bases conceptuales para su posterior desarrollo.
¿Qué hacemos?
Identificamos los contenidos principales de vuestra web y su organización en función de los diferentes targets priorizados obteniendo así la definición de la arquitectura web.
Estudiamos en profundidad los flujos e integraciones necesarias, así como la tecnología adecuada, obteniendo el primer esbozo del documento funcional, que recoge las principales funcionalidades y características técnicas que tendrá la web (formularios, inscripciones, buscadores, redes sociales, eventos, calendarios, notificaciones, etc.).
Elaboramos la big picture, un esquema de la web dibujada a alto nivel, con la ubicación de cada módulo según el resultado del análisis técnico y de contenido. Y realizamos la planificación de trabajo por sprints para la siguiente fase, ahora que establecemos las primeras premisas que nos permiten obtener datos de volumen, número de tipologías de páginas necesarias, roles necesarios, recursos y complejidad técnica.
FASE 3. DISEÑO CONCEPTUAL
Es la fase en que definimos y prototipamos el interfaz web, la estructura de las páginas y su navegación, así como el aspecto visual de la plataforma, previo al traspaso a la fase de programación.
¿Qué hacemos?
En este punto, y para entender cómo trabajamos, hemos de presentar los superpoderes del UX/UI. Donald Norman fue el que acuñó el término user experience. La experiencia del usuario se centra sobre todo en sus pensamientos y emociones, y no sólo se tiene en cuenta durante la navegación sino que se ha de considerar antes y después de la interacción.
El superpoder del UX se basa en la usabilidad, la utilidad, la accesibilidad y la funcionalidad. Usabilidad en el sentido de que la web debe ser sencilla al uso. Útil por recoger todas las funcionalidades que necesita el usuario a la par que accesible para que la información se pueda localizar de manera fácil y rápidamente. Y funcional para la optimización de la web. El diseñador UX analiza la web actual, en el caso que exista, y la competencia en el entorno digital. Realiza el wireframing que es la creación de los prototipos de las páginas de la web que definen la posición de cada módulo y su interacción con el usuario. Analiza la interacción y actualiza las funcionalidades para planificar el posterior desarrollo y las pruebas de usabilidad para finalizar con el QA para garantizar la calidad de la nueva web.
El superpoder del UI es la interfaz de usuario. La interfaz es el medio por el que el usuario interactúa con la web. El diseño es la parte importante de la experiencia con el usuario. La parte más gráfica donde se define el look&feel de la página. El diseñador UI investiga la competencia y analiza tendencias de diseño a nivel de look&feel. Desarrolla gráficamente según el manual de estilo de marca, define y diseña las animaciones y transiciones. Y finalmente adapta el diseño para dispositivos móviles.
De este modo, el equilibrio perfecto entre los superpoderes del UX/UI es una garantía del éxito.
Cerramos la fase con la generación de la guía definitiva y única para el desarrollo de la web llamada “Documento funcional”. Un documento que incluye todos los wireframes, diseños, funcionalidades y integraciones necesarias explicadas al detalle. Un documento maestro que nos permite empezar y acabar la fase de desarrollo conociendo al detalle la nueva web, cómo debe de comportarse y de qué forma formará parte en el ecosistema interno antes de escribir una sola línea de código.
FASE 4. DESARROLLO Y PUESTA EN MARCHA
El desarrollo web comprende todas aquellas acciones necesarias para poder tener una web 100% operativa funcionando en el mercado.
¿Qué hacemos?
Trabajamos con metodologías Agile, realizando sprints de 3 o 4 semanas, según cada proyecto, segmentando todas las tipologías de páginas a maquetar en diferentes packs. Segmentamos las diferentes entregas de manera que vamos trabajando la web por partes, empezando y terminando sus secciones por sprints, facilitando la gestión y subida de los contenidos de forma escalonada.
Realizamos la programación Front-End que es la maquetación responsive del sitio web a partir del diseño gráfico aprobado, utilizando patrones estándar de programación que permitiran su mantenibilidad, escalabilidad y reusabilidad. Según el proyecto, se trabaja, en paralelo o por separado, la programación Back-End. Parametrizando y personalizando el CMS mediante los lenguajes de programación que más se adapten al tipo de proyecto manteniendo los estándares de cada lenguaje y buenas prácticas, garantizando así su escalabilidad y integridad estructural del CMS escogido.
Después, se generan interfaces de datos mediante apis, buses de datos, ficheros, etc. según las diferentes casuísticas propias de cada cliente. A continuación, la realización de los Q&A (Quality Assurance) y tests de aceptación así como la formación de equipos. Y, finalmente, el Go - Live. El día de la publicación de la web, no hay sorpresas, ya que todos los departamentos conocen perfectamente cómo es la web, a que da respuesta ya que todos hemos participado activamente en su conceptualización y puesta en marcha.
Escrito por Sònia Rocafull y Marc Gabau.
