Ironhack’s Prework : Emilie Galan_Challenge2.
Second challenge, let’s learn a new tool: Figma and create a Wireflow!
To answer to this second part of my prework, I had to work on Wireframe using the “Reverse Engineering Style”. To Begin I had to choose one famous app that I really like and use, for me it was Adidas Running App. I allowed you not very famous for everyone but it is for the big runners community in Paris. So, here we go !
WIREFLOW with the Adidas Running App: RUNTASTIC
First of all, what’s a wireframe?
- It’s a visual representation of an app or website
- It’s a skeleton made of wires of what the actual content will be
- It’s usually in black and white layouts that outline the size and position of elements on a page
- They’re keytool of Interactive design usually created after figuring out naviguation
- They shouldn't include too much details.
Furthermore, wireframe are really important, the goal is to focus on functionality, behavior, how to display certain informations and prioritize content.
To start the study case I have to make you understand why i decided to work on Runastic. It’s a really important app in my daily life because it helps me to see my progress in my run training and also challenge myself. It’s not only about performences, Runastic allows people from the adidas community to meet and go for a run (of course was easier before the covid situation) and also shows us many tips about sport and nutrition in general. That’s why this app is very complete and not only useful when you go for a run even if it’s why you get the app at the start.
Visually it's pretty simple, only two colors Peacock Blue and shades of Grey. It’s not designed to be beautiful just to be helpful and give us a lot of informations about us and how to make better performances.
When you first open the app you arrive on the screen which allow you to start you training directly and register your statistics. Then you can choose to use it for training or to scroll a little bit and loose yourself in a different app than Instagram.
To show you the first meaning of Runastic, I decide to work on the flow which make you see your progress (because we all know that’s important to be kind and proud of ourselves sometimes):
- First screen: the welcome page which is the one with the mapp but allow you to go directly in others sections.
- Second screen: progress page, important one because it let you see your recent activities, your stats year by year but also create some goals.
- Third screen: then examine one recent run. Fisrt section of your stats, the itinerary and a lot of techniques informations.
- Fourth screen: the temperature, picture of your run, notes and the shoes you’re using.
- Fiveth screen: deeper analysis of your run km by km.
There is lot of little icons in this part of the app because there is so much numbers that you have to hang to some visual support to easierly understand these ones.
Lo-Fi Wireframes
I started with a Lo-Fi Wireframe to understand better how the design is build in this app and to choose what I will put in highlight in my Hi-Fi Wireframe. This step make me understand that there is a lot of sections and informations on the app. Even if it seems simple when you use the app, i saw how complicated it was builded and how many stats they shows us.
Hi-Fi Wireframes
These ones are wireframes made with the tool Figma and they’re more technics due to the details and the interaction.
Trully was a firsthand for me to work on Figma and also to create wireframes. It wasn't easy at first to work with Figma because i had all my old habits with adobe suit. But some hours later i was really happy to see how much it was intuitive and was enjoying myself.
Thank to this exercice i saw that trying to go straight to the point with low design helps to cancel or avoid superflous tasks and helps us to stay focus on what’s important, the structure and the usability.
Thank you to reading me, feel free to comment and share :) !
Best
Emilie
