Life Saver: Prototype
Read the previous post if you haven’t yet.
The first step in making the app is creating a prototype. When we were first told to create the prototype, I was wondering why do we have to create a prototype? Why not directly start making the app? But when I finished creating the prototype I realised the need for it. It gave me a clear picture of what my app is and what I had to do.
Alexis Piperides’s (CEO of proto.io) webinar on building MVP’s and need for prototyping were extremely informative and helpful. A summary of the webinar can be found here.
For creating the prototype I used proto.io, which is one of the many tools for making wireframes/prototypes.
I started with learning how to use the tool. Once I was familiar with the features of proto.io, I started making my prototype.
I started with the login and register pages. I made a logo, set the background and added the text fields and buttons.
I then went on to create the screen from which a user can request the emergency service. It consists of three tiles, one each for fire service, ambulance and police. When the user clicks on any of the tile, then that service is requested.
The next screen shows the status of the request. As each step of the request is completed a tick appears next to it.
The ETA is shown so that the user has an idea of how long it will take for the service provider to arrive.
The user can also track the service provider if needed.
In the tracking screen the ETA is shown at the top and map with the location of the service provider is shown.
The user can also cancel the request from this screen.
Put together, this is how the prototype looks:
You can also view the prototype at proto.io or check this pdf or gif.
