Page History

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 the user.

After registration, first time users can import their bookmarks from their current browser by selecting desired browsers and clicking on 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.

In this design we tried to combine different features from different designs from GR2. Majority of the page is occupied by visual representations of the bookmarks. On the left of the page, current folders are displayed. Two default folders are All and Shared. Folder All contains all of the bookmarks, while Shared contains bookmarks that have been shared with the user. Users can simply search for desired bookmarks by entering the name of the bookmark or a keyword into the Search field, after which all of the bookmarks that fulfill the search criteria will be displayed bellow. 

Users can easily create new folders by clicking on the plus button (bottom left of the screen), which will create a folder icon in which they can enter the name. (The next picture shows the new folder Classes created) 

Users can delete folder/bookmark by clicking the X on the bookmark picture or X on the folder icon. If a user tries to delete a folder, a warning message is displayed that asks the user to confirm his/her decision. 

My Account button would lead user to a page where he can set personal information as well as change password and other preferences. This behavior was not in the focus of our prototype testing because we thought that it is quite standard across web. 

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 current folder. Users can change directory of the bookmark by simply dragging and dropping a bookmark into a desired folder. 
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.

When the user wants to share a bookmark, he can enter the email of the person he wants to share it with, and click Share. If the button Share is clicked on before email address is entered, a message is displayed telling user to enter the email address before deciding to share.

Image Added

Image Added