Challenge 2: Wireframing / Fintonic

Por qué Fintonic ✌️

Para el reto de Wireframing he escogido la app Fintonic. Es una app de finanzas personales que te ayuda a organizar tu dinero y a ahorrar. Organiza la información de todos tus bancos, tarjetas y seguros en un mismo sitio de tal manera que puedes saber qué gastas en el súper, deportes, viajes… y en paralelo te ofrece ofertas personalizadas.

La uso a diario, me encanta su interfaz, y considero que a nivel marketiniano hacen un trabajo genial. En cuanto a UX writing son sin duda un muy buen ejemplo a seguir. ¿Una app de finanzas hablando el lenguaje que todos usamos a diario y que te hace sentir como en casa? ¿Dónde hay que firmar? 🥰

User flow 💪

El flujo que he elegido es el proceso de login con Google y un pequeño tour que suelo hacer cada vez que entro en la app. En primer lugar miro cuál el estado general de mi cuenta, veo en qué cosas estoy gastándome más dinero (me encanta la gráfica que utilizan para las distintas categorías de gasto) y por último, suelo darme una vuelta por la sección de Financiar donde puedes ver tu FinScore, que es tu nota financiera, y la que define, en palabras del propio Fintonic, cómo de sexy eres para los bancos.

Let’s draw it 👩🏻‍🎨

Para dibujar los prototipos busqué en internet plantillas de Iphones y me imprimí bastantes copias. Me ha ayudado mucho a la hora de distribuir los elementos en el espacio sin salirme demasiado de escala.

Identificando los elementos UI 🔍

Fintonic es una app que combina muchos elementos UI distintos ya que cuenta con una interfaz compleja en cuanto a funcionalidades, por eso ha sido muy interesante utilizarla para este ejercicio. 🤓

• Pop ups
• Formularios
• Dropdowns
• Progress Bars
• Tabs
• Tap bar
• Date pickers
• Links
• Gráficos
• Text input fields

Pasando los prototipos a wireframes 🖱️

Si te has quedado con ganas de más, puedes ver el prototipo interactivo que he hecho en en Figma aquí.

Un pensamiento en voz alta para terminar 🤔

No es fácil discriminar qué información es importante y cuál no. La propia inercia de “the more the merrier” nos lleva a sobredetallar los wireframes, supongo que así nos sentimos un paso más cerca del ansiado diseño final. Por esta razón, he tenido que hacer lo que coloquialmente se conoce como “recoger cable” en varias ocasiones porque estaba detallando demasiados copies y elementos que no aportaban demasiado a este primer esqueleto. Supongo que esto es como hacer tortilla, la primera cuesta y lo mismo se te cuaja de más, pero seguro que la segunda te queda más jugosa.

¡Pues ya estaría! Si tienes cualquier sugerencia o duda me encantará leerte en los comentarios. 🎉