- 1. Nombre del Producto
- 2. Consideraciones Generales
- 3. Definición del Producto
- 4. Organización del Proyecto
- 5. Historias de Usuario
- 6. Diseño de la Interfaz de Usuario
- 7. Test de Usabilidad
- 8. Checklist del Proyecto
RMpedia.
Rick y Morty es una serie de televisión estadounidense de animación para adultos. La serie tiene gran acogida a nivel mundial, de todo este fandom hay un grupo que desea poder interactuar y ver la información sobre esta serie.
Para conocer las necesidades del público de la serie, realizamos una encuesta virtual, encontrando como resultado:
a. ¿Quiénes son los principales usuarios de producto?
- Personas entre 15 y 40 años, siendo en su mayoría adultos jóvenes entre 25 y 30 años.
b. ¿Cuáles son los objetivos de estos usuarios en relación con el producto?
- Conocer más de la serie (personajes, temporadas y otros)
c. ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? Información de:
- Personajes, porque aparecen más de 200 personajes durante toda la serie y el usuario quiere saber sobre ellos.
- Episodios, el usuario desea saber la trama de los episodios y los personajes que participan en ellos.
- Lugares, la serie que cuenta con muchas lugares (planetas, viajes en el tiempo, otras realidades) el usuario quiere conocer sobre ello.
d. ¿Cuándo utilizan o utilizarían el producto?
- El usuario lo usaría en momentos libres, a través de dispositivos móviles y web.
Para organización del proyecto el equipo optó por trabajar en base a la metodología ágil Scrum, para ello se empleó la herramienta Trello.
| HISTORIAS DE USUARIO | DETALLE |
|---|---|
| HU 1 | Como espectador quiero información relevante para conocer a todos los personajes de la serie Rick and Morty. |
| HU 2 | Como espectador quiero filtrar por género a los personajes para visualizar sus datos. |
| HU 3 | Como espectador quiero filtrar por estado de vida o por especie a los personajes para visualizar los datos. |
| HU 4 | Como espectador - quiero ordenar de forma ascendente o descendente a los nombres de los personajes para poder identificarlos mejor. |
En base a los resultados se diseñaron los siguientes prototipos.
Para el diseño del prototipo inicial se empleó la aplicación Microsoft PowerPoint (prototipo de baja fidelidad)
Imagen N°1: Interfaz inicial
Imagen N°2: Interfaz Sección Personajes
Imagen N°3: Elección de patrón de colores
El Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) se empleó la herramienta Figma. Prototipo
El listado de problemas que se detectaron a través del test de usabilidad fueron los siguientes:
- Con respecto a las imágenes mostradas el usuario prefería que el fondo de las imágenes sea blanco.
- En relación al tamaño de las letras de los filtros, evidenció que le costaba leerlos.
- De igual manera, prefería que los filtros estuvieran ordenados alfabéticamente.
[x] Usa VanillaJS.
[x] Pasa linter (`npm run pretest`)
[x] Pasa tests (`npm test`)
[x] Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
[x] Incluye Definición del producto clara e informativa en `README.md`.
[x] Incluye historias de usuario en `README.md`.
[x] Incluye sketch de la solución (prototipo de baja fidelidad) en `README.md`.
[x] Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) en `README.md`.
[x] Incluye link a Figma en `README.md`.
[x] Incluye el listado de problemas que detectaste a través de tests de
usabilidad en el `README.md`.
[x] UI: Muestra lista y/o tabla con datos y/o indicadores.
[x] UI: Permite ordenar data por uno o más campos (asc y desc).
[x] UI: Permite filtrar data en base a una condición.
[x] UI: Es responsive.