Ironhack UX UI Prework | Challenge 2: Wireframing

jutheo
3 min readMay 26, 2020

Overview and User Flow

An app I always enjoy using is Klarna. It is a simple app that keeps in control all your spendings and gives you a simple overview over your purchases and orders. Like a financial do list! What I enjoy most in this well structured app is the simple and minimal user flow. The content is well placed and the navigation flows easily. With just a few steps you can either pay or pause a payment, look back at your order history, see which orders have been shipped or returned and look back at the items.

I also enjoy the positive design, which doesn’t make the money spending part easier, but leaves you with less of a bad conscience at the end.

The fact that it gives you payment protection is also an important factor to consider.

That sense of security also helps during the app’s super easy login process. It might at first sight appear like a lot of steps are necessary to get you signed up. The app however guides you along very smoothly and makes up for that one click extra. Compared to many other banking apps that are a pain to use, Klarna provides a very easy step by step sign up.

Here is an examples of how such a user flow in Klarna looks like for a user that wants to log in and check his/her purchases:

Wireframe

In order to analyze the functionality of this user flow even more closely “reverse engineering” shows the low-fi wireframes of the chosen user path.

Simplified place holders, descriptive buttons and boxes replace the UI features to focus on the main elements.

Prototype

The following frames are giving an example of the Login navigation of a first time user that wants to access all his/her purchases. Signing in works simply by being send an email to your address, which needs to be confirmed. In order to guarantee an even quicker sign up next time you confirm the prefer login option for future uses. Once this is set up you are guided to your home screen.

Please follow this Link to try and test the wireframe prototype on Invision.

Reducing the UI features of Klarna to its bare minimum, without colour or design characteristics makes you understand the set up and flow of the app much clearer. It shows that a lot can be achieved with a few elements and why the set up works as it is and why it is an app I like to use regularly.

--

--

jutheo

I am a UX|UI Designer from Leipzig. Feel welcome to read some of my use cases here on medium.