Casos Prácticos
Casos Prácticos
Aquí están algunos proyectos en los que he trabajado
clic
App Web de donación de objetos
Skincare for you Tienda Online
Infofilm Información de peliculas
SkinCare for You
El proyecto consistió en diseñar una aplicación de venta de productos para el cuidado de la piel, con el principal objetivo de asesorar a las compradoras mediante un sistema de filtrado basado en estudios. El diseñador lideró desde la ideación hasta el diseño final, incluyendo la investigación de usuario, prototipado y diseño de interacción. Se enfocó en mujeres de 18 a 50 años con ingresos medios interesadas en el cuidado de su piel. A pesar de los desafíos de probar los diseños y los altos costos de producción, las pruebas de usuario condujeron a mejoras significativas en la interfaz. El proyecto subrayó la relevancia de la retroalimentación y la adaptación constante basada en las necesidades del usuario.
El rol del diseñador en el proyecto:
En este proyecto, el diseñador desempeñó un papel integral, liderando desde la ideación y la investigación de usuario hasta el diseño de esquemas, prototipos, arquitectura de información, y recorrido de usuario. También estuvo a cargo de la redacción de los textos y el diseño de interacción y movimiento.
El objetivo del proyecto
La principal meta de la aplicación era asesorar a las compradoras en la elección de productos para el cuidado de la piel a través de un sistema de filtrado basado en estudios específicos y preferencias individuales.
El público objetivo
La aplicación fue diseñada pensando en mujeres de entre 18 y 70 años con ingresos medios, que buscan tener un mayor control sobre la salud de su piel y quieren productos adaptados a sus necesidades específicas.
Los principales desafíos y limitaciones:
- Pruebas de diseño exhaustivas: Antes de la implementación final, se requería realizar pruebas exhaustivas de los diseños. Este paso era crucial para garantizar que la aplicación cumpliera con las expectativas y necesidades del usuario.
- Costo del proceso de producción: La producción de la aplicación tenía costos elevados, lo que significaba que cualquier cambio o iteración después de que el diseño ya había sido implementado conllevaría un gasto significativo.
- Iteración basada en experiencias reales: Una vez que el diseño ya estaba en producción, resultaba complicado hacer modificaciones basadas en las experiencias y feedback de los usuarios reales. Esta limitación restringía la capacidad de adaptar y mejorar la aplicación según las necesidades y preferencias del usuario que surgían después de las pruebas iniciales.
Detalles del estudio de investigación
- Análisis de la Competencia:
- Objetivo: Identificar las fortalezas, debilidades, oportunidades y amenazas de las aplicaciones competidoras en el mercado.
- Metodología: Se seleccionaron aplicaciones líderes en el sector de cuidado de la piel y se evaluaron en función de sus características, funcionalidad, diseño y experiencia del usuario.
- Resultados: Se identificaron patrones comunes y características destacadas que se podrían considerar para el diseño propio. A la vez, se detectaron áreas de mejora en las que la nueva aplicación podría diferenciarse y sobresalir.
2. Estudio de Casos Antecedentes:
- Objetivo: Comprender las soluciones y problemas enfrentados por aplicaciones o proyectos similares en el pasado.
- Metodología: Se recopilaron y analizaron estudios de caso relevantes, publicaciones académicas y análisis sectoriales relacionados con aplicaciones de cuidado de la piel y tecnologías similares.
- Resultados: Se ganó una comprensión profunda de las tendencias históricas, los desafíos recurrentes y las soluciones probadas, lo que ayudó a informar las decisiones de diseño y estrategia.
3. Estudio de Usabilidad Basado en Encuestas sobre Prototipos:
- Objetivo: Evaluar la funcionalidad, facilidad de uso e intuitividad del diseño propuesto.
- Metodología: Se crearon prototipos interactivos de la aplicación y se presentaron a un grupo seleccionado de usuarios. Se les pidió que realizaran tareas específicas y luego completaran encuestas para proporcionar retroalimentación sobre su experiencia.
- Resultados: Se identificaron áreas en las que los usuarios enfrentaban confusión o dificultad, así como características que encontraban particularmente útiles o atractivas. Esta información fue esencial para iterar y perfeccionar el diseño de la aplicación antes de su producción final.
Conceptos de Diseño Iniciales
- Diseño Centrado en el Usuario
- Filtrado Personalizado
- Interfaz Amigable y Atractiva
- Educación e Información
- Retroalimentación Activa
- Arquitectura de Información Clara
- Diseño de Interacción y Movimiento
Bocetos
Los Resultados de las Pruebas de Usuario
Las pruebas de usuario son esenciales para garantizar que una aplicación sea intuitiva y satisfaga las necesidades del público objetivo. En este proyecto, se llevaron a cabo pruebas intensivas que arrojaron varios hallazgos cruciales:
- Necesidad de Más Opciones en Filtros: Los usuarios expresaron el deseo de tener más control y precisión al filtrar productos, lo que llevó a la adición de opciones adicionales en los filtros para que pudieran refinar sus búsquedas según sus preferencias y necesidades específicas.
- Presentación de Resultados de Búsqueda: Se observó que los usuarios estaban buscando una manera más clara y eficiente de visualizar los productos que coincidían con sus criterios. Como resultado, se implementaron cambios en la forma en que se mostraban estos resultados, haciéndolos más organizados, fáciles de navegar y con información relevante a primera vista.
- Optimización de la Experiencia del Usuario: A partir de las retroalimentaciones, se entendió que una experiencia fluida y agradable es crucial. Por lo tanto, se hicieron ajustes en el diseño general para garantizar que las transiciones, la navegación y las interacciones fueran intuitivas y sin fricciones.
- Feedback Directo: Algunos usuarios proporcionaron comentarios específicos sobre características particulares, diseño de botones, disposición de elementos, entre otros. Estos comentarios detallados fueron esenciales para realizar pequeñas pero significativas modificaciones que incrementaron la usabilidad de la aplicación.
- Estos resultados no solo sirvieron para mejorar el diseño inicial, sino que también reafirmaron la importancia de mantener un canal abierto de comunicación con los usuarios y la necesidad de iterar basándose en sus experiencias y feedbacks reales.
Protptipos de baja fidelidad
Prototipos de alta fidelidad de diseños finales
Conclusión y pasos a seguir
Este proyecto resaltó la importancia de la retroalimentación en el diseño, demostrando lo valioso que es estar cerca del usuario y adaptar los diseños basados en sus comentarios y los de los colegas. Como siguiente paso, sería beneficioso continuar con las iteraciones y pruebas para refinamientos futuros basados en el uso real de la aplicación.
InfoFilm
Infofilm es una aplicación web dedicada a proporcionar información concisa sobre películas, incluyendo imagen, título, valoración y resumen. Diseñado principalmente para adultos entre 18 y 65 años que disfrutan del cine, la aplicación buscaba llenar el vacío dejado por las plataformas de streaming que no muestran valoraciones. El diseño estuvo centrado en ser minimalista y "mobile-first", priorizando la usabilidad y la claridad visual. A pesar de enfrentar desafíos como el coste de la API y la necesidad de presentar mucha información sin abrumar, se realizaron pruebas con usuarios que brindaron insights valiosos. Estas pruebas condujeron a ajustes en el diseño, como el cambio en las fuentes tipográficas y la ubicación de la puntuación de las películas para mejorar la experiencia general del usuario.
El rol del diseñador en el proyecto:
El diseñador tuvo la responsabilidad de crear la interfaz gráfica de la aplicación web. Su tarea incluyó diseñar visualmente cómo se presentaría la información de las películas, incluidos elementos como la imagen, el título, la valoración y el resumen. Además se testeo la interfaz con un grupo de personas y se recolectó sus opiniones a través de una encuesta de usabilidad para realizar las mejoras pertinentes.
El objetivo del proyecto
El proyecto buscó elaborar una aplicación web que proporcionara información concisa, breve y concreta sobre películas. La meta principal era ofrecer al usuario una navegación sencilla donde pudiera encontrar rápidamente una valoración y un resumen del argumento de la película, facilitando así su decisión sobre si verla en su plataforma de streaming preferida, ya que dichas plataformas no suelen mostrar puntuaciones de películas.
El público objetivo
El público al que se dirigía esta aplicación son adultos entre 18 y 65 años que usan internet regularmente. Estas personas disfrutan del cine como una de sus principales formas de entretenimiento y buscan información específica sobre películas. Si bien no se limita a una nacionalidad en particular, sí se enfoca en aquellos que buscan información concreta sobre películas.
Los principales desafíos y limitaciones
Diseño Amigable e Intuitivo:
- La necesidad de diseñar una interfaz que fuera tanto amigable como intuitiva planteó un desafío. Dado que la aplicación tenía que mostrar información relevante sobre películas, como la imagen, el título, la valoración y el resumen, era esencial que esta información se presentara de manera clara y fácil de entender.
- Implicaciones: Un diseño complicado o poco claro podría resultar en una experiencia de usuario deficiente, haciendo que los usuarios abandonaran la aplicación o que no pudieran encontrar la información que buscaban de manera eficiente.
Coste de la API Utilizada:
- Aunque la API que proporcionaba la información de las películas era gratuita para pruebas, había costos asociados cuando se trataba de un tráfico elevado. Esto planteó un desafío financiero para el proyecto, especialmente si la aplicación ganaba popularidad rápidamente.
- Implicaciones: Sin una estructura de costos bien planificada, el proyecto podría enfrentar problemas financieros en el futuro, especialmente si el tráfico superaba las expectativas. Esto podría resultar en la necesidad de buscar fuentes de financiamiento adicionales, ajustar la estructura de precios o buscar alternativas a la API utilizada.
Detalles del estudio de investigación
Se llevó a cabo una encuesta como herramienta de investigación. Esta encuesta combinó preguntas cerradas y abiertas y fue aplicada a 20 personas que probaron los prototipos de la aplicación. A través de sus respuestas, se recopiló información valiosa que sirvió para refinar el diseño y la experiencia del usuario.
Conceptos de Diseño Iniciales
- Diseño Minimalista
- Ubicación Estratégica de Elementos
- Enfoque Centrado en el Usuario
- Diseño "Mobile-First"
- Uso Eficiente del Espacio y Márgenes
- Importancia del Espacio Blanco
Bocetos
Resultados de las Pruebas de Usuario
Las pruebas con usuarios revelaron la necesidad de emplear fuentes tipográficas más claras y legibles, y de aumentar el tamaño de letra para mejorar la legibilidad. También se decidió mostrar la puntuación de la película directamente en la grilla de la página principal en lugar de dentro de cada card, para mejorar la experiencia de usuario al acceder a la información más rápidamente
Prototipos de alta fidelidad de diseños finales
Conclusión
El proyecto se orientó hacia la creación de una aplicación web de información sobre películas con un enfoque minimalista y centrado en el usuario. A través de un diseño "mobile-first" y la utilización estratégica del espacio, se logró una interfaz intuitiva y amigable para los usuarios. A pesar de los desafíos enfrentados, como el coste de la API y la necesidad de equilibrar la cantidad de información presentada, las pruebas de usuario y las retroalimentaciones fueron cruciales para refinar y mejorar la experiencia del usuario.
Pasos a seguir
Los pasos a seguir se centran en la personalización de la aplicación para que cada usuario pueda iniciar sesión y pueda modificar sus preferencias y se actualice su historial.
- Análisis de Necesidades: Realizar encuestas o entrevistas para entender qué características o personalizaciones valoran más los usuarios en la aplicación.
- Perfil de Usuario: Crear un sistema que permita a los usuarios crear y editar un perfil personal. Esto puede incluir preferencias de género de películas, actores favoritos, entre otros.
- Historial de Búsquedas: Implementar un sistema que registre las búsquedas y visualizaciones del usuario, para ofrecer recomendaciones basadas en sus historiales.
- Sistema de Recomendaciones: Desarrollar un algoritmo que, basado en las preferencias y el historial del usuario, sugiera películas que podrían ser de su interés.
- Interfaz Personalizable: Permitir que los usuarios ajusten el diseño o tema de la aplicación, como colores o disposición de elementos, según sus preferencias.
- Notificaciones Personalizadas: Enviar notificaciones o alertas sobre nuevos lanzamientos o noticias de películas que coincidan con las preferencias del usuario.
- Pruebas y Retroalimentación: Una vez implementadas las personalizaciones, es vital volver a testear con usuarios y recoger sus opiniones para hacer ajustes necesarios y asegurar que las nuevas características mejoran la experiencia general.
Visita la versión beta de Infofilm
Clic en la imagen
Todavía Sirve
El proyecto se centró en el desarrollo de una aplicación multiplataforma destinada a conectar a personas que desean ofrecer productos que ya no utilizan con aquellos que los necesitan, todo ello sin costo alguno, promoviendo así una cultura de reuso y responsabilidad ambiental. A pesar de enfrentar desafíos de financiamiento y la necesidad de una robusta infraestructura tecnológica, se diseñó una interfaz intuitiva y amigable para el usuario, basada en investigaciones y pruebas de usuario, que resaltó la importancia de una experiencia de usuario fluida y de un diseño centrado en el usuario.
El rol del diseñador en el proyecto:
En el desarrollo de la aplicación, el diseñador asumió una posición integral y multidisciplinaria. Se encargó desde el análisis inicial de requerimientos hasta la creación de prototipos interactivos de alta fidelidad. Con sesiones de brainstorming y diseño en papel, se aseguró de trazar un flujo de usuario lógico y una arquitectura de información clara, lo que resultó en una interfaz final funcional y estéticamente agradable.
El objetivo del proyecto
El principal propósito de esta iniciativa era concebir una aplicación multiplataforma que permitiera a las personas ofrecer productos que ya no utilizan, con el fin de que otras personas con verdadera necesidad puedan adquirirlos sin costo. Este modelo no solo brinda soluciones individuales, sino que también responde a una mayor conciencia ambiental y al valor del reuso.
El público objetivo
Estamos dirigiéndonos a individuos adultos con un fuerte sentido de responsabilidad medioambiental. Aquellos que ven el valor en reutilizar artículos y son conscientes de las implicaciones ecológicas del desperdicio. Además, este público está interesado en dar y recibir objetos, estableciendo un círculo virtuoso de sostenibilidad.
Los principales desafíos y limitaciones
- Naturaleza del Proyecto: No hay antecedentes ni competidores claramente definidos.
- Dilemas Financieros: La orientación sin ánimo de lucro del proyecto presentó desafíos de financiamiento.
- Infraestructura Tecnológica: Se requiere una infraestructura tecnológica sólida y confiable.
- Enfoque en UI/UX: Es complicado mantener un enfoque centrado en el diseño de la interfaz y la experiencia del usuario en un diseño que puede ser el de un Marketplace pero que difiere notablemente en su objetivo.
- El proyecto se limita al diseño y no da pasos a producción todavía, lo que reduce la retroalimentación de parte del usuario.
Detalles del estudio de investigación
- Feedback de Navegación: Durante las pruebas, los usuarios experimentaron una navegación fluida, identificando y procediendo al "pago" o adquisición de productos con facilidad.
- Recepción Positiva: La aplicación fue percibida como altamente útil y funcional por los usuarios.
- Sugerencias de Mejora: Se recibieron recomendaciones para incluir una sección de "recomendados". Además, se sugirió mejorar la distribución visual, proporcionando más espacio entre los elementos para evitar una sensación de congestión.
- Pasos Futuros: Basándose en el feedback, el enfoque será probar iteraciones de los prototipos y refinando el diseño de acuerdo a los resultados obtenidos.
Creación de Personas
Conceptos de Diseño Iniciales
- Diseño Limpio: Enfocarse en una interfaz clara y despejada.
- Simplicidad: Priorizar un diseño simplificado.
- Información del Producto: Proveer detalles concisos pero completos de cada artículo.
- Prioridad Móvil: Adoptar un enfoque "mobile first" para el diseño responsivo.
- Contrastes: Asegurar un adecuado contraste entre imágenes y textos.
- Botones Intuitivos: Incluir botones de tamaño grande y colores llamativos para una fácil interacción.
Bocetos
Resultados de las Pruebas de Usuario
Prueba 1
Durante la fase exploratoria de mi proyecto, conduje un grupo focal para evaluar un prototipo inicial de una aplicación web diseñada para facilitar el intercambio de bienes reutilizables. Inicialmente, asumí que los usuarios encontrarían la plataforma fácil e intuitiva para navegar y utilizar debido a su diseño aparentemente sencillo y la necesidad identificada en el mercado. Permití una interacción libre entre los participantes durante la prueba, esperando observar una experiencia de usuario fluida y positiva. Sin embargo, para mi sorpresa, los participantes enfrentaron desafíos significativos al tratar de localizar información, navegar por las rutas de la aplicación y entender las funciones de los diversos elementos en la interfaz. Estas dificultades inesperadas me hicieron replantear mis suposiciones iniciales sobre la experiencia del usuario y subrayaron la necesidad de realizar ajustes y mejoras en el diseño y la usabilidad para asegurar una experiencia de usuario más intuitiva y amigable en futuras versiones del producto.
Prueba 2
Las pruebas con los prototipos esta vez arrojaron resultados alentadores. Los usuarios pudieron navegar con fluidez, encontrando y adquiriendo productos con facilidad. Sin embargo, también sugirieron mejoras como la inclusión de una sección de "recomendados" y la distribución más aireada de los elementos en la interfaz.
Prototipos de alta fidelidad de diseños finales
Quién soy
Soy John Mauricio Herrera Díaz, un prolífico músico, educador y desarrollador web con un abanico de habilidades únicas y diversos intereses. Mi sólida formación musical, culminada con una maestría en educación de la Universidad de los Andes, me ha permitido dedicar más de una década y media a la enseñanza musical, fomentando el amor por el arte en innumerables estudiantes del Distrito de Bogotá. Como docente, soy conocido por mi amabilidad, profesionalismo y habilidad para fomentar un ambiente laboral positivo.
En paralelo a mi carrera en la educación, he desarrollado una pasión y habilidad para la programación web, con un enfoque en el diseño de experiencia de usuario. Mis habilidades técnicas abarcan HTML, CSS, Bootstrap, Tailwind, React, Angular y la gestión de proyectos a través de Git, GitLab y GitHub.
Contacto
Email: johnmaohd@gmail.com
linkedin: https://www.linkedin.com/in/john-mauricio-h-502537256/
Si llegaste hasta aquí, muchas gracias, eres un
HEROE¡
