Ironhack Challenge #2: Wireframing Le Fooding
As part of my prework to become a future Ironhacker, and hopefully a future UX UI Designer (fingers crossed), I’ve been asked to choose a mobile application I like (aesthetically and/or functionally) and to deconstruct some screens as simple wireframes.
A wireframe gives a simple visual representation of how the flow of the app you are creating will be. The key word here is simplicity! That’s why it’s done in black and white, with enough details so it can be easy to understand by someone else, without distracting from the goal.
I’ve decided to work on a French app I really like called Le Fooding. This app allows you to discover insider spots in Paris and across France. If you are as epicurean as me, you should download this application when you visit France to be able to discover the best restaurants, hotels, B&Bs and bars.
In order to realize this exercise, I used Figma, a collaborative design tool you probably know. I took my first steps on it as part of this exercise. Despite the fact that’s quite intuitive, I realize I still have a lot of progress to master it perfectly (so please, be indulgent with the result below)!
Here are the screenshots of the app I’ve decided to deconstruct as simple wireframes. My purpose was to find a nice restaurant located around my position. So I localized myself in the app which offered me a list of several places around me, I chose one and I scrolled over the description made by the Fooding team, to get more information about it.
Let me give you some additional explanations about the different screens (from the left to the right) :
- 1st screen: app welcome page
- 2nd screen: ‘location choices’ page (I know where it is / I know the name of the place / around me).
- 3rd screen: ‘connexion page’. This one is not very useful in this exercise, I just kept it to get enough screens to practice the wireframe.
- 4th screen: ‘settings page’. This one is not very useful in this exercise, I just kept it to get enough screens to practice the wireframe.
- 5th screen: ‘map page’ which appears when you choose “around me” in the 2nd screen. The blue circle is my position, the yellow map marks represent all the restaurants around me.
- 6th screen: the blue map markers represents the restaurant “Polissons” (the closest to me in term of distance).
- 7th screen: ‘description page’ you see when you scroll to read the full description of the selected place called ‘Polissons’.
Now that you’re more familiar with the final app, it’s time to discover the wireframes I’ve created for the above screens :
According to me, the wireframes I’ve created are too much detailed and I have to confessed : I struggled a little bit with the methodology. I believe the result is not as simple as it should be but I really enjoyed to work on this exercise anyway. Honestly I can’t wait to improve my ability to make it more simple, in a shorter time. This exercice is great first step into the Figma tool but also into the process of wireframing: I understood here how it’s a key step although it’s not that easy to know where the simplicity cursor should be placed! I can’t wait to improve my skills on Figma and in wireframing by learning through tutorials and by practicing again and again! Thanks for reading me until here and if you have tips to share for a beginner like me : please feel free :)
