🏢 Universidad de Granada 📚 Diseño de Interfaces de Usuario 📅 Curso 2019/20
👤 Diego García Aurelio 
diegogaraur
Descripción: erranT espacio cowork es una empresa que ofrece un lugar de coworking en pleno centro de Granada. La empresa contactó conmigo explicándome que necesitaban un rediseño de su página web https://www.errant.es, ya que llevaban mucho tiempo sin renovarla y así de paso añadir nuevas funcionalidades que sus usuarios pudieran querer.
🔧 Herramientas utilizadas:
- Photoshop
- Adobe XD
- diagrams.net
- Material Color Tool
📖 Recursos:
- Iconos hechos por Flat Icons en www.flaticon.com
- Plantilla de la persona hecha por Ashley de www.behance.net
- Foto de la persona de https://thispersondoesnotexist.com
Qué es Coworking | Definición de una tendencia que arrasa, Coworkingfy (Sep 13). https://coworkingfy.com/que-es-coworking
Antes de realizar cualquier otra acción para el diseño de la nueva web, voy a observar las páginas web de otras empresas de la competencia para poder extraer información y conocer funcionalidades útiles que podríamos utilizar para nuestra solución. A continuación, las 4 webs estudiadas:
1.1. Cubikate web
Cubikate es otra empresa granadina de coworking que se encuentra en el centro de la ciudad. Tras ver un poco la web, podemos observar que lo único destacable es la oficina virtual. El resto de la web muestra información y contacto de la empresa.
1.2. Topyco web
Topyco es una empresa de coworking ubicada en el PTS (A fueras de Granada). La página web hace uso de texturas que actualmente no están en tendencias de diseño web, por lo que podríamos decir que la web tiene un aspecto antiguo o retro. Respecto a la funcionalidad, destacar la disponibilidad de las salas de reuniones.
1.3. Anda CoWork web
And CoWork también es otra empresa que ofrece un espacio de coworking y se encuentra en la zona de Caleta/Plaza de toros en Granada. La página web es bastante completa en cuanto a funcionalidad,
1.4. Impact Hub Madrid web
Impact Hub es una empresa de coworking con distintas sedes en todo el mundo. Me he fijado especialmente en la sede de Madrid para este estudio. Aunque la empresa no compite directamente con erranT, sí podemos obtener información útil que podemos usar para mejorar el estudio que estamos realizando. Su página web es de las más completas respecto a su funcionalidad, destacamos el uso de login ligado a la subscripción online.
| Funcionalidad\Empresa |  |
 |
 |
 |
|---|---|---|---|---|
| Precios visibles | ❌ | ✔️ | ✔️ | ✔️ |
| Disponibilidad de salas de reuniones | ❌ | ✔️ | ❌ | ❌ |
| Oficina virtual | ✔️ | ❌ | ✔️ | ✔️ |
| Blog | ❌ | ❌ | ✔️ | ✔️ |
| Otro Idioma (Inglés) | ❌ | ✔️ | ✔️ | ❌ |
| Colaboradores | ❌ | ❌ | ✔️ | ✔️ |
| FAQ | ❌ | ❌ | ❌ | ✔️ |
| Eventos | ❌ | ❌ | ✔️ | ✔️ |
| Login/Subscripción online | ❌ | ❌ | ❌ | ✔️ |
Con esta tabla comparativa podemos comparar con facilidad las funcionalidades que contienen sus respectivas páginas web. Como observamos, la web que carece de funcionalidad respecto a las otras web es la de Cubikate y la que más funcionalidad incorpora es Impact Hub Madrid.
Para tener en cuenta al usuario durante el proceso de diseño, he creado la siguiente persona y así poder observar desde otra perspectiva el negocio que estamos estudiando.
Como podemos observar, Irene es una persona que encajaría perfectamente en el mundo del coworking.
A continuación, vamos a ver algunas de las experiencias que podría tener la persona anterior en la página web actual de erranT para así extraer conocimiento e ideas a mejorar.
Experiencia de Irene
📖 Contexto
Irene cada tarde va a la biblioteca a escribir su novela, pero estamos a principio de Junio y los estudiantes ya empiezan a ocupar la capacidad total de la biblioteca y siempre se acaba quedando sin sitio, teniendo que volver a casa. 😠 (Enfadada)
Cuando llega, no se concentra, se pone a jugar con la consola y cuando quiere darse cuenta ya son las 20 de la tarde y no ha escrito nada. Así se pasa la mayoría de los días. 😭 (Triste)
🔍 Investigación
Irene está buscando lugares para poder escribir tranquila en Granada y se encuentra con el concepto de coworking. Tras entender qué es el coworking, Irene se pone a buscar empresas de coworking en Granada y se encuentra con erranT. 😄 (Contenta)
🎬 Actuación (Experiencias en la web de erranT)
-
Encuentra los precios que le parece razonable, tan solo quiere la tarifa de las tardes, se alegra de tener internet y de que haya una zona de descanso para tomarse un café. 😄 (Contenta)
-
Le gustaría saber si además, si hacen eventos y cuándo, pero no encuentra nada en la página. 😞 (Decepcionada)
-
Ve que hay un blog para escribir y ya está pensando que podría escribir allí. 😄 (Contenta)
-
Tiene algunas preguntas acerca del sitio, pero tiene que contactar con la empresa 😐 (Neutral)
-
Descubre que hay información de gente que usa el cowork de erranT, pero hay muchos y le gustaría ver los que tiene gustos similares a ella. 😞 (Decepcionada)
-
Antes, de contratar el servicio gustaría probar un día gratis, pero parece ser que no se puede. 😞 (Decepcionada)
❔ Conclusión
Finalmente, decide contactar por teléfono para saber más detalles sobre el sitio, ya que no sabe si ofrecen un día de prueba, ni la disponibilidad o si hay ofertas. 😕 (Confundida)
Tras la llamada, decide pensar que hacer durante unos días para saber si le rentará o no. 😐 (Neutral)
Como observamos, Irene pasa por distintos sentimientos a lo largo de su día. Respecto a los sentimientos relacionados con la web de erranT, tendremos como objetivo solucionar los problemas o añadir nuevas funcionalidades para satisfacer las necesidades de los usuarios.
Una vez realizado el estudio etnográfico y habiendo obtenido un feedback del usuario acerca de la web a rediseñar, podemos concluir nuestra propuesta de valor. El objetivo principal de erranT es dar un espacio ideal y confortable para trabajar a personas y crear una comunidad donde puedan compartir ideas, charlar e incluso realizar actividades fuera del trabajo. Además, a partir de ahora, los usuarios podrán solicitar ir el primer día gratis sin compromiso, de está forma podrán saber si se ajusta a sus necesidades y después decidir si se subscribe con mayor facilidad.
Sobre la nueva web
Para cumplir con los objetivos de la empresa, tendremos que ofrecer una web que satisfaga las necesidades del usuario.
Por un lado, se mantendrán la información que ya se ofrece sobre el espacio de coworking y su blog, de esta manera el usuario conocerá tanto los precios como los servicios disponibles en el local y podrá leer aportaciones de otros coworkers en el blog.
Por otro lado, se aportarán nuevas funcionalidades que los usuarios apreciarán como:
-
Informar sobre eventos en erranT: Si a los usuarios les informas sobre eventos que se realizan, les llamará más la atención el espacio e incluso les gustará asistir a alguno de éstos.
-
Filtrar los coworkers: Permitir a los usuarios filtrar en la ventana de coworkers para que busquen personas afines a ellas.
-
Solicitar prueba gratuita: Así, el usuario decidirá con mayor facilidad habiendo probado el servicio.
-
Añadir la disponibilidad de las salas de reuniones: De esta forma, los que quieran alquilar una sala podrán organizarse de forma más sencilla.
-
Añadir un apartado de FAQ: Resolver dudas frecuentes de los usuarios podría ayudarles de forma más rápida.
La siguiente imagen muestra la estructura que tendrá la web que estamos rediseñando.
El diseño de la web será totalmente responsive, ya que hoy en día se accede a las webs desde cualquier dispositivo y el usuario navegue desde donde se sienta más cómodo.
Se muestra solo es el boceto del inicio. También indicar que solo se muestra la primera vista, faltaría más información en esta página que se podría ver navegando.
Para las líneas de diseño seguimos las pautas de Google: Material Design. Usaremos sus recomendaciones para el diseño web y sus facilidades para realizar una aplicación responsive.
El color principal de la web será el rojo 600 de la paleta Material Design. También, usaremos su variante oscura para el uso de botones.
En este caso apostamos por la tipografía por defecto en Material Design: Roboto. La siguiente imagen muestra los tamaños y peso para su utilización.
Los iconos que usará la web de erranT son los que aporta Material Design con el tema Filled.
Los componentes que más usaremos a lo largo de la web, serán los de la siguiente imagen, entre otros.
Para finalizar este caso de estudio, quería comentar que se podrían haber hecho más bocetos, pero quería mostrar algo sobre los guidelines (mi parte favorita), por eso decidí mostrar el boceto de inicio sólo. Como trabajo futuro estarían realizar todos los bocetos indicados en el sitemap y desarrollar un prototipo completo aplicando las guías de estilo para que el cliente y distintos usuarios puedan probarlo.
Como valoración personal, me ha gustado la práctica de realizar un caso de estudio propio y aplicar lo aprendido en la asignatura.