Ironhack Challenge 02 — Wireframing
Pre-work exercise for the UX/UI Lisbon Bootcamp April 2020
For my second challenge to complete the Ironhack pre-work, I had to choose any app, identify a user flow, and do a “reverse engineering” in order to create an interactive wireframe.
To do this I choose to work with the HostelWorld app and simulate a bed reservation in a hostel in Barcelona. I already used this app and I think that he has a really easy and intuitive flow.
So, after taking the screenshots, I imported the images to Sketch to create the wireframes. I used many elements from the Ironhack Wireframe Kit, like buttons, Image/Placeholder, avatar icon, search icon, text fields and radio buttons. I’ve also identify an image carousel (artboard 1), a rating bar (artboard 3), and a wizard (artboart 7).
During the process, I think that the hardest part was to draw attention to the buttons that are important to complete the flow. Even that the challenge suggests to use only black and white, I think that different shades of gray are essential to distinguish elements.
After creating the wireframes, I used Marvel to prototype.
You can see the prototype here :)
These screenshots were taken inside Sketch. The screen size is 1080 x 1920.
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!
Thanks for reading :)
