Using Sketch and InVision to Prototype the Emov App

Emov is a car-sharing app that allows users to find and rent electric cars for short periods of time. The app launched in December 2016 in Madrid, but plans to expand to Barcelona and Bilbao in Spain, and later to Germany, France, Canada, and the United States.

My instructors at Ironhack challenged me to create a mid-fi wireframe version of the emov app using Sketch. The objective here is to consider which visual elements are necessary at this point in the design process, and which can be saved for a high-fidelity prototype.

my mid-fi wireframes based on the emov app
emov app vs. my wireframes

I’m so impressed by how straightforward and intuitive it is to use Sketch. Having an arsenal of icons and image placeholders to choose from made a huge difference in speeding up my wireframing process. I’ve begun to notice that designers all over the internet are really generous and often make their own wireframing toolkits and icons available to download for free. It really allows you to focus on the overall design without wasting too much time or energy crafting your own icons. Needless to say, this has been super helpful. Thank you, kind strangers!

Next, our instructors asked us to create a live prototype on InVision using our wireframes.

It starts on a loading screen which automatically transitions to the Home screen. From there, you can navigate to the map filter by clicking the filter icon, to the available cars by clicking the search icon, or to the side menu by clicking the menu icon on the top right. From the menu, you are given the option of signing up by clicking the registration link, or logging in (through the login link). If you would like to leave any of these pages, you are giving the option of returning to the previous screen via [X], [<], or [OK] buttons. When on the side menu screen, you can either click or swipe on the map visible to the right of the screen to return to the Home screen.

Here’s a link to my prototype. Did you find it easy to use?