Challenge 2 Ironhack

This challenge consists of creating the wireframe of a chosen application.

Unsplash photography by Amélie Mourichon

The challenge : the task was to ‘reverse engineer’ the Interaction Design and User Flow from an application in order to create a wireframe version and build an interactive prototype.

A wireframe ? It is a simple schematic representation of a user flow of an application. The wireframe is used to visualise the composition of an application (buttons, text zones, the location of images, videos, links, as well as various graphic elements) before the logo, images and colours are chosen.

The chosen application is not the most popular but is very useful for allergy sufferers :) Ma Vie D’allergik (Mobile app for the daily support of allergy sufferers in the follow-up of their respiratory allergy).

I have created a wired version of a common user flow of the application in 5 screens: the consultation of the annual pollen calendar for a city.

Step 1: lo-fi paper sketch

Lo-fi wireframe MaVieD’allergiK

Step 2 : The user flow

The user starts on a home screen ( screen 1) and then scrolls down to the bottom (screen 2).

He will then press the “see more” button of the “Pollen data”.

He arrives on the “Pollen data” screen and in the search bar indicates a city for which he wants to know the data (screen 3).

Once the search has been completed, he wants to have a detailed status of the pollen data for this city. He clicks on the bottom button “view pollen calendar”.

The user arrives on a screen which offers a choice of consultation by region (screen 4).

He presses the button of the desired region. The annual pollen calendar screen of the region is displayed (screen 5).

Step 3 : Wireframing on Figma

The wire should be monochrome (no shades of grey or colour), so as to remain focused on the structure and not on its appearance.

Step 4 : Testing the user flow with a navigation test

Running the prototype on Figma by clicking HERE

Prototype MaVieD’Allergik on FIGMA

This reverse exercise helps to understand how an application was built and why a solid framework for an application is essential.
Wireframe facilitates the creation process. It allows ideas to be communicated in simple and clear language.
Wireframe is essential to make navigation easy and optimize the user’s experience. This step guarantees a “happy path” for the end user.
With this exercise, I understood the importance of a balance between application design and user navigation.

Creating a wireframe is not an easy exercise. I used FIGMA for this challenge but the next one will be on SKETCH and prototyping with INVISION. Another challenge for me is all the new tools that I discover ;)

Thank’s for reading and 👏 me.

Leave a comment juste below.

Check my LinkedIn



UX/UI design student @ironhack

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store