Wiboi: La manera inteligente de hidratarse.

UX/UI Case Study

Rubén Alguacil Lago
6 min readNov 22, 2020

1. Introducción y Briefing

Wiboi es el primer proyecto individual del Bootcamp de UX de Ironhack. Para este proyecto he contado con 2 semanas de desarrollo, en el cual he trabajado de forma individual siguiendo la filosofía agile y la metodología Scrum.

El briefing que se nos propuso la primera semana era el siguiente:

Selección de un problema relacionado con el wellness, y tratar de resolverlo mediante una herramienta digital.

Mi forma de trabajar durante las semanas (Planificación y herramientas)

1ª Semana UX

2ª Semana UI

2. Primera semana: proceso UX

2.1. Empatización

Mi investigación sobre wellness fue enfocada hacia la hidratación de las personas. Durante el proceso de investigación hice uso de diferentes herramientas como:

  • Competitive analysis.
  • Lean Survey.
  • Encuestas y entrevistas: trabaje en la preparación de un cuestionario y las entrevistas, obteniendo un total de 271 encuestas y 8 entrevistas. Inmediatamente, tras obtener tanta cantidad de información, realice un affinity diagram; permitiéndome sacar las siguientes conclusiones de los usuarios:
Datos extraídos de 271 encuestas y 8 entrevistas

2.2. Definición

Una vez terminada la fase de empatización e investigación comencé a definir el problema y mi user persona.

Problema:

En primer lugar comencé trabajando el Lean Ux para definir la estrategia:

Lean Ux Canvas

Una vez tenía clara la estrategia que debía seguir, comencé a definir a mi usuario volcando todos los datos que había obtenido de las encuestas y entrevistas. En primer lugar utilice el mapa de empatía, cosa que me ayudo mucho a definir mi user persona que muestro a continuación:

User Persona

Para saber cómo se siente el usuario a nivel emocional en su día a día, realicé el User journey para ver las posibilidades de diseño, y las concreté con el User scenario, que me permitió ver cómo con mi herramienta mejoraría la experiencia.

User Scenario

2.3. Ideación

Una vez definido el usuario y el problema, era el momento de idear una solución, durante esta fase utilice las siguientes herramientas: brainstorming, Moscow y Mindmap. Finalmente llegué a la solución.

Solución:

Una vez definida la solución comencé a trabajar en el Crazy eight, para conocer de una manera ágil como representaría las pantallas principales, este fue el resultado

Crazy eight

2.4 Prototipado

Después del Crazy eight, comence a definir el User flow, el Site map, y el Card sorting para poder comenzar con el Low-Fi. Una vez terminado el Low-Fi realice 5 test con usuarios para corregir errores; recogí el feedback, hice cambios y volví a testear.

Una vez realizados, testeados y anotado los cambios detectados, diseñé el Mid-Fi. A continuación muestro algunas de las pantallas:

Algunas de las pantallas del Mid-Fi

3. Segunda semana: proceso UI

Llegamos a la segunda semana y comenzamos con UI. En primer lugar debía pensar qué valores quería transmitir con la App, quería que fuese: fresca, moderna, natural y calmada.

Para lograr crear estos valores trabaje en un Moodboard y lo mostré a los usuarios. Me dijeron una serie de valores, pero no todos los necesarios; así que decidí aplicar el feedback y modificar algunas de las imágenes, hasta encontrar la combinación perfecta que transmitía lo deseado.

Moodboard Wiboi

Con el Moodboard definido comencé a seleccionar los colores, el principal stopper con el que me encontré fue la accesibilidad, trabaje mucho en ellos para que fuesen accesibles. Finalmente estos fueron los colores seleccionados:

Colores Wiboi

Definidos los colores tocaba pensar el la tipografía y los tamaños. A continuación muestro la tipografía seleccionada y su aplicación en la App.

Tipografía Wiboi

Con los colores y las tipografías definidad, concreté las alineaciones, espacios y sombras que pautaron el diseño de la app. Trabaje en una guía de estilo para ordenar y plantear toda la línea gráfica de la App, y por último volqué en el Style tiles para definir el lenguaje visual del proyecto en un espacio reducido.

Naming

Por último trabaje en el naming, con el fin de darle algo de personalidad. Me inspiró el sonido del agua y el sonido gutural producido al beber e hidratarse.

Finalmente, tras un brainstorming surgió Wiboi, que se compone de wi, procedente del inglés We (nosotros), y Boi procedente del francés Boire (beber).

Ya con el logotipo y el resto de elementos visuales definidos comencé a trabajar en el Hi-Fi; pero antes realicé una landing page en la que presentar Wiboi, y convertir a los usuarios en leads.

Landing page Wiboi

Tras la presentación del proyecto y el último feedback, tuve que realizar pequeños cambios dentro del Hi-Fi, este es el resultado final.

A continuación os muestro el prototipo de alta fidelidad, donde mi user persona Isabel tiene la siguiente meta:

Registrarse en la App.

Crear su plan de hidratación personalizado.

Introducir dos fuentes de hidratación (agua y fruta).

Prototipo Hi-Fi.

4. Próximos pasos

Pensando en la escalabilidad de mi MVP, me gustaría en un futuro poder llevar a Wiboi al siguiente nivel:

Profundizando más en la hidratación y el deporte. Ya que en las encuestas y entrevistas pude ver la necesidad de muchos deportistas de llevar un control más exahustivo mientras realizan deporte, por lo que sería una gran oportunidad poder conectar Wiboi con otras aplicaciones de fitness o de runners.

Por otro lado, me parece interesante la idea de enfocar Wiboi hacia un nicho del mercado algo descuidado; que es la hidratación durante tratamientos médicos, algo fundamental para muchos pacientes, ya que necesitan llevar una hidratación medida y muy específica.

5. Aprendizaje

Estas dos semanas quizás han sido las dos semanas de trabajo más duras, pero sin duda las más enriquecedoras, por fin te enfrentas a las herramientas, a un proceso, y a una toma de decisiones en solitario.

Lo que más duro se me hizo, fue la falta de compañeros con los que debatir la toma de decisiones y los diferentes puntos de vista; además eso me entristeció, porqué una de mis grandes virtudes es el trabajo en equipo. En solitario se trabaja de forma más ágil sí, pero en equipo siempre se llega más lejos.

Un aspecto que creo que trabaje bien en solitario y que me caracteriza, es la organización y la aplicación del feedback. en todo momento tenía claro el proceso y sabía que debía hacer a continuación, trabaje metódicamente y cuidando hasta el más mínimo detalle en el Mid-Fi, cosa que me ayudo mucho en el Hi-Fi, agilizando mi trabajo. Por otro lado aplique siempre los feedback según los recibía, e iteraba hasta encontrar la mejor solución, lo que me hizo tener poco feedback en la presentación del proyecto.

--

--