Ironhack’s Prework_ Challenge 2: Wireframing Instagram
En este Challenge se nos propone generar la versión wireframe de una app popular. Para ello, completaremos una tarea en la app que involucre, al menos, 5 pantallas, y simplificaremos su diseño hasta llegar a la versión wireframe de cada pantalla. Por último, uniremos todo en un prototipo interactivo.
1 — La app: Instagram
En este caso, la app seleccionada es Instagram. Os explico a continuación por qué:
En primer lugar, he invertido mucho tiempo de navegación como usuaria en la app previamente. Esto me ha permitido tener una noción del funcionamiento y conocer de manera aproximada el número de pasos que requieren ciertas tareas. De esta manera, he agilizado el planteamiento personal del ejercicio y he ahorrado tiempo de investigación acerca del user flow de la app.
En segundo lugar, he sido usuaria de Instagram desde prácticamente sus inicios, lo cual me ha permitido experimentar de primera mano las mejoras que se han implementado a lo largo de los años. Además de ser referencia en muchas ocasiones para el desarrollo de otras apps, Instagram ha conseguido, según mi opinión, simplificar muchos procesos que hace unos años eran muy tediosos o poco intuitivos.
Por tanto, creo que puede ser interesante analizar esta app, ya que es el resultado de años de user research, implementación de mejoras, corrección de errores e innovación en la experiencia de usuario.
2 — User flow: Nueva publicación (feed)
La tarea seleccionada es una de las tareas básicas de la app: crear una nueva publicación. Como he mencionado anteriormente, a lo largo de la historia de Instagram el user flow de esta tarea ha sufrido innumerables modificaciones, tanto a nivel visual como de interacción. Actualmente, es uno de los procesos más sencillos y completos de publicación de contenido, permitiendo al usuario un gran número de funciones en un número muy reducido de pantallas e interacciones.
3 — Inventario de Elementos UI
A grandes rasgos, en la app de Instagram podemos encontrar:
- Botones
- Toggles
- Campos de texto
- Campos de búsqueda
- Iconos
- Carrusel de imágenes
- Barras de progreso
- Acordeones
En el user flow que representaremos a continuación, los elementos son:
- Botones
- Toggles
- Campos de texto
- Iconos
- Barras de progreso
- Acordeones
4 — Wireframes Lo-Fi
Tras seleccionar la app y la tarea sobre las que queremos trabajar, hacemos una versión lo-fi de los wireframes que crearemos más adelante.
Esta versión es el resultado de tres intentos: simplificar el diseño de Instagram no fue tan fácil como parecía a priori, ya que me parecía importante marcar una diferencia entre las imágenes de perfil, Stories de Instagram, los iconos y las publicaciones de usuarios. Todo esto sin excederme en los detalles e intentando que la información no generase confusión a primera vista.
5 — Wireframes Mid-Fi
6 — Prototipo interactivo
Tras crear la versión mid-fi, hemos unido todo en un prototipo interactivo para poder analizar el user flow en primera persona y en tiempo real. Puedes acceder al prototipo interactivo clicando abajo.
¡Muchas gracias por vuestro tiempo! :)
