Fashiongram es un caso práctico que forma parte del certificado UX Inmersion de CareerFoundry. Fue realizado entre Agosto y Diciembre de 2022. Esta parte del programa se centraba en el diseño UX pero también me ocupé de la invertigación UX, el diseño UI y UX writer.

Herramientas

Planteamiento del Problema (Problem Statement)

Nuestros usuarios quieren acceder a consultas (online) con distintos profesionales de la moda porque quieren formas asequibles de encontrar asesoramiento experto estén donde estén.

Sabremos que es cierto cuando veamos un aumento semanal del 15% en el número de citas concertadas por los usuarios.

Proceso de Diseño

1

2

3

4

5

Discover

Define

Ideate

Design

Testing

1. Discover

Lo primero que hice para empezar este proyecto es investigar si ya existían productos en el mercado que intentaran resolver este problema. Para ello realicé un análisis competitivo con dos apps/webs.

• Fiverr lo está petando en el mundo freelance. Tienen tantos usuarios satisfechos como tutoriales en Youtube. Servicios rápidos y baratos con la opción de hacerlo en persona y con diferentes niveles de experiencia y categorías.

• Adictic no es tan conocida pero es una gran herramienta si eres profesional de la moda y necesitas visibilidad o contactos. Además como su interfaz es muy parecida a la de Instagram es muy fácil de usar.

Si quieres acceder al análisis competitivo completo (documento en inglés) haz clik aquí.

Tras analizar el mercado, es hora de conocer mejor a los usuarios potenciales. He realizado tres entrevistas a usuarios potenciales (2 mujeres y 1 hombre) y estas son algunas de las conclusiones.

Pinterest e Instagram son las fuentes de inspiración fashionista más consultadas

La mayoría de la gente cree que tiene demasiada ropa y no se la pone toda.

La mayoría de los usuarios piensan que su estilo es demasiado básico. Les gustaría tener un armario fácil de combinar y una moda sostenible y respetuosa con el medio ambiente.

La mayoría de los usuarios desconoce la existencia de estos profesionales.

La mayoría de los usuarios creen que estos servicios son demasiado caros y sólo para gente famosa.

Si quieres acceder a la investigación sobre usuarios completa- user research (documento en inglés) haz clik aquí.

Si quieres acceder a las entrevistas con los posibles usuarios (documento en inglés) haz clik aquí.

2. Define

Para ayudarme a empatizar con los futuros usuarios creé dos Personas y asi poder dar mas dirección y sentido a los diseños. Aquí te dejo una visión más detallada sobre ellos.

A continuación, creo algunos Journey Maps y User Flows para comprender mejor la experiencia del usuario y encontrar soluciones a sus limitaciones.

Journey Map completo aquí (documento en inglés)

User Flows completo aquí (documento en inglés)

3. Ideate

Siguiente paso: analizar cómo utilizarán la aplicación los usuarios. ¿Cómo? Realizando un Card Sorting para obtener una visión general de cómo los usuarios evalúan las páginas.

Este es el primer sitemap que diseñé y sobre el que realicé el CardSorting. Para diseñarlo utilicé Adobe XD

La matriz de normalización muestra la confirmación de que algunas agrupaciones de tarjetas tenían sentido para los participantes. Por ejemplo, Buscar experto, Categorías de expertos... Al tratarse de una clasificación abierta, los participantes no recibieron una estructura predefinida (categorías) y sólo se les dio una descripción limitada de las funcionalidades de la aplicación, lo que dio lugar a respuestas dispares. Por ejemplo, Configuración de divisas y Facturación con datos personales. Me doy cuenta de que tiene más sentido para el usuario tener una categoría separada con toda la información de facturación, método de pago y configuración de divisas. Además, he decidido incluir la categoría de Ayuda en la página de inicio para que los usuarios no registrados puedan acceder a esta información.

Y así es como queda el Sitemap desùes de ajustarlo gracias a los resultados del CardSorting. y si quieres acceder al Cardsorting completo haz click aquí (documento en inglés)

4. Design

Es hora de empezar mi parte favorita del proceso. Coger papel y bolígrafo y dejar volar la imaginación, crear algunos bocetos rápidos y dar vida a las primeras pantallas de Fashiongram.

Low-Fidelity Wireframes

Mid-Fidelity Wireframes

High-Fidelity Wireframes

Wireframes hechos con Adobe XD

Wireframes hechos con Figma

5. Testing

Al diseñar la interfaz de usuario, me basé en modelos mentales muy extendidos y en las leyes fundamentales de la experiencia del usuario, como el efecto estética-usabilidad.

A continuación, tomé mis prototipos de alta fidelidad y los puse a prueba para ver cómo funcionaban mis diseños en acción con la gente. Realicé 6 pruebas remotas moderadas centradas en escenarios realistas dentro de la aplicación.

Crear una cuenta

Buscar un experto

Reservar una cita

Usability Test completo (documento en inglés)

Colaboración con compañeros (documento en inglés)

Design System

Moodboard hecho con Canva

To be Continued...

A lo largo de la creación de Fashiongram, me he centrado en el usuario realizando entrevistas y pruebas de usabilidad. Esto me ha permitido crear un diseño de la aplicación centrado en el usuario.

Trabajar en este proyecto ha sido uno de los retos más interesantes que he hecho, no sólo a nivel profesional sino también a nivel personal. Me gustaría que Fashiongram se convirtiera en una app real y ayudara a los usuarios que necesitan expertos en el sector de la moda.

El siguiente paso sería crear una opción para que los expertos tengan su espacio dentro de la app, así como para hacer networking y desarrollarse como profesionales.