Bitácora se ha creado como un proyecto final para aprobar el módulo de desarrollo web fullstack, se han incorporado elementos de UX research y UI design con el fin de hacer el proyecto mucho más completo. La idea surge a partir de mi interés personal en los viajes, siendo esta una de mis actividades preferidas. Considero que viajar no solo altera la rutina, sino que además permite conocer otras culturas, otros lugares y vivir experiencias inolvidables. Siempre quise hacer un diario o bitácora donde relatar acontecimientos que me ocurrieron durante los viajes para recordar cada detalle, así que ¿Por qué no hacerlo en un ambiente web y extenderlo a otros usuarios interesados?

Así pues, el objetivo del proyecto es crear un sitio web en el que cada usuario tenga su propio espacio privado en el cual pueda crear viajes o categorías que recopilen historias o entradas, en estas podrán escribir los relatos sobre sus experiencias personales para luego poder consultarlas y rememorar aquellos momentos. Adicionalmente, las imágenes de las historias se agruparán de forma automática creando una galería categorizada por viajes y se podrán gestionar tanto viajes como entradas con el sistema CRUD (Create, read, update and delete).

Para realizar el proceso de research, se utilizó la metodología ágil Design Thinking a partir de la generación de diversos “entregables” que permitieron organizar las ideas e información recolectada para llegar a conclusiones útiles y posibles funcionalidades que tendrá el sitio web. Este proceso incluye cuatro etapas: observación, síntesis, ideación y diseño.

En la etapa de observación, se generaron unas Research questions en las que se tuvieron en cuenta posibles acciones o funcionalidades a las que podría acceder el usuario, con estas preguntas, se generó un How might we que replantea la formulación para determinar cómo se podrían ejecutar las funcionalidades de acuerdo con los recursos que se disponían, posteriormente estas preguntas fueron categorizadas en: funcionalidades básicas, complementarias y comunidad. A partir de un Benchmarking, se realizó una comparación de bitácoras y sitios similares en la web identificando sus funcionalidades más importantes e interfaces, finalmente, se hizo una Netnografía que recoge opiniones en la web de personas que utilizan aplicaciones o sitios de bitácoras con el fin de conocer sus experiencias positivas y/o negativas.

En la etapa de síntesis, se realizó una matriz de utilidad y viabilidad que permitió organizar de manera visual las posibles funcionalidades de acuerdo con su utilidad y viabilidad para así poder establecer su importancia y las posibilidades de crearlos de acuerdo con su dificultad.

En la etapa de ideación, tomando como referencia la información obtenida en las etapas previas, se definieron las posibles funcionalidades que tendría el sitio web con unos findings e insights, luego, a partir del uso de un esquema In – Out, se aplicó un primer filtro para eliminar aquellas funcionalidades que por motivos técnicos o de gestión no se podían incorporar en una primera versión y finalmente, con el uso de un sistema MoSCoW, se determinaron en orden de importancia cuales funcionalidades tenían que incluirse, cuáles deberían ser tenidas en cuenta, cuales podrían implementarse y cuales definitivamente no se iban a utilizar.

En la etapa de diseño correspondiente al research, se realizó un Moodboard o tablero de referentes e inspiración para conocer las últimas tendencias de diseño que podrían utilizarse en los elementos de la bitácora, posteriormente se generó una planeación de las estructuras que debían tener las bases de datos y un site map que permitió plantear la estructura del sitio web.

Puedes ingresar al tablero de Miro haciendo clic aquí para consultar con detalle el proceso de research.

Con el fin de crear un sitio web consistente y estructurado, se realizó todo un proceso de diseño utilizando figma como herramienta principal. Inicialmente se estableció el sistema de diseño en el cual se tuvieron en cuenta elementos como el grid o la retícula para las diversas versiones responsive del sitio web, las tipografías, los colores, los iconos, las imágenes y los componentes a utilizar. A continuación, se crearon unos wireframes que permitieron tener una previsualización del esquema del sitio web y la ubicación de sus elementos. Posteriormente se generó un prototipado del sitio web para obtener una visualización más aproximada al resultado final que tendría la bitácora.

Sistema de diseño

Teniendo en cuenta las etapas realizadas previamente, se realizó el proceso de desarrollo llevando el prototipo a la web utilizando código en HTML5, CSS3, JavaScript, PHP y bases de datos con MySQL.

El sitio web está compuesto por una prehome que corresponde al index de la bitácora, en esta vista se dispone información general a cerca de las principales funcionalidades del sitio y contiene los botones de registro en ingreso, asimismo, incluye enlaces a redes sociales, la siguiente página corresponde al registro e inicio de sesión, dos vistas distintas interconectadas entre sí que permiten al usuario crear su cuenta o ingresar a la zona privada del sitio web.

Una vez iniciada la sesión, el usuario tendrá una vista de inicio o home en la cual encontrará el menú de navegación lateral, una cabecera que muestra un mensaje de bienvenida y botones para crear viajes e historias, en este panel verá los últimos 3 viajes y 3 historias que ha registrado. Al hacer clic en nuevo viaje, aparecerá un formulario que captura la información sobre el viaje (Nombre, fecha, imagen y descripción), este funciona como una categoría que puede contener varias historias o entradas, sin embargo, no puede haber historias sin estar relacionadas a algún viaje; para registrarlas, el usuario deberá clicar el botón “Nueva entrada” que mostrará un formulario diferente y permitirá guardar la información de tipo texto que el usuario quiera introducir.

Existe una vista llamada “Mis entradas”, en la cual se recopilan y muestran todas las historias que el usuario ha introducido en la web, incluye un campo de tipo select que carga únicamente las historias del viaje seleccionado, cada una de estas historias, incluye un enlace que lleva a la “Vista de entrada”, allí se cargará la información que contiene la base de datos sobre la historia seleccionada y la dispone de tal forma que el usuario pueda verla organizada. Adicionalmente, incluye un botón que permite editar la historia y otro que le permite eliminarla temporalmente, cambiando su estado y enviándola a la papelera donde eventualmente la podrá recuperar.

Si el usuario presiona el botón “Editar entrada”, será dirigido a una vista de formulario en la cual cargarán los datos de la historia en cuestión, el usuario podrá modificar cualquiera de los datos y guardar o descartar los cambios realizados.

Cada viaje y entrada contiene en la base de datos un campo booleano denominado estado, en el cual al ser verdadero se muestra en diversas vistas del sitio web, sin embargo, al estar en falso, se muestra únicamente en la sección “Papelera” donde se muestran algunos datos dispuestos en una tabla, en esta, el usuario tiene la posibilidad de restaurar el elemento o eliminarlo definitivamente de la base de datos sin posibilidad de recuperarlo posteriormente.

Por último, existe una sección extra denominada “Galería” en la cual se puede visualizar una recopilación de todas las imágenes que se han asignado a las historias. Mediante un campo de tipo select, al igual que en las entradas, se puede seleccionar un viaje para ver únicamente las imágenes de dicho viaje.

Este proyecto es el primero que he desarrollado por completo desde la ideación hasta la construcción del front-end y back-end por lo que el aprendizaje que he obtenido en su ejecución ha sido bastante significativo. Teniendo en cuenta algunas restricciones impuestas por parte de la escuela, no fue posible utilizar ningún framework para el desarrollo del sitio, por lo que sobre todo en el tema de diseño responsive fue bastante enriquecedor; en el planteamiento del proyecto no se incluía la parte de research, sin embargo, quise llevarlo a cabo como una forma de abordarlo de la manera más limpia posible y considero que valió completamente la pena ya que de esta forma tuve más oportunidades de plantear claramente la idea (ya que el tema era libre) y las funcionalidades. Considero que aún hay ciertos elementos que se pueden mejorar y espero en el futuro cercano contar con la disponibilidad de tiempo para hacerlo, así eventualmente será posible sacar este proyecto a un ambiente de producción que pueda servir a usuarios reales.