Ingeniería inversa.
Seguramente habrás escuchado hablar de este término (ingeniería inversa). Sino fue así proyecta en tu mente un auto de control remoto. Habrás conocido a alguien que siempre tuvo la curiosidad de estar abriéndolos para saber de que estaban hechos y como funcionaban, ¿cierto? En pocas palabras, un niño que tiene este interés, está haciendo parte del proceso, ya que el objetivo consiste en obtener información a partir de un producto, conociendo sus componentes, la función de cada una y en conjunto, y por último saber el proceso de fabricación. Este conocimiento nos lleva a tener los recursos necesarios para hacer un nuevo diseño.
Ahora imaginando una página web, ¿Crees que pueda funcionar de la misma manera? Naturalmente no es como que puedas abrirla literalmente e inspeccionarla, sin embargo puedes ayudarte del wireframing para cumplir el propósito.
Challenge
Aquí lo que buscamos fue encontrar un user flow que nos permitiera hacer un wireframe acorde al diseño de la app Fatsecret.
Y para entrar un poco en contexto Fatsecret es una app para celular la cual te ayuda a contar la cantidad de calorías que consumes diariamente. Es una app realmente efectiva si lo que buscas es alcanzar tu peso ideal, sin importar cual sea tu meta, subir o bajar de peso. El secreto está en ir registrando cada alimento que consumas y así saber que tantas calorías estás consumiendo al día. La app te ayuda con la información calórica y de grasas de la mayoría de alimentos y si algo no aplica contigo, puedes personalizarlo.
Así es como está configurada la app en general:
User Flow
El user flow que decidimos utilizar fue el de “3 rows” ya que era el que mejor se ajustaba a las condiciones de diseño de la app y esto hizo que el proceso fuera muy sencillo.
Low-fidelity (lo-fi)
Task Analysis
¿En qué consistió el task analysis de la primera etapa? Básicamente consistió en aprender a navegar por las 6 diferentes secciones de fatsecret los cuales son:
- Entras a la app, a la sección de Inicio.
- El segundo botón inferior te manda a Peso.
- El tercer botón inferior te manda a Diario.
- El cuarto botón inferior te manda a Informes.
- El quinto botón inferior te manda a Más.
Prototype
Medium- fidelity (med-fi).
Elementos UI
Estos fueron todos los elementos importante a incluir:
Drop down list (para el botón “Filtrar”)
buttons (para las “cal, kg y agregar nota”)
Toggles (para el botón “on-off”)
Navigation component (para el “search box/field”)
Icons (para “Inicio, peso, diario, informes y más”)
Image Carousel (para las “comidas recomendadas”)
Information components (para los “mensajes y solicitud de amistad”)
Progress Bars (para el “Seguimiento de peso-alimentación”)
Containers (para la “Info de una pestaña”)
Interacción con el prototipo
Siéntete libre de probar el prototipo en high fidelity:
Te retamos a que encuentres las diferencias con el original.
Resumen
El proceso de ingeniería inversa es verdaderamente divertido porque no debes quebrarte la cabeza para pensar en como debe ir acomodado todo en cada fase dentro del wireframing, por eso está la app. Tienes la libertad de ir tan rápido como desees y puedes sacar ventaja de esto para probar muchos estilos. Es un proceso muy maleable y enriquecedor, más si vas adentrándote al tema.
