Our introductory page. This is the first thing the user sees when the web application is opened. Three little boxes Step I, Step II and Step III explain in brief what this web app is about and what it offers. After the iterations we realized that the users have hard time locating the "sign-up" button at the top right of the screen so we moved it down and made it huge!

First time users can register by clicking on the Sign Up and entering the basic information about themselves. We made the sign up form much bigger than it was in our original prototype to make sure that the registration of the users goes as smooth as possible. 

After registration, first time users can import their bookmarks from any of the browsers they use by selecting any of the provided options and clicking on the Continue button.

The next time users visit the page, they can sign in by simply clicking on the Log In field and providing their email and password. We decided to not have the log-in button and window be as big as the registration button and window are since we already expect the registered users to know how to operate the web app.

The main page consists of three main parts: the folders section(on the left), the bookmarks section(in the center) and the contacts section(on the right). The folders and and the contacts sections are labeled appropriately but the bookmarks section is not to allow more space to display the bookmarks. When the user first enters the website, there will be a default bookmark in the All folder which we believe will be enough information for the users to realized what the middle section is for.

Users can add new folders to the folders section by pressing the x button. We believe that the green color of the button and the trash sign convey enough information to help the users realize what it is for. Once the press it, a small dialog box appears asking for the name of the new folder. If create is pressed without entering a name, an alert appears asking to enter a name. Or they can just cancel the creation process by pressing cancel.
In our computer prototype we had 3 folders in each row(instead of 1) and that made the folders too small to click and restricted the space available for the folder's name. Even though that provided good visibility because you could generally see all of your folders without having to scroll, we realized that most users are not going to have more than 5-7 folders, so it made sense to make the folders bigger and arrange them in one column.

Users can delete folder/bookmark by clicking on the trash icon on the bottom left. If a user tries to delete a folder, a warning message is displayed that asks the user to confirm his/her decision. We originally had an "x" button instead of a trash icon but we realized that the trash can is a better metaphor than the "x" button.  

The All folder that contains all the bookmarks of the user can not be deleted so if the user selects it and presses delete nothing happens. We considered displaying an alert informing the user that the All folder can not be deleted but given that alerts are annoying we thought that we should avoid them and let the user figure out that the "All" folder can not be deleted by just trying to delete it once or twice.

When the user wants to create a new bookmark, he can click on Add Bookmark and the following page will be displayed. The user can specify a Name and a URL of the bookmark, and finish off by clicking Create which will create that bookmark inside of the currently highlighted folder. Users can add the bookmark in other folders to by dragging and dropping it on other folders.
There is also the option of importing bookmarks from the browser, which would lead the user to the dialog similar to the one at the beginning, when user also had an option to import bookmarks from different browsers.

For the contacts, we have three buttons. Add, Delete, and Share. The add/delete buttons add/delete contacts. To add a contact one requires a name and an e-mail address. 

The add and delete contact button were designed to resemble the appropriate buttons in the folders section. Previously we just had plus and minus signs for add and delete and after the iterations we concluded that that's not very intuitive. 

If the name or the username of the contact are not entered while creating a contact, the system alerts the user about this and asks to enter the appropriate information in order to be able to create a contact.

When the user wants to share the currently viewed bookmark they can select as many contacts as they like and press the share button. A little dialog box will appear informing the user that they shared the bookmark with the given number of contacts. 

For our computer prototype we didn't have any feedback when share was pressed and the users were confused whether the share was successful or not. Thus, we made sure to add this notification.

A search box is also available that provides real time search through all the folders. The name of the bookmarks is used to perform the search. To inform the user that the search is conducted in all the bookmarks, when the user clicks inside the search-box, the All folder becomes highlighted.

If the search doesn't match any existing bookmark, a message appears in place of the bookmarks notifying the user about this.