¿Cómo funcionan las cosas? en el Diseño de un Sitio Web: Un Caso de Estudio con un toque comunitario

Con los billones de sitios existentes en el infinito mundo de la red, pareciera que la creación de uno de ellos será muy sencillo. Cualquier bloguero adolescente la lleva de gane con las plantillas pre-establecidas de las plataformas como WordPress; en muchos sentidos, es una belleza ecualizar de esa manera la accesibilidad que ofrece internet. Sin embargo, innovar en una página elegante, amigable con el usuario y de alta calidad –con la complejidad que conlleva incluir toda la información relevante y a la vez lo suficientemente simple para mantenerse atractiva– requiere un proceso mucho más demandante. Aquí en WebCreek, nuestro diseñador UX/UI (Experiencia de usuario y de interface) David Hinojosa, nos detalla los intrincados pasos detrás de las páginas web que ha creado. Él basa sus comentarios con el ejemplo de la más reciente colaboración de WebCreek, que al mismo tiempo es ambiental y social: un esfuerzo pro bono (“para el bien público”) para rediseñar el sitio web de ReciVeci, una organización no lucrativa que radica en Quito, Ecuador. El siguiente es nuestro último caso de estudio de diseño web.

ReciVeci es un proyecto de reciclaje ciudadano, que trabaja para mejorar la infraestructura de reciclaje y la educación al respecto. La cultura de reciclaje en Ecuador es poco menos que prospera y existe una carencia importante de conciencia y oportunidades para lidiar responsablemente con la basura. Pero afortunadamente los equipos de WebCreek se están uniendo a los esfuerzos voluntarios locales, trabajando para generar un cambio a través de un nuevo sitio web para ReciVeci. Creemos que esta destreza digital traerá a la organización resultados tangibles, proporcionándole mayores alcances de visibilidad e incrementando la conversación acerca del estilo de vida del reciclaje. Con un programa de voluntariado centrado en el mejor apoyo para tales tareas, WebCreek puso a David a cargo de esta emocionante colaboración. Y como suele suceder con todos sus proyectos que empiezan desde cero, comenzó consultando con el equipo del cliente.  

Paso 1: Estar en la misma página (web)

Aunque todo diseño UX/UI en WebCreek comienza con una reunión entre el cliente y la compañía, para David, esta ronda de “entrevista con clientes” se transformó en algo mucho más informal de lo que la frase sugiere. Y es que Reciveci es un puñado de gente de verdad, que se reúne en la casa de alguien y planean sus estrategias tomando café y bocadillos. David fue invitado una tarde de esas, donde compartieron y conocieron al nuevo miembro de su equipo,  de ser humano a ser humano. Para garantizar una colaboración efectiva, es esencial un mutuo entendimiento. Y cuando fueron directo al grano, David hizo preguntas específicas para conocer las necesidades, metas y la visión general de la organización para su nueva página. Esto incluyó rastrear información y precisar objetivos, así como iniciar una investigación que partió de la charla para generar preguntas y disipar dudas.

Paso 2: Poniendo todo en su lugar

Una vez comprendido el alcance de la información a ser incluída, David y el equipo de ReciVeci tomaron su propio camino (pero no por mucho tiempo…). Su trabajo verdadero estaba apenas comenzando, después del cafecito y quedar satisfechos con los bocadillos de sus reuniones. El siguiente paso del diseño involucra verter toda esa lluvia de ideas en un mapa coherente del sitio a realizar. Esto con la finalidad de proporcionar una plataforma conceptual para construir los siguientes pasos.

Paso 3: Más allá de la estructura

Basado en ese mapa conceptual del sitio, David ingresó entonces en la mente del usuario promedio. Y tomó en consideración: qué debía saber acerca de ReciVeci, ¿y cúal es la mejor manera de organizar esta información? Aún no era tiempo del diseño web, pero él sentía la necesidad de hacer un borrador del contenido para ser arreglado y saber qué páginas serían utilizadas dentro de una serie de andamios conocidos como “wireframes”, los cuales una vez armados fueron devueltos al equipo de ReciVeci.

Paso 4: Conectando equipos grandes con ideas grandiosas

ReciVeci es una organización multinivel con individuos sólidos que conforman diversos equipos. El compromiso y la pasión son las fortalezas de la organización, lo cual queda patente en esta etapa del proceso de diseño web. David presentó su boceto de estructura a un equipo de ReciVeci mucho más amplio, del que tomó nuevas ideas para modelar el contenido final.

Paso 5: Con ayuda de mis amigos (también de la competencia)

El conocimiento es poder; y para David, investigar es vital para diseñar. El sitio web de ReciVeci necesitaba albergar información valiosa, pero además debía lucir elegante y sofisticado, lo que llevó horas de consultar versiones previas del sitio de ReciVeci, así como investigar otras páginas con contenidos similares. Todo esto con la intención de recabar ideas y fusionarlas innovadoramente.

Paso 6: Profundizando en el Diseño

Dotado de ideas e información, el siguiente paso de David con ReciVeci fue el diseño. La interfaz de usuario fue el objetivo (como a menudo lo es) asegurando no únicamente un contenido interesante, sino además invitando al usuario a una gran experiencia interactiva.

Paso 7: Visualizando un mágico prototipo

Aquí es donde todo se concatena: conceptos de alto impacto visuales, e interfaces interactivas simples. Para ReciVeci, David combinó imágenes de papel corrugado y bienes reciclados, con fotos de la compañía y logotipos informativos. Así fue como un prototipo adecuado rindió frutos de esta detallada labor.

Paso 8: Echarlo a volar

Una vez recibida la aprobación final de las maquetas por parte del cliente, el prototipo abandona los cuidados de David su escultor. El prototipo de ReciVeci está ahora alcanzando este escenario, con David terminando los últimos detalles que lo dejarán listo para su implementación. Los programadores expertos de WebCreek pronto tomarán el relevo, para la implentación del sitio,  luego pasará a la etapa de control de calidad, para evitar cualquier conflicto de navegadores y estará lista para ser visitada por los usuarios.

En artículos futuros, les compartiremos más acerca de ReciVeci, y de la colaboraciones “pro bono” en las que WebCreek se ha involucrado, y —por supuesto— maneras en las que pueden involucrarse en acciones de conciencia ambiental. Por ahora, nos emociona revelar como David está poniendo de su parte para apoyar con sus diseños a una causa de beneficio social. WebCreek está orgulloso del manejo de sus caudales, proveyendo siempre la mejor calidad en la experiencia de usuario e interfaz. Pero además estamos interesados en la calidad del agua de los oceános que compartimos, entusiasmados en contribuir en su conservación. WebCreek está fortaleciendo a nuestra comunidad, como una de tantas maneras en las que conectamos los puntos.