Challenge 2: Wireframing
Following the previous design thinking challenge, the next steps on the road to Ironhack are to reverse engineer the Citymapper app by creating wireframes. This is a really interesting task because it requires us to think about the core aspects of each screen — what is deemed as vital to achieve the screen’s goal and what is considered minor detail. In order to showcase this in my work, important details include specific words or images, whereas less important screen info contains placeholder text or images. This way, viewers are able to easily identify and distinguish the screens’ main features that allow them to complete the user flow.
But, Brad, what is the user flow?
The user flow for this challenge is for users to find a location and set it as their destination. With the help from Ironhack’s wireframe kit and some plug-ins, I was able to create these wireframe screens in Figma. Now, let’s take a look at the reverse engineered screens from the original, to the lo-fi sketches, and to the wireframes.
I enjoyed reverse engineering these screens, as they made me think about what’s most important to show stakeholders, the meaning of each individual item, and how to convey their meanings to viewers in a simplistic manner. As we get closer and closer to the start of Ironhack, I am super excited to keep learning and improving as a UX/UI designer.
