Ironhack’s Prework Challenge 2 : Wireframing
Reverse Engineering a Bank mobile App with Figma @Ironhack UX/UI Bootcamp
In this second diary-entry of my journey to becoming a UX/UI designer I will be exploring : user flow, task analysis, UI elements and Wireframes by reverse engineering an app of my choice. In the end I will be able to create and present a wireframe prototype in Figma.
For this case study I chose a Swedish banking app : Handelsbanken.
It’s an app that I had previously worked on to mimic the high-fidelity UI and I was curious to see if this would help me or make things more difficult when it comes to reverse engineering. A banking app is not a sexy subject but a useful one and the reason why I chose it in the first place is because I find banking to be a difficult and complicated subject and I wanted to see if and how an app can simplify tasks that I’m not comfortable with.
The important thing to know about Wireframes is that it is the skeleton & structure of the Interaction Design. It is used as a spatial and hierarchical layout of the different elements of information. By stripping things down to their essentials it permits us to identify, isolate and concentrate on the work of the flow, without getting confused or caught up in preferences of colors or styles. Create it fast and Test the flow !
The User Flow Path I identified for this exercise is that of a simulation of a loan for a house. Mind you, I’m not in any position to buy a house (although one can always dream : ) but it presented me with more diverse elements to wireframe and a bigger task to accomplish in this specific app.
The User Flow shows the path a user takes to complete a task. A User Flow in Mid-Fidelity wireframes is called a WIREFLOW.
Task Analysis of the Challenge
Wireframing the screens in figma and making a prototype of them was pretty cool and easy. The difficult part was the decision making in what elements to strip down when reverse engineering. It felt like I didn’t have to many things to strip down and thought I might be missing something.
I realized that the difference between the wireframe and the HiFi version is very subtle and just enough to make it visually easier and faster to group and distinguish different information. They have in my opinion succeeded in applying the motto “less is more”.
Black & White
To keep the wireframe as pure as possible it was recommended we work in black and white. But after reading why the best wireframe style is no style, I decided to replace the black with the #667080 color as it still keeps a high contrast and is easier on the eyes. All in all I did stick to the monochrome color recommendation but I just couldn’t help but add just a pinch of shade to the screen’s title field and the image placeholders.
Components & Styles
Some of the cool parts in Figma are creating Components and Styles (for colors and text) which helps you create wireframes quickly and leaves you with a great flexibility when you want or need to change something after having finished the global wireframing. They also nicely set you up for a much easier task when it comes to creating the Hi Fidelity version.
Text & Icons
The difficult part was to decide which texts and icons to keep and which to replace with Lorem ipsum and more generic objects. I decided to exclude all icons since they are a big part of the visually creative aspect of the app and are always accompanied by a text that is sufficient in this stage of development.
Prototyping & Scale SCALE
I was very excited to arrive at the prototyping stage when I realized that the proposed mock-ups for an iPhone 8 in the prototype section did not have the same size as my wireframes. I had unfortunately gone on the web to check out the size in pixels for my screen (750x1334 px) and the iPhone 8 device in the prototype section is half of that (375x667 px). I thought this would be an easy fix by scaling my frames and ALL of their content by ½. This was not the case! After a lot of research on the web and trying out different plug-ins and different methods to easily and quickly scale, I realized that scaling to this extent is a touchy and difficult task in Figma.
So beware of the scale when starting your work !
I ended up doing a prototype with custom dimensions that simulates the screen but does not present the device behind it.
! To access the Prototype Features you have to turn your Groups into Frames
Task Analysis of the flow
The Flow goes straight to the point in a straight line, with no complications. And although there is a lot of annex information easily accessible and well summarized around, it does not come in the way of finding and accomplishing the task of a loan simulation. The path avoids any mental workload and feels like a straight out basic calculator. It’s easy and fast.
Here you can try the Wireframe Prototype
