Exercise: Creating a prototype with inVision

Hey, this is an exercise from my UX/UI Design Bootcamp Prework. Here you can see the rest of my projects. Want to know more about me? Click here 🙌🏽 .

Do you remember the previous post where I made wireframes from the Emov app?

Emov’s wireframes

If not, you can see that post here.

So, in this exercise, I’m going to transform those wireframes into a prototype using InVision.

InVision helps you to create quick interactive prototypes by connecting the different artboards you previously made up in Sketch.

WTF are you talking about?

Sketch is a vector design tool entirely focused on user interface design.

Artboards allow you to create fixed frames on Sketch’s infinite Canvas. As you’ll noticed on the exercise, the artboards usually represent the different screens of the app. Each artboard represents a screen or an interaction within a screen.

InVision is a prototyping tool, which allows you to quickly and easily create interactive mockups for your designs and share them.

How wireframes are going to be connected

I linked the screens in Sketch using the Craft plugin and then I exported all to inVision, where I worked with the final result:

My prototype

You can check it out and interact with the prototype here.

Its use is very simple:

• When you open the prototype, you are on the splash screen. You’ll be there until you tap the screen.
• Once you tap it, the map will appear. On this screen, the user can open the menu, add or change filters in order to see more or fewer cars and search the cars on a list instead of using the map provided.
• In the menu screen, the user will find different actions to do: register him as a new user, log in if he already has an account, contact the emov team or read the emov’s faq. On this prototype, only the registration and login options are available.
• If the user taps on registration, he’ll jump to a new screen where he can complete his sign up form. To sign up, the user should fill his log in details as email and password, and his personal information, including his name, fiscal identification number and credit card.
• And, in the same way as it happens before, if the user clicks on login he’ll jump to a screen where he can sign in using his email and password.

From all screens you can easily go back, just by tapping the arrow back or the cross icon.

Do you remember the additional wireframes I made to book a car?

Emov’s wireframes: Reserve

This time I decide to make the interactive prototype with Flinto.

But, what is Flinto?

Flinto is a tool for prototyping iOS app designs. By adding screen images, and linking them together in Flinto’s editor, you’ll be able to create an interactive prototype that can be shared and installed on-device.

The interactive prototype shows how the user will book a car and how he can cancel his reserve:

Interactive prototype: Reserve

To make a car’s reservation:

1. The user will have to tap on the car’s location he desires and tap on Book this car.
2. After the user has booked the car, he could cancel the reserve or unlock the car. To unlock the car, the user has to be next to the car and tap the Unlocked button, after that, the car would immediately be open.

The visual behavior of these two actions, cancel and unlock, would be the same.

Hope you like it!

That’s all for now,

see you real soon.