Wireframe Challenge: Emov App - Ironhack
Emov is an app to rent an electric car for short periods of time (car-sharing). It uses Vulog to operate and was launched on December 15, 2016 in Madrid with 500 electric Citroens in the fleet. By early January 2017, there were already 40,000 users in the city.
Ironhack challenge me to create a wireframe version of the Emov App, by using Sketch. My final product should be simple, in black and white, but I still have to follow the same flow as the high-fidelity screens shared in the image at the left.
To do so, what I did first is to have a detailed look at each screenshot of the app, in order to get familiriaze with the content, the style, the product and the client.
I have designed the first wireframe in a very simple way (you can see the first image above of this story). The unique thing that appear in this screen is the logo and a corporate image of Emov. Because of that, I’m going to explane the other six screenshots in deep.
In this image you can see three screenshots that represent the wireframes of the example given. The first one at the left, represents the home page, here you can see the location of the user (black icon) and the nearest cars (grey icons with the car icon). The header is form by the index, the logo, some filters and the availability indicator.
If you press the filter icon, you’ll go to the Map Filters screen. Here you can see some filters that you can apply in your car-sharing search (see the screenshot at the middle of the picture above).
The screenshot at the right, represents the nearest cars available to rent. You can get this step in the app by pressing the lens at right in the Homepage. You can see that in this image, there are some text that explains whats on each field (car registration number, location, address, etc).
In this last picture, you can see the last three steps of the app. In the screenshot at the left, is represented the Index. By different graduations of the grey color the importance of the text has been represented. In this image you can see icons, pictures, text and url indexed to the text and some other information.
The screenshot at the middle, represents, the Sign up screen. Again, By different graduations of the grey color the importance of the text has been represented.
The screenshot at the right simulates the Log-in screen for people that already are members of Vulog. Here you see the differences between the text, the placeholder text, and the buttons.
I have made this exercise by using Sketch. Again, this useful tool help me to create simple wireframes going directly to most important thing that is the interaction of the user with the application. The simplicity of this designs help the UX designer to explain each interaction, button, text, icon and image in the screens focusing in the usability of the app and making easier the next step for the UI designer.
I enjoy a lot this exercise and I’m super ready for the upcoming challenges!
Thanks for reading!
Hope you enjoy this post!
S.
