En busca de un diseño usable y rompedor con ayuda del IDEPA y el FEDER

En busca de un diseño usable y rompedor con ayuda del IDEPA y el FEDER
Betterplace
Cheque de asesoramiento por parte del IDEPA y FEDER.

Una vez definido el foco del negocio y desarrollado el core de tratamiento de los datos, en Betterplace asumimos el diseño de la aplicación para lo que contamos con un Cheque de asesoramiento tecnológico emitido por el IDEPA (Instituto de Desarrollo Económico del Principado de Asturias) y el FEDER (Fondo Europeo de Desarrollo Regional) en 2017.

Tan importante es contar con funcionalidades que resuelvan problemas como hacerlas realmente útiles a través de un diseño atractivo, intuitivo y adaptado a los patrones de navegación de los usuarios. Conscientes de esta necesidad, en Betterplace decidimos, el pasado 2017, reformular el diseño de la aplicación para acercarlo a las rutinas de uso actuales y facilitar su manejo cotidiano. El reto pasaba por simplificar la estructura sin renunciar a los módulos imprescindibles y plantear, al tiempo, un diseño flexible, capaz de crecer en funcionalidades sin pervertirse ni perder su esencia. Otro objetivo importante era el de adaptar este diseño, nacido originalmente para escritorio, a todos los dispositivos móviles, algo absolutamente fundamental en la actualidad.

Betterplace subvención cheque

Para afrontar este desafío nos apoyamos en el IDEPA y el FEDER, que nos concedieron uno de sus cheques para asesoramiento tecnológico. Gracias a él pudimos recurrir a la empresa asturiana Punto de Nube que colaboró con nosotros en las siguientes fases:

  • Definición de imagen y diseño: en la primera fase se convocaton varias reuniones para definir la línea de diseño a seguir. Posteriormente se generaron varios mock ups con los que validarlo y, una vez aprobadas, se digitalizaron y compartieron a través de las plataformas con el fin de arrancar con la maquetación.
  • Maquetación y generación de elementos independientes: definida la línea de diseño se inició la fase de maquetación de las vistas. Para ello se definieron previamente una serie de elementos comunes y reutilizables basados en HTML, CSS3 y JavaScript que permitirían la reutilización de los mismos en el montaje en futuras ampliaciones de la plataforma.
  • Usabilidad de la plataforma: de forma paralela al diseño y generación de vistas se realizó un estudio de la usabilidad de la aplicación, donde sea analizó el comportamiento de los usuarios buscando en todo momento facilitar el acceso a la información.
  • Adaptación mobile de la plataforma: una de las premisas del proyecto consistía en que los usuarios pudiesen acceder a toda la información de la plataforma a través de dispositivos móviles, por lo que se desarrollaron vistas, acciones y comportamientos exclusivos para estos dispositivos.
  • Comportamiento de los componentes: se desarrollaron a medida varios frameworks para definir los comportamientos de cada elemento de la plataforma (formularios, barras, gráficas…).
  • Adaptación del mapa principal de la aplicación: la aplicación Betterpalace tiene como elemento central un mapa interactivo. Para su inclusión en la herramienta se realizó una revisión y adaptación del framework adaptado a las necesidades del proyecto.
  • Integración con servidores y datos generados: una vez generadas las vistas e implementados los componentes y comportamientos, se realizó la integración del proyecto con los servidores y datos de la aplicación en un entorno de preproducción. Se realizaron pruebas de validación y se corrigieron errores detectados en dichas pruebas.

Hoy la aplicación está operativa y su diseño integrado, de manera que permite aumentar las funcionalidades manteniendo una estructura 100% accesible y fácil de utilizar.