Wireframing: EMOV’s Mobile App
Dissecting the craft.
The Assignment
My fourth Ironhack assignment focused on a fundamentally crucial part of the design process, the wireframe. A wireframe is the basic blueprint for your design. It is a simple visual representation of how the flow of your application or website will work — structure, functionality, content, to name just a few. The goal is to provide just enough detail for others to understood your design and its functionality.
The best thing about wireframes are that they are meant to be done in black and white which allow for proper communication of your flow. This helps eliminate the distraction of beautifying the UI, which at this stage, takes away from important feedback on the user’s interaction.
This stage may sound simple, right? Well finding the right balance of what to include and what not to include can be tricky.
To practice, we were instructed to “reverse engineer,” using wireframes, the high fidelity mockup screens for the car sharing app, EMOV. Things I had to consider including in my wireframes were important text labels and visual elements such as icons, maps, buttons, etc. The wireframes needed to communicate and show the blueprint for the content and behavior of the app.

The Process
Deciding what to include and what not to include was a bit difficult at first. Do I use the logo or not? Do I show the map with location pins or leave them off? Once I wrapped up with my third screen, the map filter, I felt a lot more comfortable with what might be important to communicate and what I could leave out. Below are my wireframes side-by-side with the high-fidelity mockups for EMOV.




The Learning

I loved this assignment. In one of our earlier assignments, Whole Bank’s mobile payment re-design, I spent a lot of time on the prototype, although essentially a black and white wireframe, the process took quite sometime. I went around and around on what content to include and what the functionality should be. This assignment was great practice for sharpening my skills and honing in on communicating the functionality, content and behavior of a design.
Bonus benefit, it allowed me to build a Sketch library of wireframing components for the next time I need to create a wireframe!
