Porewit — Diseño de una app desde tres conceptos

Nerea Amate
7 min readJan 10, 2021

--

Porewit nace de cuatro challenges que nos propusieron durante el Bootcamp de Ironhack. Para cada challenge disponíamos de tres horas y de una lista de criterios que nos daban nuestros instructores para llevar a cabo los diseños.

El Challenge se divide en cuatro fases:

  • Fase 1: Conceptualización y boceto de la app.
  • Fase 2: Mid-fi general y Hi-fi basado en Uber
  • Fase 3: Versión creativa
  • Fase 4: Versión final del diseño

Fase 1: Conceptualización y boceto de la app

El miércoles de la semana 3 nos plantearon por primera vez este challenge. Partiendo de tres conceptos, nos proponían idear una app que resolviera un problema real (en este caso, definido por nosotros).

Los tres conceptos debíamos seleccionarlos de entre una lista que solo nos dejaron ver durante un minuto. Nos dieron también la opción de elegir dos de la lista y añadir uno, así que yo me decanté por esta última fórmula y seleccioné dos palabras de la lista: geolocalización y avisos personalizados, y añadí la palabra plantas.

¿Por qué plantas? Porque me daban la opción de hacer un proyecto personal y me apasionan las plantas. Como usuaria nunca he encontrado una aplicación que me ayude por completo a llevar un seguimiento del cuidado que necesitan las plantas de mi hogar. Así que, si no la encuentro, ¿por qué no crearla yo?

El problema planteado desde estas tres palabras fue:

Los usuarios tienen dificultades para adaptar la información disponible en internet sobre el cuidado de determinadas plantas a sus condiciones climáticas locales.

Nos dieron solo una hora para diseñar el proyecto hasta el Crazy 8, así que decidí tomarme a mí misma como User Persona para agilizar esta parte de la investigación. Por suerte, mi compañera de promoción Irene, que estaba presente en la sala de trabajo virtual a la que solíamos conectarnos para trabajar, también es una gran aficionada de las plantas, por lo que pude ir contrastando mis necesidades con las suyas y me aseguré de que la información que contenía la app era suficiente para mi MVP.

Tras realizar un boceto esquemático muy, muy rápido de todas las herramientas que estaba acostumbrada a hacer en varios días, hice el Crazy 8 del diseño, que en un primer momento era algo así (os prometo que mejora a lo largo del proceso):

Tras esto, nos dieron otra hora para crear un moodboard y un style tile de nuestra app y enviarlo por el canal de Slack de Ironhack para ponerlo en común. Esto me resultó muy frustrante. Me daba la sensación de que la selección de colores no tenía sentido ni era acorde con la utilidad que se le iba a dar a la app.

Aún así, como se acababa el tiempo, intenté encajar los elementos de la mejor manera que pude y entregué el Style Tile.

Fase 2: Mid-fi general y Hi-fi basado en Uber

El viernes de la semana 4 volvimos a retomar este challenge. En tres horas, teníamos que diseñar la versión mid-fi de la app que habíamos diseñado en el challenge de la semana 3 y crear una versión Hi-Fi de la app utilizando los colores del diseño de Uber.

En parte, me alivió saber que me tenía que ceñir a unos colores concretos, porque cuando volví a ver el Style Tile que había entregado la semana anterior, de repente no tenía ningún sentido. Creedme, una semana en Ironhack da para mucho.

Realicé una versión low-fi del diseño para plantear una versión casi definitiva de la estructura de la app antes de empezar con el mid-fi.

Low-Fi — Porewit

El deadline para este challenge eran las 18h de esa misma tarde. A las 17:58h hubo una avalancha de archivos en el canal de Slack, entre los cuales estaban mis versiones mid-fi y hi-fi de Porewit (que en ese momento aún se llamaba Plantify).

Esta es el diseño Hi-Fi de Porewit basado en Uber que propuse:

Hi-Fi basado en Uber — Porewit

No estaba del todo descontenta con el resultado, pero ese fin de semana decidí darle un cambio a la app. Era un proyecto personal, así que tenía libertad para cambiar aspectos básicos del producto. En cualquier caso, no habíamos recibido feedback de ningún tipo por parte de los instructores, así que me tomé este proyecto como algo personal que quería disfrutar haciendo.

Busqué referencias, estuve testeando apps similares y otras que tenían elementos que podían ser útiles para algunas secciones de la app. No sé cuántas apps me descargué, pero al final de ese fin de semana tenía un resultado con el que estaba mucho más satisfecha que el viernes anterior.

Esta es la versión mid-fi del diseño que propuse para la app:

Mid-Fi — Porewit

Fase 3: Versión creativa

La tercera fase del challenge consistía en aplicar colores de manera creativa, un poco “alocada” y siendo conscientes de que estos diseños no podían ser llevados a la práctica en la realidad. Este reto fue divertido y dio pie a diseños muy extravagantes en el canal de Slack. En mi caso, opté por algo así:

Hi-Fi Creativo — Porewit

Fase 4: Versión final del diseño

En la semana 8 del Bootcamp, coincidiendo con el inicio del proyecto final, nos dieron la “sorpresa” de que en cinco días teníamos que presentar una versión final de la app que habíamos diseñado durante los challenge de las semanas anteriores.

Decidí dedicar el fin de semana a terminar esta práctica y no adelantar trabajo del proyecto final. Había pasado mucho tiempo desde que habíamos hecho el último challenge y, a esas alturas, apenas recordaba el problema del que partía mi app, así que la primera parte del trabajo fue repasar el trabajo que había hecho.

Una vez que me había puesto al día, abrí el proyecto de Figma y: horror, recordé que en el momento de diseñar la versión mid-fi todavía no nos habían descubierto el maravilloso mundo de la base 8. Revisé las pantallas del mid-fi y me planteé dos opciones:

  • La primera era arreglar ese desastre de espaciados, elementos erróneamente aplicados y secciones incompletas.
  • La segunda opción era empezarlo de cero. Y esta fue la que elegí, porque me iba a dar mucho menos trabajo que la primera y, en este caso, al tratarse de un proyecto para el que nos habían dado completa libertad, esta opción era igualmente válida.

Empecé por realizar un nuevo moodboard, porque una de las cosas con las que más descontenta estaba era la selección de colores para la app. Aunque el resultado al que llegué con el nuevo moodboard se aproxima bastante a la primera propuesta, esta nueva paleta de colores tenía mucho más sentido para mi diseño.

Por supuesto, en el nuevo diseño integré muchas cosas que eran aprovechables de la primera versión, pero todo lo demás, desde el aspecto de la pantalla de inicio hasta el objetivo del usuario, lo rehice desde cero. Esto me llevó todo el fin de semana, pero una vez terminado el hi-fi, llegué al resultado que os dejo a continuación, con el que a día de hoy sigo estando bastante satisfecha.

Hi-Fi definitivo — Porewit

Por supuesto, está expuesto a mejoras, pero es un proyecto que se ha desarrollado en muy poco tiempo, bajo mucha presión y en el que espero poder invertir algo más de tiempo en el futuro.

Esto es todo sobre el proceso de diseño de Porewit, muchas gracias por acompañarme hasta aquí. A decir verdad, fue un proceso un poco frenético y creo que esto se ha podido apreciar en todo el proceso, pero espero que el resultado os guste.

¿Alguna vez os habéis visto obligados a resolver un proceso muy complejo en muy poco tiempo? ¿Cómo ha sido vuestra experiencia?

¡Os leo en los comentarios!

Nerea

--

--