Prototyping ToteBag
This is task 1.2 and a continuation of Why I needed a ToteBag
Once the ideation happens, what follows is, its implementation. But before that, something called prototyping needs to be done. Now, this might sound vague. It certainly did to me! Until the first webinar for us May-June Interns, I understood prototypes only in the mechanical, civil and electrical contexts. It never occurred to me that real prototypes could be built for webapps too. At first, I was thrilled! Up until then, for all the projects we did at college, I started with sketches on papers, creating flowcharts of sorts before I dived into the actual app development. Now when I knew that I could have a prototype as real as a civil or electrical engineer’s, I wanted to experiment with the tools available. It needs to be mentioned even though Proto.io was recommended for us right at the beginning, I wanted to arrive at the decision to use Proto.io by myself. That meant a lot of research into the existing tools. In the spirit of keeping this article focused on the topic at hand, I’ll be writing about my experiences with these tools some other time. For now, what made me want to use Proto.io was the UI and the transitions and interactions you could add. It has a neat interface. There are also video tutorials on how to use the features, in case you get lost in it’s awesomeness. :)
The most difficult part came next. Even though prototyping is a very very effective and wise thing to do, it can be tedious. Especially, if you haven’t had previous experience prototyping, you could easily be overwhelmed with all of the different options you have for the element designs and transitions. My rule was to keep it simple. A lot of times, us interns felt that creating screens using HTML and CSS was a quicker way to do the prototyping. But, once you get the hang of Proto.io, you will see that it is way quicker to create prototypes this way, than doing it using HTML and CSS.
I used the first 2 days of my week to experiment with the various features. Another couple of days later, I was able to create this. This is when I truly began to appreciate the power of Proto.io!
Creating the navbar on the top was one of the first things I did and naturally, the most difficult part. But starting with that was for many reasons, a good place to start at. I’d recommend it. Start with the more complicated part. That way you are sure to discover more features quickly. That was one of my primary takeaways. Clicking on the Me button on the navbar displays information about the logged in user.
The Find button should take you to a screen where you can search a resource.
Enter a resource name in the text box and click the Search button to get this.
Clicking on a search result should give you information about the resource, like this.
I wanted to create a pop-up effect for this screen. For that, I grouped all the background elements into a container and collectively set their opacity to a low value (using the container).
The Share button on the navbar should get you here.
In case the user wants to view the user account information, clicking on the brand name on the navbar, moves right back to the home screen.
The live version of the prototype can be viewed here. (This link expires on June 28, 2017)
P.S. Like mentioned earlier, I initially called my app Medullo. The name ToteBag was arrived at long after I had finished the prototyping.
