-
Definición del producto.
-
Proceso de diseño.
-
Como el producto resulve los problemas que tiene el usuario.
-
Historias de usuario (criterios de aceptación).
-
Diseños de baja fidelidad.
-
Diseño de alta fidelidad (link figma).
-
Pruebas unitarias. (pretest y test)
-
Definición del producto.
El proyecto de Studio Ghibli es una página web que permite a los usuarios explorar y obtener información sobre las películas y personajes de Studio Ghibli, un reconocido estudio de animación japonés. El objetivo principal del mismo es brindar a los fanáticos, entusiastas y personas que quieran conocer más del Studio Ghibli, una plataforma intuitiva y atractiva para descubrir y disfrutar de la historia y el encanto de las películas del estudio.
Por medio de esta página web se logra explorar una amplia biblioteca de películas, junto con información detallada como sinopsis, puntaje, productores, directores, año de lanzamiento y el póster oficial, con opción de organizar las peliculas de la A a la z y de la Z a la A, filtrar las peliculas segun el año de lanzamiento, los productores o directores y tener una búsqueda avanzada si se desea encontrar una película en particular. Además, se pueden conocer personajes icónicos del Studio Ghibli y sus características.
- Proceso de diseño.
El diseño del proyecto de Studio Ghibli se basó en un enfoque centrado en el usuario, teniendo en cuenta las necesidades y expectativas de los fans de Studio Ghibli. Se realizó un proceso de investigación para comprender las preferencias de los usuarios y lo que buscan en una página web relacionada con Studio Ghibli.
Luego, se llevó a cabo el diseño de la interfaz de usuario, creando prototipos de baja y alta fidelidad para garantizar una experiencia agradable para los usuarios. Estos prototipos fueron iterados y refinados en base al feedback recibido de los usuarios reales.
Una vez finalizado el diseño, se procedió a la implementación y desarrollo utilizando diferentes tecnologías. Se puso énfasis en la usabilidad, la accesibilidad y el diseño visual para crear una experiencia atractiva y fácil de usar.
En resumen, el proyecto de Studio Ghibli ha sido diseñado y desarrollado con el objetivo de brindar a los usuarios una experiencia enriquecedora al explorar las películas del Studio Ghibli y sumergirse en la belleza de sus personajes.
{:width="210"}
{:width="320"}
Usuario #3 Para el usuario 3 , hicimos una demostración Presencial, en donde se nos dio como recomendación y/o sugerencia Colocar las plataformas de Streaming en donde se indique al usuario en donde pueden ver las películas, y en personajes poder diferenciar entre las Especies humanas y no humanas.
{:width="210"}
{:width="210"}
{:width="210"}
{:width="210"}
{:width="210"}
Para obtener una comprensión más profunda de las necesidades y deseos de los usuarios, llevamos a cabo una serie de pruebas de usabilidad con usuarios reales. En la primera etapa, compartimos un prototipo de baja fidelidad con los usuarios y les pedimos que compartieran su experiencia al interactuar con él. Esto nos permitió obtener comentarios valiosos sobre la navegación, la disposición de la información y la funcionalidad general del prototipo.
En la siguiente fase, presentamos un prototipo de alta fidelidad mediante un enlace a un diseño interactivo en Figma. Los usuarios tuvieron la oportunidad de explorar la interfaz de usuario más refinada y realizar tareas específicas. A través de esta interacción, recopilamos información detallada sobre la apariencia visual, la usabilidad y la experiencia general del usuario.
Utilizando el feedback y las diferentes opiniones aportadas por los usuarios durante las pruebas de usabilidad, realizamos iteraciones en nuestra página web. Incorporamos los cambios necesarios para responder adecuadamente a los requisitos y expectativas de los usuarios. Este enfoque centrado en el usuario nos ha permitido crear una experiencia de usuario mejorada y alineada con las necesidades y deseos de nuestro público objetivo.
Durante las pruebas de usabilidad en diferentes etapas, identificamos una serie de áreas de mejora y desafíos que requerían atención en la implementación de nuestra página web. Estos hallazgos nos brindaron una valiosa lista de requisitos y oportunidades para optimizar la experiencia del usuario. Algunos de los problemas que detectamos incluyen.:
-
La Navegación de Las Películas resultaba confusa y no intuitiva, al mezclarse el fondo con las Películas, y perder el contenido.
-
Algunos elementos de la interfaz de usuario no estaban destacados de forma efectiva, lo que podía dificultar su identificación o función según sea el caso. Además, dificultad a la hora de acceder de forma clara a la información que había en los botones
-
En los personajes se solicito conocer más de ellos y sus características.
-
Incluir información adicional del Studio Ghibli como por ejemplo despliegue de paginas o redes sociales informativas relacionadas.
¿Quiénes son los principales usuarios del producto? Los principales usuarios del producto son los fanáticos de Studio Ghibli, los entusiastas de la animación japonesa y las personas interesadas en conocer más sobre las películas y el universo del Studio Ghibli.
¿Cuáles son los objetivos de estos usuarios en relación con el producto? Los usuarios tienen varios objetivos en relación al producto. Buscan aprender y encontrar información relevante relacionada con el mundo de Studio Ghibli. Esto incluye conocer más acerca de las películas, su trama, personajes, vehículos y locaciones, así como descubrir detalles interesantes y profundizar en el universo creativo de Studio Ghibli. También buscan información confiable sobre las plataformas de streaming donde pueden encontrar las películas de Studio Ghibli.
¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? Los usuarios desean ver información sobre las diferentes películas lanzadas por Studio Ghibli y tener detalles detallados sobre las películas y sus personajes. También quieren saber dónde pueden ver estas películas para poder disfrutarlas. Estos datos son relevantes para satisfacer su interés y curiosidad sobre Studio Ghibli y facilitarles el acceso a las películas.
¿Cuándo utilizan o utilizarían el producto? Los usuarios pueden utilizar el producto en diferentes momentos, como cuando deseen buscar información sobre las películas de Studio Ghibli, descubrir nuevas películas, explorar similitudes o diferencias entre los personajes, o simplemente sumergirse en el mundo creativo del Studio Ghibli. La página web les brinda una fuente confiable y organizada de información relacionada con las películas y el mundo de Studio Ghibli.
Este producto puede ser utilizado tanto por fanáticos apasionados de Studio Ghibli que busquen profundizar su conocimiento y experiencia de las películas, como por aquellos que están descubriendo las películas del estudio por primera vez y desean explorarlas y aprender más sobre ellas.
- Historias de usuario (criterios de aceptación).
Yo como fan de Studio Ghibli, quiero tener acceso a un sitio web que presente de manera completa todas las películas producidas por el estudio desde su creación. En dicho sitio, se esperaba encontrar los pósters más famosos de las películas junto con sus títulos en inglés y el año del lanzamiento.
Criterios de Aceptación
- Quiero tener acceso a una galería que muestre los posters de las películas.
- El póster debe ir acompañado del título de la película y el año de estreno..
- Ese Título debe estar claramente presentado y ser fácil de leer.
- Debe haber un diseño atractivo y agradable para el usuario.
Definición de Terminado
- [✔️] El usuario ve una galería en donde encuentra todos los pósters de las diferentes películas del Studio.
- [✔️] Los usuarios encuentran los títulos de cada una de las películas del estudio en inglés.
- [✔️] Se ve claramente el año de estreno de la película.
- [✔️] Cumple con un formato atractivo para los fans, al usar imágenes que hacen parte del canon del Studio Ghibli.
- [✔️] La página es responsive,y se adapta correctamente a diferentes dispositivos.
- [✔️] Las películas se presentan de forma organizada.
Como fan de Studio Ghibli, deseo encontrar una página principal que me brinde diversas opciones y me permita ordenar las películas de varias formas para facilitar su búsqueda.
Criterios de Aceptaciòn
- La página principal muestra claramente las diferentes opciones disponibles.
- Se proporcionan opciones para ordenar las películas, ya sea por año de lanzamiento o en orden alfabético.
- Los usuarios pueden buscar una película específica ingresando su nombre en un campo designado.
- El ordenamiento seleccionado por el usuario se refleja visualmente en la página.
Definición de Terminado
- [✔️] La página principal cuenta con un botón que redirige al usuario al catálogo de películas del Studio Ghibli.
- [✔️] Los usuarios pueden seleccionar una opción de ordenamiento, ya sea por año de lanzamiento o en orden alfabético ascendente o descendente.
- [✔️] Las películas se reorganizan según la opción seleccionada por el usuario.
- [✔️] Se proporciona un espacio de búsqueda donde el usuario puede ingresar el nombre de una película específica.
- [✔️] El sistema muestra los resultados de búsqueda correspondientes a la película ingresada por el usuario.
- [✔️] Se muestra visualmente cuál fue la opción seleccionada.
Como fan del Studio Ghibli, deseo poder acceder a información detallada sobre cada película, incluyendo las plataformas donde se podría ver la película, la trama, los vehículos presentes en cada una y las locaciones destacadas. Además, quiero tener la opción de filtrar las películas según el productor y/o director para mostrar únicamente las películas elaboradas por la opción seleccionada.
Criterios de Aceptación
- Se muestra una página dedicada a cada película que contiene información detallada, como la trama, los vehículos, las locaciones relevantes y las plataformas de streaming donde podría verse las películas.
- Los usuarios pueden filtrar las películas por productor y/o director seleccionando la opción correspondiente.
- Al aplicar el filtro, solo se muestran las películas que cumplen con los criterios del productor y/o director seleccionado.
- Se proporciona una interfaz clara y fácil de usar para seleccionar los filtros de productor y/o director.
Definición de Terminado
- [✔️] Cada película tiene una página individual con información precisa sobre la trama y el puntaje.
- [✔️] Los usuarios pueden seleccionar una opción de filtrado para productor y/o director.
- [✔️] Las películas se muestran únicamente si cumplen con los criterios de filtrado correspondientes al productor y/o director seleccionado.
- [✔️] La interfaz de selección de filtros es intuitiva y permite una fácil interacción por parte del usuario.
- [✔️] Se proporciona una interfaz clara y fácil de usar al momento de seleccionar los filtros.
Como fan del Studio Ghibli, deseo poder acceder a información detallada sobre los personajes de cada película con sus características. Además, quiero tener la capacidad de saber datos curiosos sobre los personajes del Studio.
Criterios de Aceptación
- Se muestra una sección dedicada a los personajes de todas las películas, con información relevante sobre cada uno.
- Los usuarios pueden visualizar las características de los personajes, como nombre, edad, género y especie.
- Quiero poder ver la información de los personajes.
Definición de Terminado
- [✔️] El usuario puede seleccionar que datos quiere conocer sobre los personajes del Studio (el género y la especie).
- [✔️] Se muestra información de las características de los personajes de las películas.
- [✔️] Se proporciona las características de los personajes de forma clara y visible.
Como fan del Studio Ghibli, quiero tener enlaces a las redes sociales oficiales del Studio Ghibli.
Criterios de Aceptación
- Se añaden botones o enlaces a las redes sociales oficiales del Studio Ghibli para que los usuarios puedan acceder a ellas directamente desde el sitio web.
Definición de Terminado
- [✔️] Se agregan botones o enlaces a las redes sociales oficiales del Studio Ghibli, permitiendo a los usuarios acceder a ellas fácilmente desde el sitio web.
- Diseños de baja fidelidad.
{:width="260"}
{:width="220"}
{:width="260"}
- Diseño de alta fidelidad (link figma).
{:width="220"}
- Pruebas unitarias. (pretest y test)
Durante todo el proceso de desarrollo, nos aseguramos de someter nuestro código a exhaustivas pruebas unitarias utilizando Jest como nuestro marco de pruebas. Esta metodología fue fundamental para garantizar que nuestro código cumpliera con altos estándares de calidad y funcionara de manera adecuada en todas las etapas del proyecto. Mediante la creación de una extensa variedad de pruebas, pudimos abordar una amplia gama de escenarios y validar las funcionalidades clave, al mismo tiempo que detectamos y corregimos posibles errores o comportamientos inesperados. Las pruebas unitarias realizadas con Jest nos brindaron una sólida confianza en la estabilidad y coherencia de nuestro código, lo que nos permitió ofrecer un producto final sólido y confiable.
{:width="420"}
{:width="420"}