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)

tipitforyoufromyou

For You                                                                                     From You

friendsnewtip

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?
    IMAG0029
  • 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.

IMAG0041

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).

IMAG0041

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

Brainstorming

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.

Storyboarding

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.

SB1

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.

SB2

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.

IMAG0191

 

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

User Interfaces : First encounter

Last Tuesday we had our first encounter with the course User Interfaces. We discovered the basic concepts of Human-Computer Interaction. The first thing we discussed was ‘Why is this course important?’. There are a lot of courses on the technical side, so we need some course from the users point of view to balance things out.

After some theory, we started with a first small assignment. We had to evaluate the website Pinterest. While experimenting with the site, we wrote down the most striking features.

Pro’s

  • The scroll-to-top button is very useful because Pinterest provides a large amount of information on one page. 

    The Scroll-to-Top button

  • Using the search function provides three categories of results. Here you can choose between Pin, Board & Pinner. Searching for content, topics or people becomes very easy. Pins, Boards & Pinners

Cons

  • During the session on Tuesday, it was possible to look at the site without registering. Although the site was pushing the viewer to register.

Startpage 19/02Today we noticed that even just looking isn’t possible anymore without being registered. Screenshot from 2013-02-21 15:21:42

  • If you do decide to join Pinterest, you are obligated to follow 5 pinners immediately. You cannot choose to skip this.
  • It isn’t very clear what is possible and what isn’t. Do you have friends? Can you make your pins/boards only visible for these friends? Can you post only pictures or other multimedia? We only found answers to these questions by trial and error. You can invite friends, but they aren’t displayed as your friends on Pinterest. The second question isn’t relevant then. Further it is also possible to upload videos (using Youtube) or slides (using Slideshare).
  • The search function disappears when scrolling down. This is partly solved by the scroll to top button. Still if you want to search something you will have to be on the top of the page. 

After evaluating the site ourselves, we did some tests with the other groups. We presented them with some tasks which they tried to execute. Most of these succeeded without any problems. Sometimes however there was some confusion about which icon represented which task. For example the testpersons sometimes confused uploading a pin from the desktop or from an URL. But no major problems were discovered and all tasks were accomplished in the given time. These tests may be not entirely accurate, because all of the testpersons already knew the site quite good.

We can conclude that Pinterest is quite a good website for its purpose. People who want to gather more photos, videos or slides on a specific subject won’t be disappointed. Our personal need to discover this extra information isn’t that urgent, so we probably won’t use Pinterest in the future again.