This project is to seek a solution for seamless access and sharing all the bookmarks. The application should be available to FireFox, Google Chrome and other browsers and used as a plug-in for adding bookmarks. In the meantime, users can view their bookmark links on Android, iPhone and iPad devices with this plug-in.
Human-centered Design
E-Bookmark
Interface Design
01
RESEARCH
Problem Finding
Human-centered Design
E-Bookmark
Interface Design
01
RESEARCH
Concept Feature
Human-centered Design
E-Bookmark
Interface Design
01
RESEARCH
Competitors Browser
Website
Firefox
Safari
From Firefox, user can easily and quickly save bookmarks, but it takes time to organize.
Top sites view in Safari can provide thumbnail and screenshot to preview the bookmarks.
Delicious.com
Reddit.com The site lists a huge collection of unique websites within a variety of diverse and entertaining category options.
Delicious.com allows users to share and save their favorite bookmarks in one centralized place.
Target Group I interviewed several people who are from different ages and different way of using current bookmarks
Inspiration Organizing Well
Help these group of people move up here.
Less Frequently on Internet
Students Designer Business people Housewives The senior
Human-centered Design
More Frequently on Internet
Not Organized
E-Bookmark
Interface Design
01
PERSONA
User Goal:
Meet Stephanie Age : 24 years old Occupation : Student Education Level : College
Scenario:
Stephanie does a lot of online research; she always seeks a simple, effective way to manage projects by saving a lot of links, images, videos and more documents online.
Scenario: User Goal:
Meet Jeff Age : 41 years old Occupation : Project Manager Education Level : College
As a manager, Jeff takes charge of several projects. On each of the projects, he saved a few related links in different bookmark folders. He will also delete some of the folders if the project is killed.
User Goal:
Meet Susan Age: 67 years old Occupation: Retired Education Level: College
Human-centered Design
Scenario:
Susan only browses the Internet for an hour a day, and she usually checks her email, reads some notifications from her city about gardening information that her friends shared.
E-Bookmark
Interface Design
01
PERSONA
User Goal:
Add
Meet Stephanie Age : 24 years old Occupation : Student Education Level : College
Scenario:
Stephanie does a lot of online research; she always seeks a simple, effective way to manage projects by saving a lot of links, images, videos and more documents online.
Scenario: User Goal:
Meet Jeff Find
Age : 41 years old Occupation : Project Manager Education Level : College
Share
Meet Susan Age: 67 years old Occupation: Retired Education Level: College
Human-centered Design
As a manager, Jeff takes charge of several projects. On each of the projects, he saved a few related links in different bookmark folders. He will also delete some of the folders if the project is killed.
User Goal:
Scenario:
Susan only browses the Internet for an hour a day, and she usually checks her email, reads some notifications from her city about gardening information that her friends shared.
E-Bookmark
Interface Design
01
PAPER PROTOTYPE
Human-centered Design
E-Bookmark
Interface Design
01
PAPER PROTOTYPE
Human-centered Design
E-Bookmark
Interface Design
01
PAPER PROTOTYPE
Human-centered Design
E-Bookmark
Interface Design
01
USER TESTING
Concept Development Here is the process of E-Bookmarks developing. After paper prototype, I tried to change the concept more focus on how users can quickly save the bookmark in less steps. As a result of user testing, I got a lot of valuable feedback, so I tried to analysis them by categories of content, navigation, action and features, and followed those comments to enhance E-Bookmarks more usability.
Iteration 1 - Initial Wireframe
Iteration 2 - Developing in Process
Iteration 3 - Refined Wireframe
Major change is focus on the whole concept, how to help users easily save the bookmarks when they browse the website, instead of designing a website to let users organized their saved bookmarks.
Following the user feedback, re-layout several pages for search, saving the setting of bookmark. Adding feature of reviewing offline screenshot. Also, friends sharing is enhanced, which means users in a group can edit the same bookmark folders for recommendation.
Adding search bar by selecting the categories, and offering more spaces for searching results. Another featured changed is to review the details of each saved bookmark by pop-up windows when mouse is over.
Human-centered Design
E-Bookmark
Interface Design
01
USER TESTING
Feedback Persona #1
Persona #2
Persona #3
Content
Content
Content
- Color label is very useful for people to remind of their saving. - Name changing option depends on different personal preference. - Combination of typing and selecting from list will be a good solution for finding tags. - Tell users all the settings they can edit, and they can choose to change what they want. - Editing URL is unnecessary. - Should be careful about default saving.
Maybe adding an expanded view to see more bookmarks at one time. Since the color-coded bookmarks, why not search by color to filter the results. - Avoiding repeated similar tags. Also users sometimes want to know all the tags they have. - Users may want to customize the searching methods by their habits.
- What if people share the same website by different names. - Showing the details of a saved bookmark is necessary for users to preview and edit it easily. Also, highlight or pop-up window for details will be a good concern. - Visualized and colored some of the contents will be beneficial for figure out the interface.
- The majority of participants rated navigation system as “easy” and organization of the site as “clear”. - Drop down menu for search option. - Most of people like horizontal layout which will not cover the main content of the website they are visiting.
- Friends shared list is ineffective and ignorable by confusing navigation. - Navigation in friend-sharing page is hardly clear to search the saved bookmarks. It should be simplified button to be easily navigated.
Navigation
- The majority of participants rated navigation system as “easy” and organization of the site as “clear”. - Tag selecting is a little bit small and confuses user at the first time. - Hierarchy and structure of the tags will be efficient for searching.
Action
Navigation
Action
Features
- Note viewing button is too small and not intuitive for users to get access to see the notes. It should offer more space and mouse-over effect would be nicer to present the information. - Adding and finding bookmarks button is a little bit confusing. Maybe one button is enough to achieve these two functions.
- To read later can be easily understood, and users would like to have it to help them saved the temporary websites. User also want to keep it even they finished reading. - Should consider more about how to adding new folder and tag. - Add another save button for saving the same setting as previous action.
- Tags search is effective to find the specific website. - View the old and new version of the website is useful, especially for news and blogs. - At the right side of the search, the system could provide a recommendation or pick by lucky function.
- Two plug-in buttons is not obvious enough to show what exactly they are represented. - Visualized some of the buttons will be helpful for recognizing.
Human-centered Design
Features
Navigation
Action
- Instead of open button, users are willing to click the bookmark thumbnail or address to open the website directly. - When the setting is changed, users expect to get a feedback to save what they have done.
Features
- Sharing bookmarks with friends is a valuable feature for most of the users. - Integrating the searching by time with calendar will be more efficient, especially when users have no clue to find what they want.
E-Bookmark
Interface Design
01
WIREFRAME
General Saving
Human-centered Design
Expandable Setting Menu
Tag Selecting
E-Bookmark
Interface Design
01
WIREFRAME
General Saving
- Add another save button for saving the same setting as previous action. - Color label is very useful for people to remind of their saving. - Visualized some of the buttons will be helpful for recognizing. - Tell users all the settings they can edit, and they can choose to change what they want.
Human-centered Design
E-Bookmark
Interface Design
01
WIREFRAME
Expandable Setting Menu
- Editing URL is unnecessary. - Tell users all the settings they can edit, and they can choose to change what they want. - Save more space for website.
Human-centered Design
E-Bookmark
Interface Design
01
WIREFRAME
Tag Selecting
- Combination of typing and selecting from list will be a good solution for finding tags.
Human-centered Design
E-Bookmark
Interface Design
01
WIREFRAME
Search Menu
Human-centered Design
Results Layout
offline screenshot
E-Bookmark
Interface Design
01
WIREFRAME
Search Menu
- Drop down menu for search option. - Maybe adding an expanded view to see more bookmarks at one time.
Human-centered Design
E-Bookmark
Interface Design
01
Wireframe
Results Layout
- Note viewing button is too small and not intuitive for users to get access to see the notes. It should offer more space and mouse-over effect would be nicer to present the information. - Drop down menu for search option. - Maybe adding an expanded view to see more bookmarks at one time.
Human-centered Design
E-Bookmark
Interface Design
01
WIREFRAME
Offline Screenshot
- Find a solution to avoid saving the same website repeatedly. - View the old and new version of the website is useful, especially for news and blogs.
Human-centered Design
E-Bookmark
Interface Design
01
WIREFRAME
Saved Bookmark Reviewing
Human-centered Design
Details Editing
Bookmarks Sharing
E-Bookmark
Interface Design
01
WIREFRAME
Saved Bookmark Reviewing
- Integrating the searching by time with calendar will be more efficient, especially when users have no clue to find what they want.
Human-centered Design
E-Bookmark
Interface Design
01
WIREFRAME
Details Editing
- Visualized and colored some of the contents will be beneficial for figure out the interface. - When the setting is changed, users expect to get a feedback to save what they have done. - Navigation in friend-sharing page is hardly clear to search the saved bookmarks. It should be simplified button to be easily navigated.
Human-centered Design
E-Bookmark
Interface Design
01
WIREFRAME
Bookmarks Sharing
- Note viewing button is too small and not intuitive for users to get access to see the notes. It should offer more space and mouse-over effect would be nicer to present the information. - Instead of open button, users are willing to click the bookmark thumbnail or address to open the website directly.
Human-centered Design
E-Bookmark
Interface Design
01