Proyecto 3 Curso UX Desing - Crear una app y una web responsiva de con fines sociales
El proyecto social propuesto parte de una premisa inicial (Sharpen) que solicitaba al diseñador el crear un proyecto social que buscara un "diseño que ayudara a los adultos a saber cómo dar un masaje cardíaco". Una vez hechas las primeras investigaciones, el diseñador UX del proyecto (Marco Antonio Jiménez) estima que la propuesta es poco ambiciosa, y que se puede desarrollar algo más grande.
Premisa inicial (Sharpen)
Investigación preliminar de la propuesta
Las investigaciones iniciales de campo, y la hecha con usuarios arrojan dos conclusiones (imputs): por un lado, la necesidad de diseñar una app de primeros auxilios para teléfonos smartphones; por otro, la importancia de desarrollar una web responsiva sobre actualidad médica.
​
Los que hace determinar este posicionamiento al desarrollador UX es el hecho de que se estima que existe una clase de usuarios (normalmente más jóvenes, aunque la app está destinada a públicos de todas las edades) que desean tener en su teléfono una aplicación móvil de primeros auxilios y de llamadas de emergencia.
​
En lo que respecta a la web (responsiva) se detecta que existe un usuario de (mediana edad sobre todo) que desea tener un solo espacio de actualidad médica con todas las novedades relacionadas con la salud, procedimientos médicos, actualidad, investigaciones, actualidad legal. (Consultar recursos de Persona 1 y 2, historias de usuario, viajes de usuario, y, definitivamente, el planteamiento del problema para completar esta información).
Tras la investigación preliminar se estima que uno de los campos de acción para la propuesta de diseño se relaciona con una app. La petición de la premisa (ayudar a los adultos a saber hacer masajes cardíacos) pasa de ser el motivo principal del trabajo a una de las múltiples opciones que tiene el usuario de una aplicación de primeros auxilios.
First Aids app
Para investigar la mejor funcionalidad y diseño de la app, el investigador recurre a la realización de una auditoría competitiva (consultar recurso en la columna de recursos la acción auditoría competitiva) de la que se deducen una serie de acciones.
​
Una vez recogidas las debilidades y fortalezas de la auditoría competitiva se pasa a la fase de diseño de la citada app de primeros auxilios, en la que se hacen bocetos, maquetas y prototipos que se van refinando en sucesivos estudios de usabilidad.
​
En lo que se refiere propiamente al prototipo, se estima que lo ideal es plantear un diseño muy accesible (con texto e iconos grandes, botones de colores asociados a cada categoría, y un lector de texto en pantalla) ya que la app va a ser usada en momentos de mucha tensión, o por personas discapacitadas o mayores. Además de la accesibilidad se establecen una serie de casos prácticos relacionados con la mayor cantidad de situaciones posibles de emergencias de salud. La última funcionalidad estimada es la de la inclusión de un llamador rápido que establece la la localidad y estado del individuo y permite llamar a policía, bomberos y sanitarios locales con gran rapidez.
​
En los estudios de usabilidad realizados se detectan fallas relacionadas con el problemas de la geolocalización (Prioridad 0) (no resuelto en un primer momento); la selección de colores (P1), la inclusión del idioma dual (inglés y español) (P1), y el subtitulado de los vídeos de los casos prácticos.
​
​
​
​
​
​
​
​
​
​
Recursos del proyecto 3
Web responsiva - American medical
Para dar respuesta a la necesidad de los usuarios objetivos del proyecto de acceder a recursos de actualidad médica (noticias, investigación, actualidad de productos sanitarios) se ha estimado la creación de un Website responsivo para la ONG (ficticia) "American medical". La web parte de un diseño para dispositivos smarthphones Android, y crece de manera progresiva a formato tablet (Ipad), con idea de, en un futuro cercano, terminar el crecimiento de la misma en equipos de sobremesa.
​
Teniendo en cuenta los estudios realizados se presenta una propuesta de estructura jerárquica para el sitio (consultar recurso 'estructura web responsiva' del apartado de recursos para estimar, de manera visual, el diseño propuesto).
Una vez estructurado el website en base a las necesidades observadas se crean bocetos con la técnica de creatividad 'Crazy eights', que fomenta 8 soluciones posibles para la estructuración visual del contenido estimado para el site. A continuación se presenta el boceto resultante de la técnica de creatividad anteriormente citada.
​
​
​
En las diferentes versiones bocetadas se establece como necesidad el incluir un enlace a la app nativa (First aids) que complementa en funcionalidad a la web.
​
Tras el bocetado, se crea una maqueta de baja fidelidad de la web (en formatos móvil android, y en Ipad web browser, con la idea de seguir, a partir de estas dos propuestas, el desarrollo de futuras versiones hasta la de desktop, la última meta). En la zona de recursos puede encontrar enlaces a las maquetas y a los prototipos.
​
Tras el prototipado de baja fidelidad se pasa al refinamiento de las maquetas y prototipos. No se realiza estudio de usabilidad en esta fase, porque en la de maquetado la funcionalidad se estima óptima.
​
Se usa para el maquetado el color corporativo de la asociación (el azul 151DE7 y los blancos y negros puros para la tipografía y el fondo de pantalla). En lo referente a iconos, se usan de tipo redondeados (de color en la parte superior) y negros para el pie de página.
​
​
​
​
​
​
​
​
​
​
En la foto: bocetos Crazy 8´s
En la foto: maqueta de alta fidelidad
Conclusiones y experiencia personal
Ante todo, agradecer la confianza por el encargo de este proyecto. El trabajo completo que aquí se presenta ha constituido como tal en una experiencia más completa que la experimentada en los dos proyectos anteriores. Este trabajo se constituye como un auténtico tour de force creativo, ya que en un espacio de tiempo limitado se ha conseguido realizar desde cero un proyecto multiplataforma y complementario en sus diferentes versiones.
En lo referente al aprendizaje, me ha servido para trabajar duro en poco tiempo, para fijar los contenidos aprendidos durante el curso, y para aumentar las "horas de vuelo" con los softwares de Diseño UX.
NOTA: En los recursos de la columna de al lado se añaden, en el último peldaño, un PDF y PowerPoint con la presentación del presente proyecto.
¡¡¡GRACIAS POR VUESTRA ATENCIÓN Y TIEMPO !!!