Ironhack Challenge 2: Wireframing
Reverse engineering of app flow
How would you understand user flow in one app? What was the concept behind? What exactly do users accomplish?
In order to find answers to all that type of question in a mode of learning by doing I took NTC app and downgraded 5 main screens to Low-fidelity wireframes, just to see how it works.
This is what the user sees after logging in to the app. As it is a fitness app the main focus is on providing different types of workouts according to the needs which each user has. First 4 “welcome” screens with categories are made to help in decision which workout is more suitable to do. From the menu we can have access to other sections like Activity to see your progress or Settings.
In the process of going to Low-fidelity wireframing I decided to keep everything as simple as possible. All headlines, pictures and nearly all text were transformed into rectangles. In this way I could clearly see the structure of every screen, as well as hierarchy values. We see that in this specific header section are 4 different categories with several options to explore. When the header section is changing type of information and layout is changing completely.
Layouts are very simple and at the same time easy to follow. I can see how all elements work together as general values. Main spaces are covered by pictures, so visual representation has a big role. The rest is to support the visual input. In this case the user is trying different categories to find the best match. The main goal is to involve the user to try and in my opinion it is done quite successfully by providing many variations to choose.
