Iron Hack Pre-work — Challenge 2: Wireframing
An introduction on how to work with wireframes.
I like football and I’m a geek with some stuff so I decided to work on an application who group both of my hobbies :MPG “mon petit gazon” in french, it’s fantasy league application based on football stuff : transfert, team, etc. Point is we are a team of friend and we challenge each other following real life championship. Example : if one of my player scores, I score a goal against my challenger. If he missing because of injury, he doesn’t play. We build and mix a 11 line up with all players of championship so we can choose those we like.
I used it every day because there is a lot of competition between us, and during match game, we are all checking our team. At the end of our league, the loser buy us a drink :)
From these five screenshots, I reverse engineer of MPG user interface to learn how to make clean wireframes.
I really would like to set up an application like that one day, that’ why I decided to wireframe this ap!
From these seven screenshots, I reverse engineer of MPG user interface to learn how to draw wireframes.
As you can see, there is some UI elements :
- App logo
- Football shirt design for each team
- Various pictogram : camera, calendar, message, trophy, settings, hourglass
- Text input field
- adds space
- close button
- save button
- arrow left/right
The task I decided to develop is the following one : when the app is on main screen, we have to set up the team, record it and check who is our next opponent on the match calendar. Here what I did :
- Screen 1 : it’s the “Opening page” of the application, you can choose in what league you want to go by clicking on it ; indeed, you can have severals.
- Screen 2 : it’s a “global wall”, we can write anything on our league (humor first) and results from previous match appear.
- Screen 3 : This is where you managing your team, like substitute injury’s one, and where you validate your final line up.
- Screen 4 : an example of how you can change a player.
- Screen 5 : a repetition of screen 4, part of the user journey
- Screen 6 : here you can check your previous match, scores, goals and also your next game, opponent and when it will take place.
- Screen 7 : by clicking on your team in screen 6, you can see a preview of your final starting line, that you can’t edit. You need to close this screen and click on the picto from screen 3.
You can see the animated prototype I made with Figma for each step clicking by this link : HERE :)
I really liked this challenge because you can do the “dark job” and start thinking how an UX/UI designer thinks. Final users can’t imagine how we built all the app they use and this is why I choose to learn about this.
Prototyping is a good way to see what works and doesn’t, we start to see how will be final UX/UI journey. It’s also a good way to see what you don’t like in your favorite app :)