Está en la página 1de 95

Aplicación para visualizar

el menú de ‘Biergarten’
una cervecería al aire libre

Maia Jazmín Bazoalto

1
Descripción del proyecto

El producto:
Biergarten es una cervecería al aire libre de la Patagonia
creada de manera hipotética para este proyecto. Esta
cervecería ofrece diferentes productos además de
cerveza artesanal de origen y producción propia.
Biergarten se dirige a personas que quieran disfrutar
del aire fresco en su jardín nativo, cerveza fría y comida,
apuntando a un público amplio desde jóvenes a
diferentes trabajadores.

Duración del proyecto:


Julio de 2022 a Noviembre de 2022
Descripción del proyecto

El problema: La meta:
Los menús digitales suelen ser desordenados, Poder desarrollar una app de un menú
poco intuitivos, no contienen información de intuitivo, fácil de usar, ordenado, con
los productos (ingredientes y cocción) y no información incluida de los productos y que
muestran los productos que no están muestre la disponibilidad de los productos en
disponibles en el momento. tiempo real y se pueda ordenar desde la
misma app.
Descripción del proyecto

Mi Rol: Responsabilidades:
Diseñadora UX diseñando una aplicación para Realización de entrevistas, cableado en papel y
Biergarten desde la concepción hasta la digital, creación de prototipos de baja y alta
entrega de sus productos. fidelidad, realización de estudios de usabilidad,
contabilidad de la accesibilidad e iteración de
diseños.
● Investigación de usuarios
Comprender ● Personas

el usuario ● Declaraciones de problemas


● Mapas de viaje del usuario
Investigación de usuarios: resumen

Tras realizar diferentes entrevistas y observaciones a diferentes usuarios, se realizaron 4 diferentes


perfiles que engloban diversas edades, actividades y frustraciones que suelen presentar los
clientes de cervecerías. Se presentaron con mayor frecuencias problemas con: la legibilidad, la
estructura de los menús, la conectividad a internet, la disponibilidad de los productos, la falta de
información de los productos y el servicio de atención de mesas.
Investigación de usuarios: resumen y puntos debiles

1 2 3 4

Stock Diseño Falta de información El pago

Los usuarios suelen Muchos usuarios Muchas veces los Los usuarios se
tener frustraciones al no encontraron productos de los menús mostraron frustrados
saber de antemano qué inconvenientes ante la no traen información, lo ante las situaciones de
productos no están organización de menús y cuál frustra a los pago al ir en grupos por
disponibles en el su legibilidad. usuarios al no saber qué cuestiones de
momento de pedir. contiene lo que van a organización y división
consumir. de gastos.
Persona: Ricardo

Planteamiento del problema:


Ricardo es un asegurador que trabaja
mucho y necesita relajarse después de
trabajar, por eso acude a las
cervecerías, pero, le gusta realizar su
pedido sin contratiempos e
inconvenientes con el stock debido a
que no le agrada elegir una opción y
que no se encuentre disponible.
Persona: Alicia

Planteamiento del problema:


Alicia es una joven universitaria
que necesita visualizar
el menú de la cervecería sin que
sea necesaria la conexión a internet
porque a veces no tiene datos
móviles. Además le resulta difícil
acordar con sus acompañantes la
forma de pago y a veces resulta un
caos.
Persona: Mariela

Planteamiento del problema:


Mariela es una emprendedora que
necesita identificar en el menú
productos aptos para su consumo
debido a que ella no puede
consumir gluten.
Persona: Pablo

Planteamiento del problema:


Pablo es un jubilado que necesita
una experiencia en la aplicación
sencilla para ver el menú de la
cervecería y hacer su pedido
debido a que no tiene
conocimientos tecnológicos.
Mapa de usuario

Mapear el viaje del usuario de


Ricardo reveló lo útil que es
sería para usuarios para tener
acceso a una aplicación
específica para Biergarten.
● Esquemas en papel
Comenzando ● Esquemas digitales

el diseño ● Prototipo de baja fidelidad


● Estudios de usabilidad
Esquemas en papel

En esta etapa del proceso


desarrollé posibles diseños
para el menú y las demás
secciones de la app.
Finalmente, para el menú
opte por unir varios
diseños en uno,
desarrollando una versión
simple y limpia.
Esquema digital

En esta etapa del proceso,


pude establecer de mejor
Categorías bien
divididas y organizadas
forma el menú para que los para que el usuario
pueda encontrar lo que
usuarios mantengan una busca de manera
efectiva y sencilla.
experiencia intuitiva y de
un fácil uso.

Item de
asistencia al
usuario para
que aprenda a
usar la app.
Esquema digital Item para
entrar a la
sección del
pedido del
usuario

Esta sección pertenece a


una de las categorías del
Poder visualizar los
productos disponibles y
menú, dónde se pueden los que no lo están,
ayudan al usuario a
ver los productos pedir de manera
satisfactoria sin
disponibles y agregarlos al problemas o demoras y
tomar una decisión
pedido del usuario. basada en el stock. Item para
agregar el
producto al
pedido
Esquema digital

Esta sección corresponde al


proceso posterior a la
En esta instancia el
usuario podrá
confirmación del pedido. seleccionar si quiere su
Acá el usuario
podrá escoger
pedido para retirar, por
Está pensada para que el delivery o para pedir a
de qué manera
quiere abonar el
su mesa. pedido (efectivo,
usuario pida su orden en
débito o crédito).
cualquier lugar e inclusive La ventana de
abajo se
su mesa de la cervecería. ampliará en
función de lo
que seleccione
el usuario.
Low-fidelity prototype

Link a Figma
Los usuarios ingresarán y a través del
menú pueden seleccionar una
categoría, para luego ver las opciones y
agregar items al pedido. Una vez listo el
pedido proceden a llenar los datos
necesarios, se confirma su pedido y
pueden ver el seguimiento.
Usability study: findings
Write a short introduction to the usability studies you conducted and your findings.

Round 1 findings Round 2 findings

1 Los usuarios necesitan que la función de 1 Los usuarios necesitan poder agregar
pedido grupal sea más fácil e intuitiva. items desde “Mis favoritos”

2 Los usuarios necesitan un indicio más


2 Los usuarios necesitan un indicio de que
notorio de que agregó cosas a su pedido y
agregó cosas a su pedido y dónde.
dónde.

3 Los usuarios celíacos/veganos necesitan


3 Los usuarios necesitan encontrarse con
encontrar los productos aptos para su
una página de inicio.
consumo de manera más rápida y fácil.
Refinando ● Mockups
● Prototipo de alta fidelidad
El diseño ● Accesibilidad
Antes del estudio Después del estudio
Mockups de usabilidad de usabilidad

En estas imágenes podemos visualizar


cómo a partir del estudio de usabilidad
del prototipo de baja fidelidad se agregó
una interacción que indica que el
usuario agregó un producto a su pedido,
mejorando el flujo.
Mockups Antes del estudio
de usabilidad
Después del estudio
de usabilidad

En la primer imagen se puede


ver la sección del menú del
prototipo de baja fidelidad, ya
en la segunda imagen se
puede ver como cambia al ser
un prototipo de alta fidelidad y
luego del estudio de usabilidad
se sumaron categorías con el
objetivo de que sea inclusivo
para las personas que
consumen determinados
productos específicos.
Mockups Antes del estudio
de usabilidad
Después del estudio
de usabilidad

En la primer imagen se puede


ver la sección de favoritos del
prototipo de baja fidelidad, ya
en la segunda imagen se
puede ver como cambia al ser
un prototipo de alta fidelidad y
luego del estudio de usabilidad
se sumó la opción de “agregar
item” para que los usuarios
puedan agregar productos a su
pedido directamente desde
esta sección.
Antes del estudio Después del estudio
Mockups de usabilidad de usabilidad

En estas imágenes podemos visualizar


cómo a partir del estudio de usabilidad
del prototipo de baja fidelidad se
modificó la sección de pedido grupal y
además, al agregar un item al pedido se
agregó un indicio que les muestra a los
usuarios que pueden visualizar su
pedido en la sección de grupos,
mejorando el entendimiento de la app y
el flujo de los usuarios.
Mockups
Prototipo de
Alta fidelidad
En esta imagen podemos visualizar el
prototipo de alta fidelidad de la app, las
Screenshot of
diferentes pantallas en las que puede prototype with
navegar el usuario para realizar un pedido connections or
prototype GIF
individual o grupal, para reservar, ver las
características de un producto, solicitar
ayuda, acceder a los ajustes de accesibilidad
y ajustes generales.
Consideraciones de accesibilidad

1 2 3

Se colocó una Se consideró escoger un Para las personas con


configuración para tono de verde que dificultades tecnológicas
realizar ajustes de contrasta tanto con el gris se agregó una sección de
accesibilidad y que la oscuro como con el ayuda para que estos
aplicación pueda ser blanco, haciendo de la puedan aprender a dar
utilizada para todo tipo de app más accesible. uso de la app y tener
usuarios: Filtros de cierta independencia.
daltonismo, ajustes a los
tamaños tipográficos,
teclado de navegación y
un lector de pantalla.
Puntos clave
Avanzando

● Próximos pasos
Puntos clave

Impacto: Lo que aprendí:


Este caso de estudio podría actualizar la Durante la realización de este proyecto aprendí
manera en la que ordenamos en bares y acerca de lo que realiza un diseñador UX y su
restaurantes. Sería una manera muy efectiva equipo. Pude desarrollar mi primer caso de
de mejorar la experiencia de usuario. estudio y entender los diferentes pasos a
“Me parece muy interesante este tipo de seguir para llegar a los objetivos de manera
aplicación, la verdad que serviría de mucho exitosa.
poder hacer pedidos desde la app y
estaríamos más actualizados” (Julián, 24 años)
Próximos pasos

1 2 3

Realizar un tercer estudio Realizar más Presentarlo para recibir


de usabilidad para validar investigaciones de un feedback que me
si los puntos débiles usuarios para determinar ayude a mejorar cómo
experimentados por los nuevas áreas de profesional.
usuarios se han abordado necesidad.
de manera efectiva.
¡Conectémonos!

Hola! Gracias por mirar este caso de estudio:)


Para mirar más sobre mí, puedes visitar mi página maiajazmin.netlify.app (es posible que tu
sistema lo detecte como una página riesgosa, pero no es peligrosa, solo aún no he solicitado mi
propia dirección de dominio) también podes chequear mi instagram @maiajazminbz (aún no he
subido mis proyectos). Te invito a contactarte conmigo! Estoy feliz por ser parte de la comunidad de
diseño y me alegraría poder ser parte de tus contactos!
Sitio web “Glow” para ver
tutoriales de maquillaje

Maia Jazmín Bazoalto

2
Descripción del proyecto

El producto:
Glow es un sitio web dónde puedes visualizar tutoriales
de maquillaje. Glow apunta a todas las personas que
quieran aprender sobre el mundo del maquillaje, ya
sean expertos o principiantes.

Duración del proyecto:


Noviembre de 2022 a Diciembre de 2022
Descripción del proyecto

El problema: La meta:
Los aficionados y profesionales requieren Diseñar un sitio web para Glow que permita a
conocer el paso a paso de como realizar los usuarios visualizar tutoriales de maquillaje
maquillajes para determinadas ocasiones. El de forma fácil e intuitiva.
mundo del maquillaje cambia constantemente y
siempre hay nuevas tendencias que aprender.
Descripción del proyecto

Mi Rol: Responsabilidades:
Diseñadora UX Realización de entrevistas, cableado en papel y
digital, creación de prototipos de baja y alta
fidelidad, realización de estudios de usabilidad,
contabilidad de la accesibilidad e iteración de
diseños.
● Investigación de usuarios
Comprender ● Personas

el usuario ● Declaraciones de problemas


● Mapas de viaje del usuario
Investigación de usuarios: resumen

Tras realizar diferentes entrevistas y observaciones a diferentes usuarios, se realizaron 4 diferentes


perfiles que engloban diversas edades, actividades y frustraciones. Se presentaron con mayor
frecuencias problemas con: la legibilidad, la implementación de una explicación paso a paso,
versiones de los tutoriales en videos cortos para ver en un lapso de tiempo corto, la visualización
de los productos, la falta de información de los profesionales y el necesitar aprendizaje desde cero.
Investigación de usuarios: resumen y puntos debiles

1 2 3 4

Productos Aprendizaje Falta de información Tiempo

Los usuarios suelen Muchos usuarios sin Si el usuario desconoce Los usuarios se
tener frustraciones al no conocimiento previo al profesional del tutorial mostraron frustrados
saber de antemano qué encontraron se produce cierta ante ciertos momentos
productos se utilizan en inconvenientes al seguir desconfianza. dónde no poseen mucho
los videos. videos tutoriales. tiempo para mirar
videos extensos.
Persona: Cristian

Planteamiento del problema:


Cristian es un maquillador que ama lo
que hace. A la hora de aprender
nuevas cosas del mundo del maquillaje
necesita asegurarse de que aprende de
personas altamente capacitadas.
Persona: Uma

Planteamiento del problema:


Uma es una Influencer que ama crear
contenido y siempre busca actualizarse
con las nuevas tendencias por lo que
guardar contenido de referencia es
algo que necesita realizar a menudo.
Persona: Brisa

Planteamiento del problema:


Brisa es una adolecente que quiere
aprender a maquillarse, su problema
es que no posee mucho dinero a
disposición y por lo tanto se enfoca en
buscar tutoriales que usen productos
básicos y low cost. Además requiere
aprender paso a paso a como realizar
cada procedimiento.
Persona: Angela

Planteamiento del problema:


Angela es una moza de salón que
trabaja mucho y no tiene tiempo, por
lo tanto quiere aprender a maquillarse
en poco tiempo para poder lucir
siempre maquillada. No sabe nada
sobre productos y se frustra al no
poder seguir los videos tutoriales.
Mapa de usuario

Mapear el viaje del usuario de


Angela reveló lo útil que es
sería para usuarios para tener
acceso a un sitio web de
tutoriales de maquillaje.
● Esquemas en papel
Comenzando ● Esquemas digitales

el diseño ● Prototipo de baja fidelidad


● Estudios de usabilidad
Sitemap
De manera estratégica decidí generar una arquitectura de la información que mejoraría la
navegación general del sitio web. La estructura que elegí fue diseñada para hacer las cosas simples
y fáciles para los usuarios.
Esquemas en papel

En esta etapa del proceso


desarrollé posibles diseños
para el sitio web, enfocándome
en la página de inicio y sus
elementos. Finalmente, para el
sitio opte por unir varios
diseños en uno, desarrollando
una versión simple y genere su
adaptación responsive.
Buscador

Esquema digital
Categorías divididas y
organizadas para que el
usuario pueda encontrar
En esta etapa del proceso, lo que busca de manera
efectiva y sencilla entre
puede establecer de mejor videos, listas de
reproducción y shorts.
forma el sitio web para que
los usuarios mantengan
una experiencia intuitiva y
de un fácil uso.

Barra de
Filtros de navegación
búsqueda lateral.
Esquema digital Barra con
llamadas a la
acción en relación
al tutorial.

Esta sección es para reproducir


el video seleccionado, en el
Lista con los productos
utilizados en los
mismo se pueden ver los tutoriales.
productos utilizados y realizar
diferentes llamados a la acción
además de comentar y Videos
relacionados al
seleccionar vídeos similares. tutorial.
Esquema digital
División del
contenido de los
profesionales
Esta sección corresponde al
perfil del creador de
contenido dónde el usuario
puede obtener información
del mismo y acceder
directamente a su contenido.
Visualización de las
certificaciones de los
profesionales que
ofrecen los tutoriales.
Esquema digital
Visualización
del short.

Esta sección es para reproducir


el short seleccionado o acceder Información
sobre el short.
a mirar shorts generales. En
esta sección se pueden ver los
productos utilizados y realizar
diferentes llamados a la acción Lista de
productos
además de comentar y utilizados.

seleccionar vídeos similares.


Low-fidelity prototype

Link a Figma
Los usuarios ingresarán y a través del
inicio pueden seleccionar un video, una
lista de reproducción o un short para
visualizar o bien buscar un video desde
el buscador o filtrar opciones.
Estudio de usabilidad: hallazgos
Realicé 2 rondas de estudios de usabilidad y estos fueron mis hallazgos.

Hallazgos de la ronda 1 Hallazgos de la ronda 2

1 Los usuarios necesitan que la función de 1 Los usuarios necesitan visualizar en qué
búsqueda sea fácil de utilizar. sección de la página se encuentran de
forma más evidente.
2 Los usuarios necesitan filtrar diferentes 2 Los usuarios requieren visualizar la
opciones en el inicio de una forma más certificación de los profesionales para
sencilla. asegurarse de su capacitación.
Refinando ● Mockups
● Prototipo de alta fidelidad
El diseño ● Accesibilidad
Mockups
En estas imágenes podemos visualizar cómo a partir del estudio de usabilidad del prototipo de baja fidelidad se
mejoró la barra de navegación lateral para que tenga una mejor visibilidad y se ajustó el filtro de busqueda.

Antes del estudio Después del estudio


de usabilidad de usabilidad
Mockups
En estas imágenes podemos visualizar cómo se mejoró la posición de los botones para tener una mejor
disposición y además se mejoró el filtro de búsqueda.

Antes del estudio Después del estudio


de usabilidad de usabilidad
Mockups
En estas imágenes podemos visualizar cómo a partir del estudio de usabilidad del prototipo de baja fidelidad se
agregó un botón para poder ver la certificación de los creadores de contenido.

Antes del estudio Después del estudio


de usabilidad de usabilidad
Mockups
Prototipo de Alta fidelidad
Este es el prototipo de alta fidelidad del sitio web, puedes verlo en el siguiente link: Prototipo de alta fidelidad. En esta
imagen podes ver las diferentes pantallas en las que puede navegar el usuario para realizar una búsqueda,
seleccionar un video, una lista de reproducción o short, pueden ver sus videos guardados, a los que le dieron me
gusta, su historial, sus suscripciones y el perfil de los cc.
Consideraciones de accesibilidad

1 2 3

Se colocó una Se consideró escoger un Se escogió una tipografía


configuración para tono de violeta que san serif para lograr una
realizar ajustes de contrasta tanto con el gris mejor visualización y
accesibilidad y que la oscuro como con el lectura.
aplicación pueda ser blanco, haciendo de la
utilizada para todo tipo de app más accesible.
usuarios: Filtros de
daltonismo, ajustes a los
tamaños tipográficos,
teclado de navegación y
un lector de pantalla.
Puntos clave
Avanzando

● Próximos pasos
Puntos clave

Impacto: Lo que aprendí:


Este caso de estudio podría mejorar la Durante la realización de este proyecto aprendí
experiencia de visualización de tutoriales de acerca de lo que realiza un diseñador UX y su
este tipo al ser un sitio específico. Sería una equipo. Pude desarrollar mi primer caso de
manera muy efectiva de mejorar la experiencia estudio y entender los diferentes pasos a
de usuario. seguir para llegar a los objetivos de manera
“La verdad es que siento que hace falta un sitio exitosa.
así para nuestra comunidad de maquilladores
y aprendices” (Mariana, 27 años)
Próximos pasos

1 2 3

Realizar un tercer estudio Realizar más Presentarlo para recibir


de usabilidad para validar investigaciones de un feedback que me
si los puntos débiles usuarios para determinar ayude a mejorar cómo
experimentados por los nuevas áreas de profesional.
usuarios se han abordado necesidad.
de manera efectiva.
Fin del caso de estudio 2

Hola! Gracias por mirar este caso de estudio:)


Para mirar más sobre mí, puedes visitar mi página maiajazmin.netlify.app (es posible que tu
sistema lo detecte como una página riesgosa, pero no es peligrosa, solo aún no he solicitado mi
propia dirección de dominio) y mis proyectos ya estarán disponibles pronto en mi página. También
podes chequear mi instagram @maiajazminbz (aún no he subido mis proyectos). Te invito a
contactarte conmigo! Estoy feliz por ser parte de la comunidad de diseño y me alegraría poder ser
parte de tus contactos!
Diseño de app “Learn Today”
y sitio web responsive

Maia Jazmín Bazoalto

3
Descripción del proyecto

El producto:
Learn Today es una herramienta multiplataforma de
ayuda para jóvenes adultos que buscan aprender
idiomas.

Duración del proyecto:


Diciembre de 2022 a Enero de 2023
Descripción del proyecto

El problema: La meta:
Hoy en día muchos jóvenes adultos requieren Diseñar una app y un sitio web responsive para
aprender nuevos idiomas, ya sea para viajar y Learn Today que permita a los usuarios a
realizar turismo o trabajar. realizar diferentes cursos de idiomas con
profesores de lenguaje y realizar examenes.
Descripción del proyecto

Mi Rol: Responsabilidades:
Diseñadora UX Realización de entrevistas, cableado en papel y
digital, creación de prototipos de baja y alta
fidelidad, realización de estudios de usabilidad,
contabilidad de la accesibilidad e iteración de
diseños.
● Investigación de usuarios
Comprender ● Personas

el usuario ● Declaraciones de problemas


● Mapas de viaje del usuario
Investigación de usuarios: resumen

Tras realizar diferentes entrevistas y observaciones a diferentes usuarios, se realizaron 4 diferentes


perfiles que engloban diversas edades, actividades y frustraciones. Se presentaron con mayor
frecuencias problemas con: el abandono de las app de este tipo, el poco entendimiento y mal
manejo de estas plataformas al ser poco intuitivas, la falta de visualización del progreso, la falta de
información de los profesionales, el poder cursar en tiempos libres y a su propio ritmo y el
necesitar aprender a partir de determinado nivel, ya sea principiante o niveles avanzados.
Investigación de usuarios: resumen y puntos debiles

1 2 3 4

Poco intuitivo Aprendizaje Falta de información Tiempo

Los usuarios suelen Muchos usuarios sin Si el usuario desconoce Los usuarios se
tener frustraciones al no conocimiento previo al profesional se mostraron frustrados, ya
saber de antemano encontraron produce cierta que necesitan cursar en
cómo navegar en este inconvenientes al seguir desconfianza. sus tiempos libres y a su
tipo de plataformas. material pesado. propio ritmo.
Persona: Gustavo

Planteamiento del problema:


Gustavo es un informático muy
trabajador que necesita aprender
inglés de manera remota ya que no
tiene mucho tiempo y quiere aplicar a
un puesto en el que le piden hablar
inglés.
Persona: Maria

Planteamiento del problema:


Maria es una estudiante que viaja por
el mundo, necesita aprender idiomas
de manera remota porque viaja
constantemente para poder turistear y
comunicarse de manera efectiva en
dónde quiera que esté.
Persona: Oriana

Planteamiento del problema:


Oriana es una estudiante de psicología
que necesita aprender Italiano de
manera remota porque no tiene
mucho tiempo y quiere aplicar a una
beca en Italia para realizar la maestría.
Persona: Angela

Planteamiento del problema:


Franco es un geólogo que viaja por
trabajo y está interesado aprender
idiomas pero como no puede asistir a
un curso presencial necesita aprender
de manera remota.
Mapa de usuario

Mapear el viaje del usuario de


Gustavo reveló lo útil que
sería para usuarios tener la
posibilidad de cursar idiomas de
manera remota y a su tiempo.
● Esquemas en papel
Comenzando ● Esquemas digitales

el diseño ● Prototipo de baja fidelidad


● Estudios de usabilidad
Maps de sitio
De manera estratégica decidí
generar una arquitectura de la
información que mejoraría la
navegación general del sitio web.
La estructura que elegí fue
diseñada para hacer las cosas
simples y fáciles para los
usuarios.
Buscador

Esquema digital

En esta etapa del proceso, Filtro de busqueda

puede establecer de mejor


forma la app para que los
usuarios mantengan una
experiencia intuitiva y de
un fácil uso.

Barra de
navegación
Esquema digital

Esta sección corresponde a la Barra de


navegación
página web responsive, en la
sección de resultados de
búsqueda. El diseño es
simple y conciso para ofrecer
una experiencia intuitiva.

Visualización del
resultado de busqueda
Low-fidelity prototype

Link a Figma
Los usuarios ingresarán y a través del
inicio pueden seleccionar un curso para
luego inscribirse y completar el proceso
de inscripción. Luego de eso pueden
empezar a cursar en la sección de “mis
cursos”. Además pueden realizar una
busqueda.
Estudio de usabilidad: hallazgos
Realicé 2 rondas de estudios de usabilidad y estos fueron mis hallazgos.

Hallazgos de la ronda 1 Hallazgos de la ronda 2

1 Los usuarios necesitan que la función de 1 Los usuarios necesitan visualizar y filtrar
búsqueda sea fácil de utilizar. en los resultados los diferentes niveles
del idioma.
2 Los usuarios necesitan filtrar diferentes 2 Los usuarios necesitan que los botones
opciones en la sección de búsqueda. destaquen más
Refinando ● Mockups
● Prototipo de alta fidelidad
El diseño ● Accesibilidad
Mockups
En estas imágenes podemos visualizar cómo a partir del estudio de usabilidad del prototipo de baja fidelidad se
mejoró la visibilidad de los botones, creando un contraste con los fondos del título.

Antes del estudio Después del estudio


de usabilidad de usabilidad
Mockups
En estas imágenes podemos visualizar cómo se mejoró la sección de búsqueda agregando filtros para crear una
experiencia de búsqueda más sencilla.

Antes del estudio Después del estudio


de usabilidad de usabilidad
Mockups: Desktop
Mockups: Mobil
Mockups: Mobil
Mockups: Tablet
Prototipo de Alta fidelidad
Este es el prototipo de alta fidelidad del sitio web, puedes verlo en el siguiente link: Prototipo de alta fidelidad. En esta
imagen podes ver las diferentes pantallas en las que puede navegar el usuario para realizar una búsqueda,
seleccionar un curso, realizar una búsqueda, proceder a un proceso de inscripción, realizar un curso y ver el contenido
del mismo.
Consideraciones de accesibilidad

1 2 3

Se consideró colocar Se consideró escoger un Se escogió una tipografía


ajustes de accesibilidad, tono de verde que san serif para lograr una
esta decisión la podemos contrasta bien con el mejor visualización y
observar en el mapa de color blanco. También se lectura.
sitio. Es indispensable utilizó un gris oscuro con
para que el usuario tenga fondo blanco para los
una buena experiencia. textos.
Puntos clave
Avanzando

● Próximos pasos
Puntos clave

Impacto: Lo que aprendí:


Este caso de estudio podría mejorar la experiencia Durante la realización de este proyecto aprendí
de tomar cursos de idioma a usuarios que no acerca de lo que realiza un diseñador UX y su
pueden acceder a estos de forma presencial. equipo. Pude desarrollar mi tercer caso de
“Es cierto que en nuestra etapa de vida no estudio y entender los diferentes pasos a
tenemos mucho tiempo y esta solución va a seguir para llegar a los objetivos de manera
favorecer a los jóvenes adultos ” (Claudia, 24 años) exitosa.
Próximos pasos

1 2 3

Realizar un tercer estudio Realizar más Presentarlo para recibir


de usabilidad para validar investigaciones de un feedback que me
si los puntos débiles usuarios para determinar ayude a mejorar cómo
experimentados por los nuevas áreas de profesional.
usuarios se han abordado necesidad.
de manera efectiva.
Este estudio se realizará
tanto para desktop como
para tablet y mobile.
¡Conectémonos!

Hola! Gracias por mirar este caso de estudio:)


Para mirar más sobre mí, puedes descargar mi CV https://acortar.link/ulNJLs También puedes
chequear mi instagram @andrew.vanderbilt (aún no he subido mis proyectos). Te invito a
contactarte conmigo! Estoy feliz por ser parte de la comunidad de diseño y me alegraría poder ser
parte de tus contactos!

También podría gustarte