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.

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.

User #1

• Easily found the way to sign-up
• Had no trouble importing bookmarks during sign-up
• Took a long time to figure out how to import more bookmarks once logged-in

• Quickly and easily found how to add/delete folders
• When adding a bookmark to a folder, was looking in the folders separation for a button instead of the separation where the bookmarks are displayed. 
• Interacting and searching through to folders was fast and easy.
• When deleting a folder, expected an alert/confirmation window.

• Easily found how to share a bookmark.
• Was clear about the information necessary for sharing.
• Expected an alert/confirmation when hitting the "share" button.

User #2

• When creating an account was not sure whether the "Name" box asks for the actual name or the username.
• Is not sure how to import more bookmarks when already logged in.

• When adding a new bookmark, thought of putting the link to the webpage in the "Name" box instead of the URL box. 
• When moving a bookmark from one folder to the other by drag and drop, was not sure whether the bookmark gets removed from the original folder or just copied to the new one.

• Could easily find how to share a bookmark
• Was not sure if it was possible to share a folder.
• Expected an alert/confirmation when hitting the "share" button.

User #3

• Tried to click on the website description steps from the intro page.
• Was actually able to import more bookmarks when already logged in.

• Thought that the search box searches in the Web and not through the bookmarks. 
• Expected some feedback that the URL worked when adding a new bookmark.
• When trying to view all the folders, tried to select all the folders or do an empty search instead of selecting the "All" folder.

• Took some time to locate the share button
• Realized how share works once the button was located.
• Was unclear about the function of the share button, i.e. does it share a bookmark or the folder the user is in?

User #4

• Easily able to sign-up and get to work.
• Expected an “import bookmarks from other browsers” option in the “create a new bookmark” window. (this user actually gave us the idea to put the import option inside the window for adding bookmarks (as seen in the images of the prototype))

• Unclear about when a bookmark is selected.  Expects the selected bookmark/folder to have highlights around it.
• Would like to see a drop-down list titled “IN” that would at any point display the folder the viewed bookmark is and give an easy way to change to another folder.

• Happy with the sharing tools.

User #5

• Took some time to find the importing options once the account was created.

• Couldn’t understand how to change the name of the bookmark. The user thought he should double/right click on the whole bookmark in order to change its name.
• Didn’t know how to move bookmarks from one folder to another, so he tried to delete the bookmark, and then create it again in the new folder.

• Wanted to have a list of contacts to share the bookmarks with instead of having to go lookup the e-mail address.

User #6

• Tried to click on the textboxes titled 1,2,3 explaining the steps need to start using the website.

• Found bookmarking a webpage tedious because the user had to open the website in another window, copy the URL come back to our website and paste it.
• Wasn’t sure whether the “x” at the top of the bookmark window meant close or delete.
• Unclear about whether drag and drop takes you to another folder or keeps you in the current one.
• Wanted an UNDO option.

• Wasn’t sure who he is supposed to share his bookmarks with. With himself, friends or what? 
  

Error

• Users complained how they couldn't recover folders they have deleted

• In our second iteration, when a user tries to delete a folder, a warning message is displayed that asks user to confirm his decision

Visibility

• Users took long time to figure out how to import bookmarks from other browsers once signed up
• Users weren't clear which folder they are in or which bookmark is selected, which made them confused when they were supposed to perform various actions:share a bookmark(which bookmark), drag and drop the bookmark into the folder(but where are we now?)

• In our first iteration we envisioned “Import from other browsers” to be placed in My account settings. However, that wasn't visible enough for users. After the suggestions from the users during the second iteration we decided to have import button that leads the user to the adequate page as an option every time the user clicks on Add bookmarks and wants to add new ones. Then user can either choose to type in info about a single bookmark, or can click on the import button that would enable him to import bookmarks from other browsers.
• We added bookmark and folder selection highlights to help them see what's the state of the system and where are they now

Learnability

• Most of the users, when asked to share a bookmark would automatically click on the Share button and nothing would happen because they haven't typed in the email address of the recipient
• Many users expected an alert/confirmation when sharing a bookmark.

• We decided to make this process easier to figure out, so that when the user clicks on Share without typing anything into the email box, little message is displayed explaining what the user is supposed to do
• When a bookmark is shared with someone, a message/confirmation is displayed saying "you shared the bookmark "bookmark name" with "e-mail"".

When a user wants to add a bookmark, if he doesn't know the URL by hearth (which is the most common case), he will have to open up a new tab in his browser, find that webpage, copy the URL and paste it into the proper field inside our application. Very tedious!

Our solution would be to have google search as a part of our application, on the page that opens up when the user clicks on Add bookmark. Then user can find the desired page, and simply click on it to bookmark it. Much more efficient + no need to leave our application.

Similar problem happens with friend's emails. User needs to remember the email, or copy paste it form somewhere else.

Two possible solutions:

• have application remember emails or even have possibility to import contacts the same way we imported bookmarks. That way, user can start typing, or have a drop list to choose from.
• The second possibility, that can be implemented in combination with the previous solution as well, is to have Friends field to the left of the screen, together with our Folder field. Friends field would contain all the friends, and user could simply share bookmarks by drag and dropping the bookmark onto one of his friends.

Users are not sure in which folder they are currently in when they are searching.

We could have a drop-down list titled IN next to the search box that shows which folder you are searching.

The only way to change the directory of the bookmark is drag and drop, which is not always visible.

Even though most of our users were able to figure this out, it might become a problem with non tech savvy users. We should test non-tech savvy users and possibly add an alternative way for moving the bookmarks between the folders.

Users try to click on the Step I, Step II and Step III on our introductory page.

Make Step I, Step II, Step III clickable, and with the click the video would show up, demonstrating particular Step directly on our application.

The "x" button on top of the bookmarks can be thought of as "close" instead of "delete".

Warning if the bookmark is being deleted. That would increase the learnability of this feature.

Even with the confirmation messages errors such us unintentionally deleting a folder/bookmark are possible.

Introduce an UNDO option if further testing confirms its necessity.