Wireframing: EMOV’s Mobile App

Dissecting the craft.

Alyssa Del Bene
Aug 31, 2018 · 3 min read

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.

EMOV’s high-fidelity mockup screens.

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.

01. Launch Screen: Decided to leave out the image but used a font I thought might be the right proportion. 02. Map Locator: Used the menu, filter, and search icons to show the screens functionality.
03. Map Filter: Used the appropriate labels and placement of the pop-up filter to show behavior and all available application filter options. 04. Available Cars: Showed information architecture for each available car tile and duplicated the others to show its list view.
05. Sidebar Menu: Showed the functionality of the sidebar menu and included the navigation options available. 06. Sign Up: Showed the important sections and field names to include.
07. Login: Included the appropriate fields and the hierarchy of each.

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!

Alyssa Del Bene

Written by

Former VC partner, aspiring product designer - this is my journey. ⚡️

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade