Mi proceso de diseño para mis maquetas de la aplicación Pet Care tuvo 5 pasos:

1. Investigación de tendencias y competencia

2. Entrevistas a usuarios — Empatizar

3. Ideación

4. Estructura de alambre

5. Maquetas

Paso 1. Investigación

Primero eché un vistazo a algunas aplicaciones/aplicaciones de la competencia que eran temáticamente similares a lo que estaba tratando de crear.

Estos incluyeron:

dafnee

Floofers

WWF juntos

Notas sobre Daphnee:

• 5 Hat Racks, información ordenada bajo el perfil de una mascota en categorías
• Orientación breve y saltable
• Ilustraciones lindas y simples (actualmente una tendencia UX)
• Solo tiene la información más básica y 3 secciones (compensación de flexibilidad y usabilidad)
• Aplicación de estilo Habit Tracker, puede marcar tareas y establecer recordatorios para citas
• Puede almacenar registros médicos adjuntando archivos
• Utiliza sesgo de contorno para una apariencia amigable
• El recinto se utiliza para separar diferentes secciones de información sobre un fondo blanco

Notas sobre Floofers:

• Exhibición de galería de estilo Pinterest de diferentes mascotas
• Orientación breve y saltable
• Organiza fechas para vacunas y citas.
• Representación icónica para diferentes secciones.
• 5 percheros secciones separadas por categorías
• El principio Gestalt de similitud se utiliza para ayudar a los usuarios a comprender que las secciones de íconos tienen funciones similares

Notas sobre WWF Juntos:

• Aplicación puramente educativa
• Utiliza imágenes de pantalla completa detrás de texto blanco
• Incluye imágenes/gráficos para una mayor profundidad de procesamiento
• Utiliza capas bidimensionales para evitar abrumar a los usuarios al tener diferentes datos en diferentes pantallas.
• Utiliza el mapeo para ayudar a los usuarios a comprender en qué dirección se moverán al deslizar

Una lista de tendencias de UX para 2023:

1. Tamaño de letra grande y experiencia inmersiva

Usar toda la pantalla con un gráfico y un encabezado es una tendencia utilizada por Apple y otras grandes marcas para mostrar información de una manera visualmente impresionante. Puedo usar esta tendencia para resaltar secciones particulares de mi aplicación.

2. Diseño Accesible

El diseño que tiene opciones de accesibilidad que permiten que las personas con diferentes discapacidades aún puedan navegar por el diseño y lograr sus objetivos no solo es algo que se está volviendo cada vez más importante, sino necesario. Garantizar que mi diseño sea utilizable por personas con baja visión o daltónicos será parte integral del éxito de la usabilidad de mi diseño.

3. Narración de datos

Al igual que la aplicación WWF discutida anteriormente, muchas aplicaciones y sitios web utilizan Data Storytelling para hacer que aprender información sea una tarea más atractiva. Mediante el uso de imágenes, gráficos y animaciones, puedo crear un diseño que hará que los usuarios sientan que el proceso de aprendizaje es interactivo y agradable.

4. Minimalismo

El minimalismo es una tendencia en curso que ha sido popular desde hace un tiempo. Mantenerme alejado de Horror Vacui evitará que mi diseño se vea desordenado y difícil de navegar.

5. Estructura Geométrica

El uso de formas geométricas interesantes en lugar de solo rectángulos ayudará a que mi diseño se destaque como más creativo y animado, sin dejar de ser limpio y moderno. Puedo ver que esta tendencia se usa en mi diseño de Firefox Photon como algo que lo mantiene profesional, pero también divertido.

Paso 2. Entrevistas a usuarios y empatía

Para conocer a mi público objetivo realicé entrevistas y una encuesta. A partir de los datos que recopilé, creé algunas personas de usuario.

personas:

Paso 3. Ideación

Con mi público objetivo en mente, comencé a idear pantallas que se adaptaran a sus necesidades.

Bocetos de ideación:

Paso 4. Estructura de alambre

En total hice 3 conceptos diferentes de Wire framing. El concepto 1 se centró en la adopción de mascotas, el concepto 2 se centró en la estética del sistema de diseño de fotones y el concepto 3 se centró en la accesibilidad para personas con baja visión o daltonismo.

Concepto 1 (Diseño de contexto):

Concepto 2 (Sistema de diseño de fotones):

Concepto 3. Accesibilidad

Paso 5. Maquetas

¡Aquí están mis conceptos finales!

Justificación del concepto 1: simple y centrado en la imagen, el concepto 1 tenía que ver con la publicidad de las buenas características y la información importante de un animal en adopción. Usé Data Storytelling y capas 2D para crear un diseño interesante y comprensible.

Concepto 2 Justificación: este concepto se centró en tres funciones diferentes: encontrar servicios cercanos, realizar un seguimiento de los registros médicos y comparar productos para mascotas. La estética se inspiró en la guía de marca de Mozilla Firefox y, por lo tanto, utiliza colores brillantes y fuentes aprobadas por Mozilla.

Concepto 3 Justificación: El concepto 3 se centró en la accesibilidad para usuarios con baja visión o daltonismo. En lugar de usar una paleta de colores complicada, me enfoqué en usar el contraste para distinguir los elementos. Se puede acceder fácilmente a la configuración de accesibilidad desde la pantalla inicial y las secciones tienen varios elementos que contribuyen a su indicación de selección.