UI Design: Wireframing & Interactive Prototype
Ironhack Prework Challenge 2
During my journey deep-diving into UX and UI Design, I will be documenting my progress throughout the Ironhack UX/UI Design Bootcamp.
Wireframing: BerlKönig
To complete the UI section Prework, it was now the time for creating an interactive prototype. For the purpose of this exercise I chose the Berlin rideshare app BerlKönig. I chose this app because:
- Whenever I use this app, which is approximately weekly, it’s usually in a situation where time is of the essence. For example my train hasn’t arrived and I’m late for an appointment, or I’m standing roadside late at night. So usability is quite important.
- I’ve am always impressed how user friendly it is, despite having to take a myriad of things into account in order to get you from A to B.
Task Flow: Journey Search
The task required by the user was searching for a rideshare journey in the app, to inform themselves before deciding to book, including:
- establishing current location,
- entering pick-up location
- entering drop-off location
- receive information regarding pick-up time and price of journey
Lo-Fidelity Wireframe: Drawn
The first step was a lo-fi sketch to show the user flow. Although this is an app I regularly use, because I often use it without much thought, I had to reiterate the user flow for my wireframe a few times so as not to miss any steps.
Mid-Fidelity Wireframe: Sketch
The next step was recreating this in Sketch. Ironhack provided us with a handy wireframing kit with commonly used icons, so between using that and The Noun Project, I had all I needed to whip up the digital versions.
Interactive Prototype: Invision
The final step was creating the interactive prototype using InVision — my first time using this. After watching a couple of short video tutorials, I was good to go. It was mostly plain sailing although I had some issues getting the Craft Manager sync between Sketch and Invision to work. Although the file in InVision would say “Updated 3 minutes ago”, the changes I had made in Sketch were not actually showing in Invision.
So the final prototype is missing some finer aesthetic details, however all functionalities are as I intended:
Takeaways
- Good design is one that you don’t notice, and I think the BerlKönig app is a good example of that.
- I spent at least 30 minutes trying to fix the issue with the sync not working, to get some aesthetic details to show in my final prototype. Probably not worth the hassle at the prototyping stage.
