For the second Ironhack Prework challenge, I decided to use an app that I use almost every day, the booking app for my yoga studio, Equal Yoga, based in Amsterdam. The app is incredibly intuitive and efficient to use. Also, the simple layout appealed to me as a Figma and wireframing novice.
The app enlists a variety of UI elements which include common icons (profile, home, menu, add money and calendar), drop down and accordion menus, action buttons, pagination and image placeholders. All of which could be found in the handy Ironhack wireframing kit.
The userflow I chose to represent is the flow of booking a class. This involves a flow of 6 screens, moving from selecting a location, class and mat, through to the booking confirmation screen, pictured below:
With very few images, it was fairly simple to put a wireframe version of this user flow together. With Figma being relatively easy to use, my greatest challenge was familiarising myself establishing the terminology of the UI elements and establishing the difference between different action buttons. I used Figma to replicate the userflow in wireframe:
Coming from a design background, I am used to overthinking and focusing on design elements all day. Simplifying the design into wireframe elements really exposed the functionality of each screen and I found that I had to unlearn the tendency to overthink the layout. It is quite a relief to not have to think about the design details and I enjoyed boiling down the screens to their core functions.
After seeing fellow classmates use a variety of programs to create their prototypes, I decided to experiment with Invision to create an interactive prototype:
In conclusion, I enjoyed the exercise of reducing the user flow down to the bare skeleton of the app’s functionality. I would like to repeat this exercise with a more complicated app.
