IRONHACK’S PREWORK: WIREFRAMING — CHALLENGE 2

For this challenge, we are had to make reverse engineering of an app of our choosing. I decided to wireframe the app Sweat. Sweat is a workout app that I use frequently. I like the design of it but I really love the flow of it. At leats it’s the app I always come back to when I need a push in the gym.

The user flow

The flow I chose is from home page of my program. Picking out what resistance work you wanna do. Then you see what exercises you are going do, then they ask if you wanna warm up or not and the you start.

The wireframes

I started hand sketching the first frames to clear my head and get started. Then I wrote down inventory UI elements that I saw.

• Buttons
• Text — Headers, sub headers, text, fields
• Photos
• Videos/GIF
• Icons
• Top bar
• Bottom bar
• iPhone status bar

Then I moved on to Figma and made more hi-def wireframes and here they are.

Conclusion

I enjoyed this challenge a lot. I love UI but I often get stuck for hours choosing what font to use etc. It was really freeing to focus just on the flow and the practical part. I saw clearly how much time it will save me in the future design. Start with focusing on the functionality and what I want the app or website to do before I design the whole outlook.