Wireframing
Challenge 2 Ironhack
This challenge consists of creating the wireframe of a chosen application.
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
- Production of a low-fidelity paper sketch of the user flow.
- Identification of the user interface components.
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
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