Digital Prototype First iteration

A week ago we finished our first digital prototype. It is a fully static site made in html5.

There are four screens:

  • Tips meant for you (For You)
  • Tips you sent (From you)
  • Friends management (Friends)
  • Send a new tip (New Tip)


For You                                                                                     From You


Friends                                                                                      New Tip

We realize it is totally not finished yet. Not all functionalities were present at this stage.

Like adding friends for example. We decided you can only send recommendations to people who accepted you as there friend so you should be able to search for them and send a friend invitation.

We also started working on a browser plugin for google chrome. In the future you’ll be able to click the plugin to directly recommend the site you’re on!


Testing Paper Prototype

Last Tuesday, we started testing our paper prototype!

First Iteration

First we used four test-persons to evaluate our prototype. There were some remarks that occurred at least two times with different users :

  • The logo on our main page was way too big, looked like a button and distracted the users from the actual functionality.
  • The Tip-it plug-in logo on the browser was too big. This space is very valuable!
  • The preview of a Tip wasn’t very clear to the user. Was it the site? Was it a picture?
  • There was no management for the concept ‘friends’. Who are the persons you can Tip to?
  • There was no options menu to change the settings.

For all these problems, we provided an appropriate solution:

  • The logo on the main page is smaller and moved to the top right corner.
  • The logo of the plug-in is more compact. The disadvantage of this solution is the fact that the functionality is less clear.
  • The problem of the preview was due to the fact that the prototype was on paper. We couldn’t express on paper that this preview was auto-completed after you filled in the URL of the tip. We keep in mind to test this problem with our digital prototype.
  • We added functionality to manage your friends. These persons are the ones who you can Tip to and receive Tips from. Tip-It will work with friend requests that will have to be accepted or denied. This also solves the problem that people are afraid of being spammed.
  • We provided a button to adjust your settings like your name or password.


Second Iteration

With these changes included, we tested our prototype on another three test-persons. There came up some small remarks, like for example a missing cancel button. But the main problem was the new friends functionality. The users didn’t understand what the purpose of the little cross and the small logo next to user’s names was (tipping them and removing them as friend).  We will consider this problem in the next iteration of our prototype (digital or on paper).


The interesting thing about the second iteration was that the new big problems were only discovered on the new functionality. This functionality was actually just tested for the first time, so it makes perfectly sense that the big remarks were due to this part of the application.

Next, we will digitalize our prototype! More about this in the next post!

Feel free to give us some ‘Tips’ on our design!

Evolving fast: Tip-it!

After evaluating Pinterest, it was now our turn to start developing our own application. The developing consisted of three phases: brainstorming, storyboarding and paper prototyping. During the last session we discovered what the interpretation of these phases were.  The new application had to have one theme:

Someone recommends something to someone else


In collaboration with team LPG we started the brainstorming for the new app. A first obstacle to conquer was the urgent need of team LPG to brainstorm on a laptop while having an ideal green board nearby. We won ;). Apart from that small issue, a lot of ideas came out. Each member of the two groups provided enough input and this was the result. Screenshot from 2013-02-27 12:05:28

As you can see, there were three major parts on the green board. We thought about who could use the app, what types the users could recommend and how the recommendation would work.


The next phase of the process was storyboarding. Here we needed to sketch one of the main real-life scenario’s where our application could be used. Due to a time limit we sketched the first thing that came into our minds.We sketched a person on a party recommending that party to a lazy friend using a picture of a beautiful girl. Here you can see the storyboard.


It turned out that the idea of the storyboard should have been also the final idea for the application. Because of three main reasons we decided not to go further on this kind of application. First, the application was actually just a replacement for an SMS/MMS. Second, there would be a lot of privacy issues with taking pictures of (un)known people. Third and the most important, we didn’t actually like this kind of application ourselves en weren’t fully enthusiastic. Back to the drawing board!

The second iteration we started by brainstorming about the actual purpose of the application and for what we would use this kind of app. We came to the conclusion that in our environment recommendations were mostly about URL’s. We liked the idea of speeding up recommending URL’s and this became the base of the next storyboard.


This time our storyboard pictured a guy surfing. At a one moment he is watching some funny stuff online and immediately he thinks of his friend Carl. He thinks Carl would really like this site. So he ‘Suggests’ it to his friend. A bit later Carl has taken a look at the site and he informs his friend that he liked it. While storyboarding we found also the perfect name four our brand new application: Tip-It! 

Paper Prototyping

The next phase of the process was paper prototyping. In this phase we created some prototypes of the interfaces out of paper. With these we can then test the normal flow of the application quickly without having to do any implementation. Our drawing skills were tested to the maximum.



With curiosity we look forward to test our prototype to real users!