Test Diseñador UX/UI

Equipo DO

Situación de Incendios Forestales en Chile

Los incendios forestales son un problema medio ambiental a nivel global, afectan miles de hectáreas de bosques, matorrales, pastizales y todo lo que habita en ellos; afecta al suelo, a la fauna, al aire, al ciclo del agua y, en general, al entorno del ser humano y en ocasiones a las propias personas. Es muy necesario y urgente la participación de todos en la prevención, identificación y difusión de focos y control de incendios y poder así entregar información oportuna a la ciudadanía.

La Corporación Nacional Forestal (CONAF), en su calidad de servicio forestal nacional, gestiona el Programa de Manejo del Fuego para la protección contra incendios forestales en el país, contribuir a la protección de terrenos rurales privados de medianos y pequeños propietarios, y proteger la integridad de las personas y sus bienes en áreas de interfaz urbano-forestal.

Cuando lamentablemente ocurre un incendio forestal, es muy importante poder identificar, capturar, actualizar constantemente, disponibilizar toda la información y entregarla a todos quienes colaboran en el combate a los incendios forestales y a la ciudadanía.

Para estos fines CONAF pone a disposición a través de su sitio web toda la situación diaria de incendios forestales, disponible en:

https://www.conaf.cl/situacion-nacional-de-incendios-forestales/

El desafío es poder rediseñar el sitio web, entregar la situación actual de incendios forestales de una forma más dinámica, destacar ciertos indicadores clave y estadísticas generales, y mejorar la experiencia de los usuarios en el sitio. 

Para este ejercicio contamos con 24 Horas desde el momento que lo recibimos. Asi que vamos a ello…

1.- Experiencia de usuario

Rediseñar el sitio web dando una mejor experiencia a la ciudadanía y ayude eficazmente a identificar zonas afectadas.

  • Basta con la generación de maquetas del rediseño.
  • Alrededor de 850.000 personas en nuestro país tienen algún grado de discapacidad visual. Cuéntanos cómo resolverías este requerimiento y qué propones para que la experiencia de usuario sea apta para usuarios con dificultades visuales.

Debido al tiempo que tengo para completar el desafío, partiré mi investigación realizando una auditoria competitiva, para evaluar soluciones similares ya existentes.

Para esta realizare un benchmark para comparar el propósito de cada opción así como su usabilidad, navegación y las funcionalidades con las que cuentan.

El benchmark me permitió evaluar opciones de funcionalidades que pude agregar a mi diseño, funcionalidades como:

  • Un dashboard en la página principal con los datos mas relevantes.
  • Un mapa resaltando las zonas afectadas. 
  • Un sistema de alertas y/o notificaciones que mantenga a la ciudadanía informada sobre los últimos acontecimientos.
  • Un foro ciudadano colaborativo para combatir nuevos focos de incendios.

Por otro lado el nuevo diseño debía mejorar la navegación y usabilidad con un estilo moderno sin dejar de lado los lineamientos de diseño de la marca, debía contar con una versión responsive y también contar con funcionalidades que mejoren la accesibilidad a personas con discapacidad visual.

Para ello, el siguiente paso fue proceder a realizar un conjunto de wireframes de baja fidelidad en papel que me permitieran estructurar las pantallas mas importantes (mantuve la misma arquitectura web para efectos de este ejercicio).

El siguiente paso fue realizar el prototipo de baja fidelidad en digital, para ello utilice Figma. Como bien lo indica el ejercicio solo realice me enfoque en la estructura, por lo tanto no aplique estilos en el diseño.

Otra tarea era agregar una funcionalidad para mejorar la accesibilidad a personas con discapacidad visual, en este sentido agregue un botón en la parte superior para ajustar la vista para el día o la noche, para este aspecto también podríamos considerar una versión en tonos de colores para personas con daltonismo.

2.- Responsibidad

La página web no cuenta con una versión responsive, por lo tanto a partir del diseño o estructura realizado para la versión desktop procedí a realizar una versión ajustada para mobile, de esta misma manera se pueden realizar diferentes versiones para tablet´s.

3.- Diseño

Proponer un diseño gráfico simple e intuitivo a las maquetas generados de la nueva experiencia. Además, dar énfasis a los siguientes indicadores clave, a nivel nacional y regional:

  • Cantidad total de incendios y superficie afectada
  • Cantidad total de incendios y superficie afectada por estado (En combate, Controlado, Extinguido)
  • Comparativo actual versus las últimas 5 temporadas (quintenio)

Para efectos de este ejercicio realice una distribución para dar énfasis a los 3 indicadores mencionados antes y realice un diseño simple y limpio que resuma de manera clara y muy a la vista la información contenida en las graficas.

4.- Datos Auxiliares

¡Logramos acceder a datos actualizados meteorológicos en tiempo real! Por lo que proponemos crear una sección que contribuya a la prevención de incendios, que permita identificar las localidades donde se dé el Factor 30–30–30, y así identificar zonas de riesgo donde es probable que se ocasione un incendio forestal dado este factor. Ref: https://www.uchile.cl/noticias/200220/que-es-el-factor-30-30-30-que-favorece-la-propagacion-de-incendios

  • Diseñar este componente para alertar a la ciudadanía en tiempo real las zonas de posible riesgo (generar una maqueta).

Para ello realice una estructura para un sitio que muestre claramente el estado del clima, en donde puedas seleccionar por región y un complemento de google maps que indica las zonas de riesgo en el mapa, que lo hace muy intuitivo y mejora la experiencia.

También puedas activar alertas en tu navegador. Para mejorar aun más esta experiencia podría crearse un sistema de alertas por email o whatsapp.

Por ultimo agregue una funcionalidad para que la ciudadanía pueda informar sobre incendios ó posibles focos de incendio a los entes del estado encargados. La funcionalidad despliega un formulario que solicita la ubicación y datos básicos para enviar la alerta.

Para complementar lo mostrado en este informe comparto los enlaces del diseño:

Figma: https://www.figma.com/file/fH7zhH6PHRNSBysepJCDkI/Propuesta-redise%C3%B1o-CONAF.CL?node-id=6%3A105&t=nsr1D33I73KZUiMa-1

Prototype Desktop: https://www.figma.com/proto/fH7zhH6PHRNSBysepJCDkI/Propuesta-redise%C3%B1o-CONAF.CL?node-id=7%3A106&scaling=scale-down&page-id=6%3A105

Prototype Mobile: https://www.figma.com/proto/fH7zhH6PHRNSBysepJCDkI/Propuesta-redise%C3%B1o-CONAF.CL?node-id=24%3A5332&scaling=scale-down&page-id=24%3A5309

Realizado por Jhon Vivas — https://jvivasonline.com

Los secretos del diseño de interfaz de usuario: Cómo hacer que tu aplicación sea más atractiva y fácil de usar

¿Alguna vez has descargado una aplicación solo para descubrir que es confusa e intuitiva?

Es probable que hayas eliminado rápidamente la aplicación de tu teléfono y hayas buscado una alternativa. La experiencia de usuario es esencial para el éxito de cualquier aplicación, y es aquí donde entra en juego el diseño de interfaz de usuario.

El diseño de la interfaz de usuario, también conocido como UI, se refiere a la apariencia y funcionamiento de una aplicación. Se trata de la forma en que los usuarios interactúan con una aplicación, desde la navegación hasta la presentación de la información. La UI es esencial para la satisfacción del usuario y el éxito de una aplicación.

Entonces, ¿Cómo puedes asegurarte de que tu aplicación tenga una UI efectiva? Aquí hay algunos consejos clave para crear un diseño de interfaz de usuario atractivo y fácil de usar:

  1. Mantén la simplicidad: La simplicidad es clave en el diseño de la interfaz de usuario. Una aplicación que es fácil de entender y de usar es más probable que sea popular entre los usuarios. Trata de utilizar una paleta de colores minimalista y una tipografía legible, y haz que la navegación sea intuitiva.
  2. Haz que la aplicación sea intuitiva: El objetivo de una aplicación es hacer la vida de los usuarios más fácil, por lo que es importante que sea intuitiva. Una aplicación intuitiva es aquella en la que los usuarios pueden encontrar fácilmente lo que están buscando y realizar tareas sin tener que pensar mucho.
  3. Ofrece una experiencia personalizada: Los usuarios quieren sentir que su experiencia con una aplicación es única y personalizada para ellos. Ofrecer opciones de personalización, como elegir la paleta de colores o la tipografía, puede hacer que los usuarios se sientan más conectados con la aplicación.
  4. Haz que la aplicación sea atractiva: Un diseño atractivo es esencial para la experiencia de usuario. Los usuarios tendrán más probabilidades de interactuar con una aplicación si es atractiva y llamativa. Por lo tanto, es importante invertir en un diseño atractivo y bien diseñado para asegurarse de que la aplicación sea atractiva y atraiga a los usuarios.
  5. Prueba y mejora constantemente: El diseño de la interfaz de usuario es un proceso en constante evolución. Es importante realizar pruebas con usuarios reales para comprender cómo interactúan con la aplicación y hacer ajustes en consecuencia. Escuchar las opiniones y comentarios de los usuarios es esencial para mejorar constantemente la experiencia de usuario.

Para terminar quiero decirte algo, si eres diseñador seguramente ya lo sabes, pero si no eres diseñador o estas comenzando en este mundo debes saber que el diseño de interfaz de usuario es esencial para el éxito de cualquier aplicación. Hacer seguimiento constante y mejora continua, mantener las buenas practicas y siguiendo los pasos anteriores son algunos de los consejos clave para crear una UI efectiva. Recuerda siempre que la experiencia de usuario es crucial para la satisfacción del usuario y el éxito de una aplicación, por lo que es importante invertir el tiempo necesario y esfuerzo para obtener un buen diseño.

Transforma tus experiencias de usuario con el diseño adaptativo: la clave para un éxito digital garantizado

«En un mundo cada vez más digital, los usuarios esperan experiencias en línea suaves y eficientes, independientemente de dónde se encuentren o de qué dispositivo estén utilizando.»

Sin embargo, con una amplia variedad de tamaños de pantalla y dispositivos, los diseñadores de experiencias de usuario a menudo se enfrentan a un desafío importante: ¿cómo crear experiencias de usuario que sean efectivas y atractivas en todos los dispositivos? La respuesta a esta pregunta radica en el diseño de interfaz de usuario adaptativo (AID).

El AID es un enfoque de diseño de experiencia de usuario que se centra en crear experiencias en línea que se ajusten automáticamente a diferentes tamaños de pantalla y dispositivos. En lugar de crear una experiencia única para cada dispositivo, el AID utiliza tecnologías como CSS, HTML y JavaScript para crear una experiencia de usuario que se adapte automáticamente a la pantalla de un dispositivo, lo que significa que los usuarios pueden disfrutar de una experiencia consistente y fluida en cualquier dispositivo.

Además, el AID también es esencial para mejorar la experiencia de usuario en dispositivos móviles. En un mundo donde cada vez más personas acceden a Internet a través de sus dispositivos móviles, es crucial que los diseños sean atractivos y fáciles de usar en estos dispositivos. Los diseños adaptativos se ajustan automáticamente a la pantalla de un dispositivo móvil, lo que significa que los usuarios pueden ver todo el contenido sin tener que hacer zoom o desplazarse.

Además de mejorar la experiencia de usuario en dispositivos móviles, el AID también tiene un impacto positivo en el SEO. Los motores de búsqueda prefieren sitios web que se ven bien en dispositivos móviles, lo que significa que los sitios web con diseños adaptativos pueden tener un mejor rendimiento en los resultados de búsqueda. Esto es especialmente importante para las empresas que dependen de los resultados de búsqueda para atraer tráfico y generar ingresos.

Además, el AID también es más eficiente desde una perspectiva de desarrollo. En lugar de crear una experiencia única para cada dispositivo, los diseñadores pueden reutilizar el mismo código y solo hacer ajustes menores para adaptarse a diferentes tamaños de pantalla y dispositivos. Esto significa que los desarrollos son más rápidos y más económicos, lo que es especialmente importante para las pequeñas y medianas empresas que buscan maximizar su presupuesto de tecnología.

El diseño adaptativo es una herramienta esencial para cualquier empresa que busque mejorar la experiencia de usuario en línea. Ofrece una experiencia de usuario más fluida y eficiente en dispositivos móviles, mejora el SEO y es más eficiente desde una perspectiva de desarrollo. Para asegurarse de tener éxito en el mundo digital, es esencial que las empresas adopten el diseño adaptativo en sus estrategias de experiencia de usuario.

Por ultimo el diseño adaptativo es un enfoque crucial para cualquier empresa que busque tener éxito en el mundo digital. Ofrece una experiencia de usuario más fluida y eficiente en diferentes dispositivos, mejora el SEO y es más eficiente desde una perspectiva de desarrollo. Las empresas que adoptan el diseño adaptativo pueden estar seguras de ofrecer a sus usuarios una experiencia en línea atractiva y eficiente, lo que los ayudará a destacar en un mercado cada vez más competitivo.

¡Gracias por leer y compartir!

Te deseo excelentes diseños… ☕❤️

El futuro de las catas de café

¿Eres un tostador y necesitas catar tu café? ¿Eres un productor y catas tus muestras? ¿Tienes una cafetería y ofreces experiencias de catas de café a tus clientes?

Bien sabemos que la cata del café es una de las herramientas más importantes para determinar la calidad en taza ya que permite, a través de percepciones sensoriales, identificar el aroma, el sabor y el cuerpo de la bebida.

Sin embargo existen diferentes procesos a la hora de hacer una cata, pero muy pocas opciones para llevar buenas anotaciones, un control y un registro; no solo de una, sino de todas las catas que realizamos.

Cuando llevamos catamos y hacemos nuestras anotaciones en nuestra planilla de papel, tenemos algunas ventajas, pero me atrevo a decir que son mas las desventajas. Archivar papeles es un proceso tedioso, sobre todo cuando no contamos con los espacios adaptados de manera optima para ello. Y si, actualmente podemos escanear tales papeles y llevar un registro en la nube, aun así, es complicado analizar los datos obtenidos y esto demandaría un tiempo. 

Que tal si diseñamos una solución amigable, que en 2023 nos permita llevar las anotaciones de nuestras catas, tener un registro, hacerlo de manera colaborativa y poder analizar los datos de la mejor manera.

Investigación

Para comenzar, realicé una encuesta a 22 tostadores y academias de café de Chile y otros países de Latam, para obtener datos cuantitativos sobre su forma de registrar, almacenar y analizar la información obtenida en sus catas, y estos fueron los resultados:

Luego analicé los datos obtenidos de estas encuestas y como pueden notar en las gráficas, la mayoría de las personas encuestadas prefiere llevar un registro manual en sus sesiones de cata la hoja impresa de la Specialty Coffee Association (SCA), al mismo tiempo, la mayoría prefiere almacenar estos datos obtenidos escaneando o fotografiando las planillas y subiéndolas a la nube. Por ultimo la mayoría también utiliza un documento de Excel en donde vacían la información y analizan los datos obtenidos.

ENTREVISTA A 3 PERSONAS (PENDIENTE)

En el mercado de momento no existe una alternativa a Tastify mas que las alternativas tradicionales de registro de datos. Realice un benchmark para comparar las alternativas que tenemos actualmente y comparé las características que consideré mas importantes para esta investigación.

Gracias a esta comparativa pude concertar ciertas ventajas y desventajas de cada uno de los métodos. El propósito es muy similar a pesar de que la App tiene un valor agregado, todos los métodos coinciden en algunas funcionalidades; la recolección de datos y las sesiones de cata en grupo principalmente. Sin embargo la rueda de sabores y colores solo se puede generar mediante la app, a menos que tengas capacidades de diseño y operativamente es inviable hacer una por cada cata realizada.

El siguiente paso fue crear dos user persona que describen a quienes considero pueden ser los usuarios principales de la app que quiero crear, sus puntos de dolor, metas y necesidades. Decidí separar en dos grandes grupos de personas para poder obtener una solución para un grupo mas grande de personas. Luego su user journey a manera de entender su proceso actual de cata y tener un contexto para identificar oportunidades.

Con la información y datos obtenidos en esta fase procedí a definir de que manera podemos dar solución a estos puntos de dolor y como podemos abordar las oportunidades que surgieron del user journey, avanzando así a la fase de la Ideación.

Fase de Ideación

Para comenzar la fase de ideación identifique el siguiente ciclo respecto al viaje del usuario:

Gracias a este ciclo del viaje del usuario y las oportunidades del user journey pude determinar algunas funcionalidades que pueden aportar valor y atacar los puntos de dolor de nuestros usuarios. Si bien gran parte de estas funcionalidades ya existen y están cubiertas por la app que formo parte de la investigación inicial, pienso crear un grupo de funcionalidades similares y agregar otras que que en conjunto formen una herramienta diferente a lo que existe en el mercado.

Decidí dividir las funcionalidades en dos partes (Existentes y Nuevas) entre las existentes tenemos (La gestión de sesiones de cata, invitaciones y notificaciones automatizadas mediante email a los participantes, recopilación de datos por parte de cada participante de manera individual pero asociado a una misma sesión de cata, resúmenes, informes y graficas que permitan analizar los datos, generación de rueda de colores y sabores de cada muestra catada.), mientras que entre las nuevas (comunidad tipo red social que permita compartir/recibir resultados y opiniones obtenidos en sesiones, usabilidad offline, personalizar informes y ruedas de colores y sabores.)

Para este conjunto de soluciones necesitaremos diseñar una interface tanto móvil como de escritorio, para ambas versiones utilizaremos un nav bar lateral que se contraiga cuando no este en uso, como el ejemplo a continuación:

Debido a que la iteración y las pantallas son bastante complejas y requieren de mucha información tomé como base para mi diseño la app ya existente y sobre esta base haré algunos cambios. También diseñé por completo las pantallas relacionadas a las nuevas funcionalidades, comparto ejemplo de uno de los Wireframes de baja fidelidad en papel a continuación:

Continuando con el proceso de diseño visual realice wireframes digitales de media fidelidad, los cuales utilice para realizar algunas entrevistas a usuarios potenciales, obteniendo resultados que conllevarían a algunos cambios de ese primer diseño, sobre todo de estructura y para mejorar el flujo del usuario.

Por ejemplo, la nueva sección de comunidad permitirá tener un feed mas dinámico y diferente cada vez que ingreses a la app, por lo tanto será el home, también agregaremos un dashboard para resumir todas las sesiones en una sola pantalla.

Sigo trabajando en ello, próximamente verás el resultado final! 

0