How to make rapid progress if you are a beginner in UX

A fine exercise to progress by yourself in 4 steps — [UX case study]

#Ironhack prework : Challenge 2

N26 Wireframe

To progress in UX and really understand the concepts you have learnt, there is no choice but to PRACTICE. I am going to share with you one of the first exercises I did with Ironhack and after each step I will give my tricks and tips so you can figure it out by yourself!

We will see in this case study, how you can improve your skills in 4 main steps :

1. Choose an app that you love using 📱

First, choose an app that you enjoy for the design and the experience.

I don’t have any shares in N26! The reason why I chose this app is because I enjoy the user experience. I have been able to open my bank account within 5 minutes in a very intuitive way. The design of the application is simple which makes it understandable and easy to use for the first time.

I took 5 screenshots: (1)The home screen after logging in, (2)The settings, (3) The card settings, (4)The card activation screen, (5) The partner offers.

Orignal screenshots from N26 app

- Figma tool : 👉🏻here

2. Start Sketching your interface ✏️

Sketching is crucial and if you are wondering why, I recommend you to read this article : “why its important to sketch before you wireframe”.

Sketching will allow you to start thinking about your user experience in a quick and easy way. This is an essential step before moving on to the wireframe stage. Use the tools you like the most: paper, post it, etc.

In this case study, the idea is not to build an app, but this step will allow you to understand its architecture while ignoring the design.

I loved that part, so I decided to take my time and start with a pencil. Please note that the purpose of this step is to go fast. Your sketching should not be a communication tool (except in special cases) you will not have to show it. So, do not waste too much time, it is intended to help you for the next step: wireframing.

- Iphone X wireframe mockup template :👉🏻 here

3. Time to Wireframe ⬜️

Now that you have finished the sketching stage, you can start creating the wireframe. This is an essential step which you have to do on a design tool (Figma, Adobe XD, Sketch for mac etc…). A wireframe, contrary to a sketch, is an internal communication support, it allows you to be better understood by the technical team and co-workers.

We should not focus on the visual aspects, this means do not include any element that could interfere in the reflection of the structure (colors, fonts …).

In my wireframe, you can see two differents ways to activate the credit card. Clicking on the CTA on the home page (screen 1) takes you directly to the card activation (screen 4). But it is also possible to activate it when you want to manage the settings (screen 2) and then on card settings (screen 3), its settings will be blocked as long as the card is not active, which is why there is a CTA which refers you to the activation page (screen 4).

If you don’t see the preview correctly click here

- UI kit :👉🏻 here
- Lorem Ipsum pluggin :
👉🏻here
- Figma's Youtube channel :👉🏻 here

4. Prototype in high fidelity version 💻

We come to the last step, high-definition prototyping. The prototype must be as close as possible to the final user experience (visual chart, transitions etc…). Once the prototype has been tested by the users and validated, it will be sent to the developers.

In this case, replicating the application you have chosen will allow you to progress much faster in interface design.

In order to reproduce the application as faithfully as possible, I have created my screens on the same frame as the screenshots of the application, so I can use the color selector. The most complicated in my opinion, is to find the right font (I did not find exactly the same one), I used the “what the font” app to give me an equivalence, and I downloaded it with google font.

As you can see I have represented the illustrations in a similar way, it is difficult to know which is the original. This allowed me to get to know the figma features very quickly by using gradients, shadows, transparency etc…

It is also a good way to understand the notions of consistency by paying attention to elements such as: proximity, alignment, whitespace, styling attributes

My version

- what the font :👉🏻 here
- Google font :👉🏻 here

I hope that you enjoyed the exercise. It is a great way to grow your creativity as your brain makes connections with features you have already used. You will be able to use some of the practices in your own way. Feel free to follow me to see my other case studies with Ironhack and if you are curious to see my evolution as an UX designer.