TECHNICAL UNIVERSITY of CRETE Dept.christina/documents/myAgendaReport.pdf · 39. Hide Recommendation ... MySpace was started to assist networking among musicians, Businesses use facebook

AIS419: Web Information Systems, Spring 2011

1 Web-based Professional Networking System by Christina Christodoulaki

TECHNICAL UNIVERSITY of CRETE – Dept. of ECE Laboratory of Distributed Multimedia Information Systems and Applications (TUC/MUSIC) AIS419: Web Information Systems, Spring semester 2011

Technical report on the Design and Development of a

Web-based Professional Networking System

Author: Christodoulaki Christina

ΑΜ 2006030006





Table of Contents

Table of Contents…………………………….…………………….……………………..……………….…………………….…………….3

Chapter 1: Introduction ......................................................................................................................9

Chapter 2: Assignment description .....................................................................................................9

Chapter 3: Requirements and Assumptions ...................................................................................... 10

3.1. System Requirements ................................................................................................................. 10

3.2. Assumptions ............................................................................................................................... 11

3.2.1. Account Registration ................................................................................................................. 11

3.2.2. Profile ........................................................................................................................................ 11

3.2.11. Suggestions ............................................................................................................................. 14

3.2.12. Search ...................................................................................................................................... 15

3.3. User Personas ............................................................................................................................. 15

David Stone, Pediatrician .................................................................................................................... 15

Brad Crenshaw, University Graduate .................................................................................................. 16

Clarissa Evans, Freelance Designer ..................................................................................................... 16

Juan Gonzalez, Chef ............................................................................................................................ 17

Jens Simonsen, Dairy Farmer .............................................................................................................. 17

Chapter 4: Use Case Diagrams .......................................................................................................... 18

Chapter 5: Use Cases ........................................................................................................................ 27

1. Sign up ......................................................................................................................................... 29

2. Sign in .......................................................................................................................................... 30

3. Sign out ....................................................................................................................................... 30

4. Delete Account ............................................................................................................................ 30

5. Search for Users .......................................................................................................................... 30

6. Browse User Profile ..................................................................................................................... 30

7. Edit name, email, password ........................................................................................................ 30

8. Edit Profile Picture ..................................................................................................................... 30

9. Edit Personal Information ........................................................................................................... 30

10. Edit Privacy Settings ................................................................................................................ 31

11. Add Education ......................................................................................................................... 31



12. Edit Education ......................................................................................................................... 31

13. Delete Education ..................................................................................................................... 31

14. Add Experience ....................................................................................................................... 31

15. Edit Experience........................................................................................................................ 31

16. Delete Experience ................................................................................................................... 31

17. Add Honors ............................................................................................................................. 31

18. Edit Honors .............................................................................................................................. 31

19. Delete Honors ......................................................................................................................... 32

20. Add Skills ................................................................................................................................. 32

21. Edit Skills ................................................................................................................................. 32

22. Delete Skills ............................................................................................................................. 32

23. Add Collaboration Preferences ............................................................................................... 32

24. Edit Collaboration Preferences ............................................................................................... 32

25. Delete Collaboration Preferences ........................................................................................... 32

26. Add Hobby ............................................................................................................................... 32

27. Edit Hobby ............................................................................................................................... 32

28. Delete Hobby .......................................................................................................................... 32

29. Add Address ............................................................................................................................ 33

30. Edit Address ............................................................................................................................ 33

31. Delete Address ........................................................................................................................ 33

32. Recommend Education ........................................................................................................... 33

33. Request Education Recommendation..................................................................................... 33

34. View Education Recommendation .......................................................................................... 33

35. Recommend Experience ......................................................................................................... 33

36. Request Experience Recommendation ................................................................................... 34

37. View Experience Recommendation ........................................................................................ 34

38. Show Recommendation .......................................................................................................... 34

39. Hide Recommendation ........................................................................................................... 34

40. Delete Recommendation ........................................................................................................ 34

41. Add User as Contact ................................................................................................................ 34

42. Delete Contact ........................................................................................................................ 34

43. Tag Contact ............................................................................................................................. 34



44. Un-tag Contact ........................................................................................................................ 35

45. Search Contacts ....................................................................................................................... 35

46. View Pending Contacts ........................................................................................................... 35

47. View Contact Requests ........................................................................................................... 35

48. Delete Contact Requests (From me) ....................................................................................... 35

49. Delete Contact Requests (To me) ........................................................................................... 35

50. View Suggested Contacts ........................................................................................................ 35

51. Invite Users to join myAgenda ................................................................................................ 35

52. Send Message ......................................................................................................................... 36

53. Delete Received Message ....................................................................................................... 36

54. Mark Message as Read ........................................................................................................... 36

55. Mark Message as Un-read ...................................................................................................... 36

56. Search Inbox ............................................................................................................................ 36

57. View Received Message .......................................................................................................... 36

58. View Outbox ............................................................................................................................ 37

59. Delete Sent Message ............................................................................................................... 37

60. Search Outbox ......................................................................................................................... 37

61. View Sent message ................................................................................................................. 37

62. Request User Referral ............................................................................................................. 37

63. View Referral Requests (Sent) ................................................................................................ 37

64. View Referral Requests (Received) ......................................................................................... 37

65. Cancel Sent Referral Request .................................................................................................. 37

66. Send User Referral .................................................................................................................. 37

67. Delete Referral Request (Received) ........................................................................................ 38

68. View Referral (Sent) ................................................................................................................ 38

69. View Referral (Received) ......................................................................................................... 38

70. Delete Referral (Sent) ............................................................................................................. 38

71. Delete Referral (Received) ...................................................................................................... 38

72. Create Blog .............................................................................................................................. 38

73. Edit Blog .................................................................................................................................. 38

74. Add Article to blog .................................................................................................................. 38

75. Edit blog Article ....................................................................................................................... 38



76. Edit Article Visibility ................................................................................................................ 39

77. Delete Article .......................................................................................................................... 39

78. Accept comment on blog article ............................................................................................. 39

79. Delete comment on blog Article ............................................................................................. 39

80. Edit Blog Visibility .................................................................................................................... 39

81. Search for Blog ........................................................................................................................ 39

82. View Blog ................................................................................................................................. 40

83. View Blog Article ..................................................................................................................... 40

84. Comment on Blog Article ........................................................................................................ 40

85. Search for Group ..................................................................................................................... 40

86. Create Group ........................................................................................................................... 40

87. Request Join Group ................................................................................................................. 40

88. Cancel Group Join Request ..................................................................................................... 41

89. View Groups ............................................................................................................................ 41

90. Leave Group ............................................................................................................................ 41

91. View Group Members ............................................................................................................. 41

92. View Pending Group Member Requests ................................................................................. 41

93. Accept Group Member Requests ............................................................................................ 41

94. Decline Group Member Requests ........................................................................................... 42

95. Delete Group Member ............................................................................................................ 42

96. Start Discussion ....................................................................................................................... 42

97. View Discussion ....................................................................................................................... 42

98. Delete Discussion .................................................................................................................... 42

99. Add Comment to discussion ................................................................................................... 42

100. Delete Comment from Discussion .......................................................................................... 42

101. Give a member Administrator rights ...................................................................................... 42

102. View New Notifications ........................................................................................................... 42

103. Set Notification Preferences (Activate, Deactivate) ............................................................... 42

104. Delete Notifications ................................................................................................................ 43

Retrieve password .............................................................................................................................. 43

Connect to users .................................................................................... Error! Bookmark not defined.

Delete connections ................................................................................ Error! Bookmark not defined.



Suggest a connection .......................................................................................................................... 43

Recommend a connection .................................................................................................................. 43

Get a recommendation .......................................................................... Error! Bookmark not defined.

Refer a connection ................................................................................. Error! Bookmark not defined.

Ask for a user referral ............................................................................ Error! Bookmark not defined.

Send a message ...................................................................................... Error! Bookmark not defined.

View message......................................................................................... Error! Bookmark not defined.

Follow a blog .......................................................................................... Error! Bookmark not defined.

Administrate my blog ............................................................................. Error! Bookmark not defined.

Post Blog Entry ....................................................................................... Error! Bookmark not defined.

View blog comments .............................................................................. Error! Bookmark not defined.

Join a group ............................................................................................ Error! Bookmark not defined.

Administrate my group .......................................................................... Error! Bookmark not defined.

Edit Profile .............................................................................................. Error! Bookmark not defined.

Edit Resume ........................................................................................... Error! Bookmark not defined.

Change Settings ...................................................................................... Error! Bookmark not defined.

Chapter 6: GUI Storyboards .............................................................................................................. 44

Sign in – Sign up .................................................................................................................................. 44

Search .................................................................................................................................................. 46

Edit Profile Info (Picture, Basic Info, Education) ................................................................................. 47

View, Send Message and Quick Connect ............................................................................................ 48

Administrate Contacts ........................................................................................................................ 49

Blog ..................................................................................................................................................... 50

Check Site News .................................................................................................................................. 51

Recommendations (request and send) ............................................................................................... 51

Request Referrals ................................................................................................................................ 52

Chapter7: ......................................................................................................................................... 53

Paper Prototypes ............................................................................................................................. 53

Chapter 7: ........................................................................................................................................ 78

UML Class Diagram .......................................................................................................................... 78

Chapter 8: ........................................................................................................................................ 80

Entity Relation Model ...................................................................................................................... 80



Chapter 9: ........................................................................................................................................ 81

User Interface Guidelines ................................................................................................................. 82

9.1. Grid: ............................................................................................................................................ 82

9.2. Aesthetics: ................................................................................................................................... 84

9.3. Vocabulary/Terminology/Icons: ................................................................................................. 84

9.4. Colors: ......................................................................................................................................... 85

9.5. Fonts: .......................................................................................................................................... 86

9.6. Buttons: ....................................................................................................................................... 86

9.7. Links: ........................................................................................................................................... 87

9.8. Forms: ......................................................................................................................................... 88

9.9. Tables: ......................................................................................................................................... 88

9.10. Visibility of system status: ....................................................................................................... 89

9.11. User Control: ........................................................................................................................... 90

9.12. Error Prevention: ..................................................................................................................... 90

9.13. User Guidance: ........................................................................................................................ 90

9.14. Primary Actions: ...................................................................................................................... 91

9.15. Screen Real-Estate: ................................................................................................................. 92

9.16. Flow Diagrams ......................................................................................................................... 93

Use Case 1: Login ................................................................................................................................ 93

9.17. System Architecture: ............................................................................................................... 94



Chapter 1: Introduction

It is the era of the Internet. Businessmen, professionals and scholars spend a large portion of their day

on the internet. Even when they are not on the internet, they most likely have easy access, what with

the culture of smart-phones, tablets etc. Social Media is at its prime, with people sharing more and more

of their life online. People use apps to stay connected with friends, date, share music, pictures, product

reviews, interesting web pages, the list goes on. There are also web apps that are used for professional

networking. MySpace was started to assist networking among musicians, Businesses use facebook and

twitter for marketing purposes, and LinkedIn is an upcoming social media mogul for professional

networking.

Chapter 2: Assignment description

In this assignment we are requested to create a Web Information System than offers social networking. Typically such services offer the creation of virtual communities of individuals with common interests, activities or people interested in using the interests and activities of other people who live in other areas. The system I have designed and developed has as its aim to support trust networks for professionals. This service will be offered by an imaginary company and its aim will be to help professionals from different categories of professions (information technology, medicine, economics etc.) to participate in a professional network based on professional trust potentially leading to collaboration. This will allow the collaboration between professionals based not only on their skill and experience description but also the trust established between them. The ultimate goal is the establishment of the best possible collaborations (through job offers and requests supported by online resumes and trust relationships).

I have named this site myAgenda. Professionals often keep all business related issues in contact books or agendas, so it seemed like a good connection to the real world.

Figure 1. Proposed Site Logo



Chapter3: Requirements and Assumptions

3.1. System Requirements

1. User Registration

User must be able to register and create an account with minimum information and demographics.

2. Create and administer Personal Profile

Users have personal profiles with full resume, collaboration preferences, access to account and

notification settings.

3. Administrate and Expand Professional Network

Each user wishes to keep track of other professionals related to his profession in some way. He thus

creates personal networks by “connecting” to other users, an action that requires a mutual acceptance

of the link. A connection can be put into context by the description of colleague, former colleague,

friend, student, etc and can be accompanied by involved user comments (user recommendations).

Network expansion is to be enhanced and recommended by the system, weighing relevance of industry,

employment, residence and educational institutions. User is also to be able to invite potential or exiting

users via email. If user A invites user B to use the web site and User B accepts they are automatically

connected.

4. Request of private Referral Letter

If a user is interested in collaborating with another user he can ask other members of that user’s

professional network for a private referral letter. Both the request and the letter are private and seen

only by the sender and the receiver.

5. Search for colleagues

User searches for other users to expand his network based on demographics

6. Search for collaborators

User is searching for other users to collaborate based on professional information filtering.

7. Communication between professionals



System offers each user an inbox for messages and the ability to compose and send messages to other

users

8. Article Publishing

Personal blogs serve to enhance professional honoraria and knowledge sharing. Users are able to

publish articles or comment on blogs.

9. View newsworthy network events

Users are informed of network events.

3.2. Assumptions

3.2.1. Account Registration

Minimum Information required is a valid email address and a secure password of valid length and

characters. Minimum demographics required is a full name.

3.2.2. Profile

A user’s profile holds all his relevant information and consists of the following:

Profile

1 Name 2 Photo 3 Job title 4 Industry 5 Residence 6 Email 7 Websites 8 Resume 9 Notifications

10 Messages 11 Recommendations 12 Contacts 13 Blog 14 Showcase 15 Referrals

3.2.3. Resume

Resume consists of:

Resume

1 Education 2 Experience 3 Honors 4 Skills 5 Collaboration Preferences



6 Hobbies 7 Addresses 8 Recommendations

3.2.4. User Networks

User Networks are made up of circles of growing diameter. Users with immediate connections to a user

A are on a circles or radius 1 around A. Users connected to users on circle 1 are placed on a circle of

radius 2 around user A. User A can request connection with these users. Users connected to users of

radius 2 are on a circle of radius 3 around user A and make up the final outer layer of User A’s network.

User A can connect to layer.

A user can customize what is seen by his connections, depending on whether they are immediately

connected (radius 1) or not. Default settings should be such that connections of radius 1 can view all

profile information, write referrals, send messages and compose recommendations. Connections of

radius 2 can do all the above except write referrals. Connections of radius 3 can view minimal profile

information, and send user messages. A connection of radius 1 is established with request for

connection and can be followed by an introduction by a linking user.

Figure 2 Social Network Graph

All other Users of the site are accessible only by search results, and connection is achievable after

sending a request for connection.

Users can keep their contacts organized by sorting them into categories (aka tagging them)

Currently default functionality is dictates that users must be immediately connected to have any

interaction. However, the database supports a future privacy customization.



3.2.5. Messaging

Messages can be sent between any users of the site, connected up to a radius 3. If however a user does

not want people to be able to send him messages he can customize message settings and limit the

people who can message him, thus reducing spamming.

Message fields

1 Recipients 2 Subject 3 Body 4 optionally links and/or attachments (not implemented)

3.2.6. Recommendations

Recommendations have optional and obligatory fields. A recommender must specify a relationship so

recommendation can be placed in context. A test message with short description is prompted.

Recommendations consist of the following information:

Recommendation fields

1 Date 2 Recommender 3 Recommended 4 Activity of recommendation (education or occupation) 5 Status (visible, hidden) 6 the recommendation

3.2.7. Referrals

Referrals are messages sent by Users about users they are immediately connected to, and they have an

opinion about. A referral can be requested between users irrelevant of their connection degree.

3.2.8. Blogs

Every User may maintain at most one blog. Blogs are not customizable; they all follow a single layout. A

blog’s privacy settings can restrict readers to a customizable group of users, or expand to no restrictions

of any kind. Comments can be activated or not, and comments can be rejected or accepted,

automatically or manually.

3.2.9. Showcase (Recommended functionality)

A Showcase should give a user the ability to show off his work, with a series of photos, videos, links or

documents.

3.2.10. Network events

Newsworthy network events can be any of the following:

Newsworthy Events



1 A connection of network radius 1 updates/ changes profile information 2 A connection of radius 1 gets recommended 3 A connection of radius 1 recommends someone 4 A job offer is posted by someone I am connected to 5 A job offer of interest is posted (in my industry, close to where I live) 6 A blog I follow is updated 7 A connection I have updated his blog 8 An entry on my blog is commented on 9 A showcase I follow is updated

10 A connection I have updates his showcase 11 Two of my connections radius 1 are now connected 12 User receives Referral request 13 User receives Referral answer 14 I received invitation to connect with another user 15 My invitation to connect to another user was accepted 16 I received an invitation to become a member of a group 17 I was marked group administrator 18 Someone recommended me 19 A recommendation about me has been edited 20 Something I commented on has new comments 21 A connection I have suggested I connect with someone 22 A connection I have suggested a group 23 A connection I have suggested a blog 24 A connection I have suggested a job 25 A connection I have suggested a showcase

Types of newsworthy events can be flagged important, in news settings. When an important event takes

place, horizontal menu unseen event counter will accumulate.

3.2.11. Suggestions

System ought to support suggestions of two sorts:

1. System based suggestions

System should scan a user’s profile and search the database for possible matches that might interest the

user. Such matches can be:

People (based on users location, industry, job, preferences, contact information etc)

Groups (based on user’s interests, location, education, experience, groups user is already a

member of )

Blogs (based on user’s interests, industry, job, blogs followed by user)

Jobs (based on user’s location, industry, experience, education, skills, and job

advertisements user has posted)

Showcases (based on showcases the user is already following)

2. User based suggestions



Users can suggest People, Groups, Blogs, Jobs and Showcases to their contacts.

3.2.12. Search

User must be able to perform simple and advanced search for People, Blogs, Groups, Showcases and

Jobs. Search results should be ranked by order or relativity to the query made, and then alphabetically.

3.3. User Personas The web sites services are to be used by professionals looking to create a trust network with other

professionals. Goals and usage of such users differ by user type. Some typical users could be described

by the following Personas:

David Stone, Pediatrician

Uses the website to :

find colleagues, potential

collaborators

keep in touch with medical

community

publish papers/ earn honoraria

learn about colleagues

publications

learn about events

(conferences, seminars)

referrals to and from medical

organizations

share and learn about

clinical/medical information



Brad Crenshaw, University Graduate

Uses the website to:

keep in touch with fellow

students, professors, people he

met at conferences, worked

with on projects etc

collect recommendations from

people he worked with

wants to maintain a resume

with skills and personal history

that employers might relate to

keep informed about job offers

follow industry news

Clarissa Evans, Freelance Designer


Create a network of

photographers, designers,

Developers etc to collaborate

with.

showcase her work, link to

articles published by magazines

etc

blog about her work

explore career opportunities



Juan Gonzalez, Chef


keep in touch with former

employers, people and

organizations/businesses he

worked with

keep informed about job

opportunities

look for investors or partners to

open his own restaurant

Jens Simonsen, Dairy Farmer


connect with other farmers in

the area

manage cooperatives

connect with companies,

organizations

look for opportunities to

expand his business

keep up to date with industry

news

The above are random user personas and are not wholly representative of all user professions and

industries. In fact it would be safe to assume that a significant number of such a system’s users would

come from hi tech industries. Presumably most users are highly educated. It is shown that over a wide

range of professionals, there are common requirements to be met. Users wish to promote their work,

explore job and career opportunities, keep informed about industry news, and maintain a network of

users in same or collaborative industries. Users visit the site to enhance productivity, collaborate, and

become better at their work.

Any users of the system who rely on the site as a business tool would want immediate and easy access

to the site from their smart phone. Thus there is also a need for usable and efficient mobile interface.



Chapter 4: Use Case Diagrams

Site visitors enter the site with specific goals in mind. Given the functionality the site offers, there are a

number of use cases to be noted. The actors for these use cases are the site Users, and a variety of

subsystems. The Subsystems used are as follows:

i. User Management Subsystem

ii. Resume Management Subsystem

iii. Recommendation Management Subsystem

iv. Messaging Management Subsystem

v. Referral Management Subsystem

vi. Blog Management Subsystem

vii. Group Management Subsystem

viii. Notifications Management Subsystem

ix. Account Management Subsystem



Figure 3 – Profile Associated Use Cases

Figure 4 - Account Associated Use Cases



Figure 5 - Resume Associated Use Cases



Figure 6 - Networking Associated Use Cases



Figure 7 - Message Associated Use Cases



Figure 8 - Recommendation Associated Use Cases



Figure 9 - Referral Associated Use Cases



Figure 10 - Blog Associated Use Cases



Figure 11 - Group Associated Use Cases



Chapter 5: Use Cases

The various scenarios of use of this social networking platform can be singled out and described. These

scenarios have been named and described in the form of use cases, stating the goal the user wishes to

achieve and how he achieves it.

5.1. Use case Index table

Use Case Index table:

# Use Case

1 Sign Up 2 Sign In 3 Sign Out 4 Delete Account 5 Search for Users 6 Browse User Profile 7 Edit Name, email , password 8 Edit Profile Picture 9 Edit Personal Information 10 Edit Privacy Settings 11 Add Education 12 Edit Education 13 Delete Education 14 Add Experience 15 Edit Experience 16 Delete Experience 17 Add Honors 18 Edit Honors 19 Delete Honors 20 Add Skills 21 Edit Skills 22 Delete Skills 23 Add Collaboration Preferences 24 Edit Collaboration Preferences 25 Delete Collaboration Preferences 26 Add Hobby 27 Edit Hobby 28 Delete Hobby 29 Add Address 30 Edit Address



31 Delete Address 32 Recommend Education 33 Request Education Recommendation 34 View Education Recommendation 35 Recommend Experience 36 Request Experience Recommendation 37 View Experience Recommendation 38 Show Recommendation 39 Hide Recommendation 40 Delete Recommendation 41 Add User as Contact 42 Delete Contact 43 Tag Contact 44 Un-tag Contact 45 Search Contacts 46 View Pending Contacts 47 View Contact Requests 48 Delete Contact Requests (From me) 49 Delete Contact Requests (To me) 50 View Suggested Contacts 51 Invite Users to join myAgenda 52 Send Message 53 View Inbox 54 Delete Received Message 55 Mark Message as Read 56 Mark Message as Un-read 57 Search Inbox 58 View Received Message 59 View Outbox 60 Delete Sent Message 61 Search Outbox 62 View Sent message 63 Request User Referral 64 View Referral Requests (Sent) 65 View Referral Requests (Received) 66 Cancel Sent Referral Request 67 Send User Referral 69 Delete Referral Request (Received) 70 View Referral (Sent) 71 View Referral (Received) 72 Delete Referral (Sent) 73 Delete Referral (Received) 74 Create Blog 75 Edit Blog



76 Add Article to blog 77 Edit blog Article 78 Edit Article Visibility 79 Delete Article 80 Accept comment to blog article 81 Delete comment to blog Article 82 Edit Blog Visibility 83 Search for Blog 84 View Blog 85 View Blog Article 86 Comment on Blog Article 87 Search for Group 88 Create Group 89 Request Join Group 90 Cancel Group Join Request 91 View Groups 92 Leave Group 93 View Group Members 94 View Pending Group Member Requests 95 Accept Group Member Requests 96 Decline Group Member Requests 97 Delete Group Member 98 Start Discussion 99 View Discussion 100 Delete Discussion 101 Add Comment to discussion 102 Delete Comment from Discussion 103 Give a member Administrator rights 104 View New Notifications 105 Set Notification Preferences (Activate, Deactivate) 106 Delete Notifications

The indexed Use cases from the table above will now be explained with further detail.

1. Sign up

User arrives at site home and fills out sign up form.

User selects sign up.

User is transferred to welcome page, where he can start to create his network. User fills out

form to get his email connections, or writes names and emails or people he expects to find using

the site. User clicks find connections and system results are displayed.

User selects contacts to connect to and selects send connection requests.

User is prompted to fill out his profile information.



2. Sign in

User arrives at site home and fills out sign in form.

If System verifies email and password user is signed in.

3. Sign out

User clicks sign out link at top right corner of page. User is redirected to sign in page.

4. Delete Account

User clicks Settings from upper right corner of page header. User navigates left menu, and clicks

Close Account. User optionally fills out reasons for closing account, and clicks red close account

button.

5. Search for Users

User types name in search form on page header. User clicks search button. User navigates search

results to find the user he was looking for.

User clicks on advanced search. User fills out form with possible attributes the person he is looking

for might have. User clicks search button and looks through list of search results.

User navigates his contact list.

User navigates to his contact’s contact lists and browses through them.

User navigates to a group, and browses the member list.

6. Browse User Profile

User searches for a user (Use Case 5). User clicks the name of the user and if the user he is viewing

has privacy options that allow him to be viewed user is allowed to view the profile.

7. Edit name, email, password

User clicks Settings from upper right corner of page header. User is viewing Account Settings and

edits user account information form. User clicks Save button.

8. Edit Profile Picture


edits profile picture form. User clicks Save button.

9. Edit Personal Information


edits user description form. User clicks Save button.

User is viewing his profile. User clicks edit button on personal information card below the header.

User is transferred to account settings where he completes information as above.



10. Edit Privacy Settings

User clicks Settings from upper right corner of page header. User clicks Privacy Settings and selects

privacy settings of choice. User clicks Save button.

11. Add Education

User is viewing his profile resume. User clicks Add Education from Resume list. User clicks Add New

button and fills out education form and clicks Save.

User clicks Edit button at top right of Resume list. Edit Resume Page is opened by default at Edit

Education. User proceeds as above.

12. Edit Education


Education. User navigates to education in question and edits education information. User clicks

Save.

13. Delete Education


Education. User navigates to education in question and clicks delete. Popup opens requiring User

confirmation. User confirms delete and Education is successfully deleted.

14. Add Experience

User is viewing his profile resume. User clicks Add Experience from Resume list. User clicks Add New

button and fills out experience form and clicks Save.

User clicks Edit button at top right of Resume list. Edit Resume Page is opened and user clicks

Experience from left vertical menu. User proceeds as above.

15. Edit Experience


Experience from left vertical menu. User navigates to education in question and edits education

information. User clicks Save button.

16. Delete Experience

User clicks Edit button at top right of Resume list. Edit Resume Page is and user clicks Experience

from left vertical menu. User navigates to Experience in question and clicks delete. Popup opens

requiring User confirmation. User confirms delete and Experience is successfully deleted.

17. Add Honors

18. Edit Honors


Experience from left vertical menu. User navigates to education in question and edits education

information. User clicks Save button.



19. Delete Honors




20. Add Skills

21. Edit Skills

User clicks Edit button at top right of Resume list. Edit Resume Page is opened and user clicks Skills

from left vertical menu. User navigates to Skill in question and edits Skill information. User clicks

Save button.

22. Delete Skills




23. Add Collaboration Preferences

24. Edit Collaboration Preferences


Collaboration from left vertical menu. User navigates to Collaboration Preference in question and

edits Collaboration Preference information. User clicks Save button.

25. Delete Collaboration Preferences

User clicks Edit button at top right of Resume list. Edit Resume Page is and user clicks Collaboration

from left vertical menu. User navigates to Collaboration in question and clicks delete. Popup opens

requiring User confirmation. User confirms delete and Collaboration is successfully deleted.

26. Add Hobby

27. Edit Hobby

28. Delete Hobby

User clicks Edit button at top right of Resume list. Edit Resume Page is and user clicks Hobby from

left vertical menu. User navigates to Hobby in question and clicks delete. Popup opens requiring

User confirmation. User confirms delete and Hobby is successfully deleted.



29. Add Address

30. Edit Address

31. Delete Address

User clicks Edit button at top right of Resume list. Edit Resume Page is and user clicks Address from

left vertical menu. User navigates to Address in question and clicks delete. Popup opens requiring

User confirmation. User confirms delete and Address is successfully deleted.

32. Recommend Education

User is viewing a contact’s profile. User clicks orange recommend link at the bottom of the contact’s

Education he wishes to recommend. Recommend form is shown and user writes his

recommendation. User clicks submit button and recommendation is saved and now pending

approval.

User is viewing his own profile. User navigates to Recommendations on left vertical menu. User

clicks Write tab. User fills out about field by starting to type contacts name. User selects contact

from auto complete dropdown list. Contact’s education and experience are populated and user

selects the education he wants to recommend. User writes the recommendation and clicks send.

33. Request Education Recommendation

User is viewing his own profile. User clicks orange get recommendation link at the bottom of

education he wants to be recommended for. User fills out form that opens up by typing a contact’s

name and selection a contact that the auto complete populates. User clicks send request button

34. View Education Recommendation

User views his or a contacts Resume. The approved education recommendations are below each

listed education.

User views his profile. User clicks Recommendations and views the About Me Tab that is open by

default.

35. Recommend Experience

User is viewing a contact’s profile. User clicks orange recommend link at the bottom of the contact’s

Experience he wishes to recommend. Recommend form is shown and user writes his

recommendation. User clicks submit button and recommendation is saved and now pending

approval.

User is viewing his own profile. User navigates to Recommendations on left vertical menu. User

clicks Write tab. User fills out about field by starting to type contacts name. User selects contact

from auto complete dropdown list. Contact’s education and experience are populated and user

selects the experience he wants to recommend. User writes the recommendation and clicks send.



36. Request Experience Recommendation

User is viewing his own profile. User clicks orange get recommendation link at the bottom of

experience he wants to be recommended for. User fills out form that opens up by typing a contact’s

name and selection a contact that the auto complete populates. User clicks send request button

37. View Experience Recommendation

User views his or a contacts Resume. The approved experience recommendations are below each

listed experience.


default.

38. Show Recommendation


default. User checks the checkboxes beside the Recommendations he wants to be publicly shown

on their profile.

39. Hide Recommendation


default. User checks the checkboxes beside the Recommendations he wants to be publicly shown

on their profile.

40. Delete Recommendation


default. User clicks the trash can beside the Recommendations he wants to deleted. Confirmation

popup opens up, user confirms delete. Recommendation is deleted

41. Add User as Contact

User uses Search or Advanced Search to search for other Users. Users that are not connected have a

connect button beside the name. User clicks this button and connection request is sent to the user

in question.

User is browsing his contact’s contacts. Users that are not connected have a connect button beside

the name. User clicks this button and connection request is sent to the user in question.

User is browsing group members. . Users that are not connected have a connect button beside the

name. User clicks this button and connection request is sent to the user in question.

42. Delete Contact

User is browsing his contacts. Used chicks delete beside contact

43. Tag Contact

User is browsing contacts. User clicks orange add tag link at the bottom of contact description. Text

input appears, and user fills out the tag he wants to add.



User is browsing his contacts. User checks checkboxes of the users he wishes to tag. User clicks blue

tag button. Box appears with available tags, and orange add tag link at the bottom. User selects the

tags he wishes to add, or clicks the orange add tag button and fills out the name of the new tag he

wants to add.

44. Un-tag Contact

User is browsing his contacts. User views the tags below the contact in question, and clicks the x

beside the tag he wants to delete. Confirmation popup appears, user confirms delete tag and tag is

deleted.

45. Search Contacts

User has navigated to his Contacts using left vertical menu on his profile. User types in name of

contact he is searching for in search field at top right of contact tab. Contacts are filtered below to

show only matching names.

46. View Pending Contacts

User has navigated to his Contacts using left vertical menu on his profile. User clicks Pending tab and

sees which myAgenda users he has requested a connection with and that connection is yet to be

accepted or declined.

47. View Contact Requests

User has navigated to his Contacts using left vertical menu on his profile. User clicks Requests tab

and sees which myAgenda users have requested a connection with him.

User navigates to Notifications either from left vertical menu of from pin at top right of page header.

User can see if there are any recent contact requests he does not know of.

48. Delete Contact Requests (From me)

User is viewing Pending Contacts. User clicks cancel request button beside the user he wants to

delete contact request.

49. Delete Contact Requests (To me)

User is viewing Contact Requests. User clicks decline button beside user description to delete the

request from.

50. View Suggested Contacts

User has navigated to his Contacts using left vertical menu on his profile. User clicks Suggestions tab

and views system suggestions for potential connections based on current connections, demography,

interests, collaboration preferences etc.

51. Invite Users to join myAgenda

User has navigated to his Contacts using left vertical menu on his profile. User selects Invite tab.

User writes the emails of people he wants to invite to the service, separated by commas, and clicks

invite.



52. Send Message

User is viewing his profile. User navigates to Messages via left vertical menu. User selects Compose

tab. User starts filling out recipients field, and auto complete populates matching contacts. User

selects User he wants to add to recipients. User fills out Subject and Message, and clicks Send.

User is viewing a contact’s profile. User selects send message on profile information card below

page header, and popup appears with send message form. User completes form as described above

and clicks send.

User is viewing his list of Contacts. User clicks the Message button beside the contact he wants to

message, Popup opens up containing send message form with recipients filled out. User proceeds to

fill out rest of form as described above and clicks send.

User is viewing his list of Contacts. User selects message recipients by checking contact checkboxes.

User clicks Message button from action panel at top of Contact tab. Popup opens up containing send

message form with recipients filled out. User proceeds to fill out rest of form as described above and

clicks send.

53. Delete Received Message

User is viewing his profile. User navigates to Messages via left vertical menu. Inbox tab is open by

default. User clicks delete button beside received message to be deleted. Popup appears requesting

confirmation. User confirms action and message is deleted.

User is viewing Inbox. User clicks on message subject or on view button beside message he wants to

view, and message opens up. User clicks delete button, confirmation popup appears and user

confirms message delete. Message is deleted.

54. Mark Message as Read

User is viewing Inbox. User checks checkboxes beside messages he wants to be marked as read and

selects mark as read button from action panel at top of inbox tab.

55. Mark Message as Un-read

User is viewing Inbox. User checks checkboxes beside messages he wants to be marked as read and

selects mark as un-read button from action panel at top of inbox tab.

56. Search Inbox

User types a search phrase in search field at action panel at the top of Inbox tab and clicks search

button beside field. Messages matching search phrase are populated and appear below.

57. View Received Message

User is Viewing Messages on his profile, with Inbox tab open. User selects the Message he wants to

view by clicking on the subject or by clicking View button



58. View Outbox

User is viewing Messages on his profile. User selects Outbox.

59. Delete Sent Message

User is viewing Messages on his profile. User selects Outbox. User clicks delete button beside the

message to be deleted.

User is viewing Messages on his profile. User selects Outbox. User selects messages to be deleted by

checking the checkboxes beside them and then clicking the delete button from the action panel at

the top of the Outbox tab.

60. Search Outbox

User types a search phrase in search field at action panel at the top of Outbox tab and clicks search

button beside field. Messages matching search phrase are populated and appear below.

61. View Sent message

User is viewing his Outbox messages. User clicks the message subject or the view button and

message is viewed.

62. Request User Referral

User is viewing his Contacts on his Profile. User clicks get Referral button beside contact description.

Popup with request referral form opens up. User fills in referrer field and auto complete shows

possible matches from list of mutual friends.

User is viewing a contact’s contacts. Beside each contact is a get referral button. By clicking it a

popup appears with request referral form. Referral is requested by our user from his contact about

the contact’s contact.

63. View Referral Requests (Sent)

User is viewing his profile. User selects Referrals from left vertical menu, and then selects Requested

tab. User can now view referral requests he has made that are pending an answer.

64. View Referral Requests (Received)

User is viewing his profile. User selects Referrals from left vertical menu, and then selects Requests

tab. User can now view referral requests made to him concerning contacts of his.

65. Cancel Sent Referral Request

User is viewing his profile. User selects Referrals from left vertical menu, and then selects Requested

tab. User can now view referral requests he has made that are pending an answer. User clicks cancel

link beside the request he wishes to cancel. Popup appears requesting cancel referral request

confirmation. User confirms cancel and referral request is canceled.

66. Send User Referral

User is viewing his profile. User selects Referrals from left vertical menu, and selects compose tab.

User fills out To field with name of user he is addressing referral to. About field is for the name of



the user to be referred. The aforementioned fields have the autocomplete feature that populates a

list of the users contacts and filters them according to what the user has entered in the field. User

fills out the referral field and clicks send.

67. Delete Referral Request (Received)

User is viewing his profile. User selects Referrals from left vertical menu and then selects Requests

tab. User clicks delete button beside referral request he wants to delete. Confirmation popup

appears, user confirms delete and request is deleted.

User is viewing received requests as above. User selects the checkboxes beside the requests he

wished to delete, and confirmation popup appears. User confirms delete and requests are deleted.

68. View Referral (Sent)

User is viewing his profile. User clicks referrals on left vertical menu, and selects Made tab. User

selects referral to see and referral message is opened in the same tab.

69. View Referral (Received)

User is viewing his profile. User clicks referrals on left vertical menu, and selects Received tab. User

selects referral to see and referral message is opened in the same tab.

70. Delete Referral (Sent)

71. Delete Referral (Received)

72. Create Blog

User is viewing his profile. User navigates to Blog from his left vertical menu, and is prompted to

start a blog if he doesn’t have one. User fills out Blog title, subtitle, privacy and tags associated with

blog contents. User then clicks save button.

73. Edit Blog

User is viewing his profile. User navigates to his Blog from left vertical menu, and selects Dashboard

tab. User edits blog information form and clicks save. Information is saved.

74. Add Article to blog


tab. User clicks New Article button, and fills out new article form. User clicks publish or save as

draft.

75. Edit blog Article


tab. User browses articles and clicks edit pencil corresponding to the article he wants to edit. Edit

article form opens below list of articles; user edits article information and clicks save button. Article

changes are saved.



76. Edit Article Visibility


tab. User browses article list and toggles status selection (Draft - Published). Popup appears

requiring confirmation. User confirms.

User is browsing article list as mentioned above and selects a number of articles whose visibility he

wishes to alter. User clicks Publish or draft button from action panel at the top of the article list

depending on the visibility he wants to achieve. Popup appears requiring confirmation. User

confirms.

77. Delete Article


tab. User browses article list and finds the article he wished to delete. User clicks the trash can

corresponding to said article. Popup appears requiring confirmation. User confirms and article is

deleted.

User is browsing article list as mentioned above and selects a number of articles he wants to delete.

User clicks delete button from action panel at the top of the article list. . Popup appears requiring

confirmation. User confirms and articles are deleted.

78. Accept comment on blog article

User has navigated to Blog administration. User selects article from table and Article administration

opens up In the same tab. User accepts comments he has not accepted.

79. Delete comment on blog Article

User has navigated to Blog administration. User selects article from table and Article administration

opens up In the same tab. User deletes the comments he doesn’t want.

80. Edit Blog Visibility


tab. User edits blog information form and clicks save button. Information is saved.

81. Search for Blog

User uses Search field on page header to type in a phrase connected to blogs he would be interested

in. User selects blogs from the selection box, and clicks the search button. User is shown a search

result page listing all blogs that matched his phrase.

User uses Advanced Search to fill out an advanced form. User clicks search and matching results are

shown in a result page.

User navigates to Blogs from horizontal header menu. User browses blogs by contacts, date created,

popularity and saved blogs, navigating from the left vertical menu.

User views a contacts profile, and navigates to this contact’s blog.



82. View Blog

User clicks a blog link (after having found it – see u.c. 81). User scrolls through articles or selects one

from right panel containing archive.

83. View Blog Article

User is viewing a blog. User selects an article from the archive on the right panel.

User is viewing blogs from Blogs, and selects the featured article. User is transferred to that blog (if

he has permissions), and views article.

84. Comment on Blog Article

User is viewing a blog article. At the bottom of the article user is prompted to leave a comment with

a orange prompt link. User clicks said link and comment form appears. User completes comment

and clicks submit. User is informed that comment is saved and will be visible when approved by blog

owner.

85. Search for Group

User fills in search field on page header with phrase relevant to the group he is looking for, and

selects Group from the context selection. User clicks search button and is shown list of search

results.

User navigates to Advanced Search by clicking the advanced search link beside the search field on

page header. User selects Groups from left vertical menu. User fills out to fill out the advanced

group search form. User clicks search and matching results are shown in a result page.

User navigates to Groups from horizontal header menu. User browses groups by contacts, date

created and popularity, navigating from the left vertical menu.

User views a contacts profile, and navigates to this contact’s groups.

86. Create Group

User navigates from his profile to groups on left vertical menu. User selects Create tab and fills out

create group form. User clicks Save button and is informed by popup message that the group has

been created. User is transferred to Groups I created tab, where he can select and visit his newly

created group.

User navigates to Groups via horizontal header menu. User clicks create from left vertical menu.

User fills out form as above.

87. Request Join Group

User searches for a group in any one of the ways described in use case 84. If user is not a member of

a group there is a blue Join button beside the group description. User clicks Join button, and request

is recorded. User is informed by popup that his request has been made and is pending confirmation

(if needed, otherwise user becomes a member immediately).



88. Cancel Group Join Request

User wishes to cancel his request to join a group. User has just made the request and sees beside

the group information an indication that his membership is pending. User clicks cancel beside

pending membership status. Confirmation popup appears requesting user confirm cancelation of his

group membership request .

User is viewing groups he is in on his profile page. Groups pending membership acceptance are

displayed with pending membership and have cancel request as an available action. User clicks

cancel request and confirms the action in the resulting popup window. User’s membership request

is now successfully canceled.

89. View Groups

User visits My Groups on his profile and views groups he is a member of or pending membership.

User navigates to Groups on header menu and views Groups by Contacts, New Groups and Popular

Groups.

User uses Advanced Search to search for groups. Available fields for narrowing the search are title,

Member names and topics.

90. Leave Group

User views Groups he is a member of from his profile page, by clicking on My Groups from left

vertical menu on his profile. User clicks leave group button from beside the group he wishes to

leave. Popup window appears requesting leave group confirmation. User confirms action and is

deleted from group members

91. View Group Members

User is browsing Group page. User selects Members from side menu

92. View Pending Group Member Requests

User is browsing his groups on his profile page, and clicks new member link below a group

description. User is redirected to group page with pending members tab open.

User is browsing group page and selects members from vertical menu, then Pending tab.

93. Accept Group Member Requests

User is either group owner or administrator. User navigates to pending members and accept button

beside new members to accept.



94. Decline Group Member Requests

User is either group owner or administrator. Usernavigates to pending members and clicks decline

button beside members to decline. User is asked to confirm.

95. Delete Group Member

If user is group owner or administrator he shall have the option to delete members from the group.

User views members and clicks trash can beside users to be deleted.

96. Start Discussion

User is viewing group page. User does not see the discussion topic he wants. User cclicks create new

topic, and fills out the form that appears. User cicks save and topic is created. Topic Page opens up.

97. View Discussion

User is browsing a group page. User views discussion board and clicks on the topic he wants to view.

98. Delete Discussion

Discussion topic author, group owner and administrators have rights to delete a topic. User views

discussion board and if he has rights he sees a trash can beside each topic. User clicks the trashcan,

confirms delete and topic is deleted along with all its associated comments

99. Add Comment to discussion

User selects a topic of discussion to view from topic board on Group page. User scrolls to the

bottom of the discussion and fills out comment form.

100. Delete Comment from Discussion

Any comments a user has added to a discussion have a trash can beside them. Therefore, given a

user is already viewing the discussion, he clicks on the trash can beside the comment he wants to

delete. User clicks confirm on the popup dialog requesting confirmation

101. Give a member Administrator rights

User is viewing a blog he is owner of or an administrator. User views members, and clicks admin

wand button beside members he wants to grant administrator priviledges

102. View New Notifications

User is viewing his profile. User selects Notifications from left vertical menu, and views notifications.

New notifications have a red pin.

User views header notification box from any point in the site. User clicks on it and is transferred to

Notifications

103. Set Notification Preferences (Activate, Deactivate)

User Navigates to Settings from top right corner on header. User uses left vertical bar to get to

Notification Settings. User selects settings he prefers and selects save



104. Delete Notifications

User is viewing his profile. User selects Notifications from left vertical menu, and clicks the trash can

beside the notification he wants to delete. User is asked to confirm this action. User confirms and

notification is deleted.

Retrieve password

User has forgotten his password.

User fills out email and clicks retrieve password. System sends password to email address and

informs user to check his email inbox.

Suggest a connection

User is browsing a connections profile and selects suggest this contact.

Popup appears with all of User’s contacts; user selects contacts he wants to suggest this contact

to and completes a short message explaining the suggestion.

Recommend a connection

User navigates from home to Recommendations on left vertical menu and then selects

Write tab.

User fills out recommendation form and clicks finish.

User navigates from home to Recommendations on left vertical menu and then selects

Requests tab.

User selects recommendation request to respond to and selects write recommendation.

Write recommendation tab opens with about field filled in. user fills in the rest of the

recommendation form and clicks finish.

User is viewing a connection’s profile and selects recommend this user.

Popup appears, user fills out recommendation form and clicks finish.

User is viewing Resume information on a connection’s profile, and selects write

recommendation for an entry on user’s resume.



Chapter 6: GUI Storyboards

Following are the initial design ideas to be implemented. They are described by the use of story boards

and show a number of use cases. Please note that the use cases described in this report vary slightly

from the initial description followed in the storyboards, however the goals remain the same.

Sign in – Sign up

If user Signs Up, he proceeds to find people he knows that are using the web site, so he can start to

create his network. After successfully sending connection requests he is prompted to complete his

profile information. If user Signs In, he now sees the news section of his User Home, with the Important

tab open. He can now use the checkboxes and actions buttons to clear or mark as read.



Figure 12 Sign in - Sign up storyboard



Search

The storyboard below shows how a user would search for a person. An advanced search for blogs,

showcases, groups or jobs would follow the same steps, and the only difference would be in the search

form, and resulting content.

Figure 13 Search storyboard



Edit Profile Info (Picture, Basic Info, Education)

Below is a storyboard of how a user would edit his Profile. Shown is picture, basic info and education

edit, but all profile info edits would follow the same theme.

Figure 14 Edit Profile Storyboard



View, Send Message and Quick Connect

User can send a message from User Home > Messages > Compose, by clicking compose or by selecting

to reply to an incoming message. User can use checkboxes next to messages to mark as read, delete etc.

User can also send a message to a user when visiting his profile, and connect to the user if they are not

already connected. If they are connected then in place of connect to user there will be an option to

disconnect (remove from contacts).

Figure 15 Messaging and Connect Storyboard



Administrate Contacts

The storyboard below shows all tabs and use of User Home > Contacts. Various actions that were shown

before in detail have been omitted.

Figure 16 Administrate contacts storyboard



Blog

Below one can see the steps a user would take to administrate his blog, and see new blog posts on blogs

he follows.

Figure 17 Blog Navigation storyboard



Check Site News

Having gone to his home, user can view all system notifications on subjects he wants to be kept

informed about. If he likes he can go to network activity and see what his contacts have been up to.

Figure 18 View and Manage News Storyboard

Recommendations (request and send)

User wishes to recommend other user(s) of his network. He can do so from his home, or visit their

profile and recommend them. He also wants to ask some of his contacts to recommend him for his

work.

Figure 19 View and Request Recommendations storyboard



Request Referrals

User is browsing another user’s profile, and wants to ask people that know this user for an opinion on

his work or character.

Figure 20 request referrals storyboard



Chapter7: Paper Prototypes

Paper prototypes of basic screen views were drawn up with black marker, (for minimum detail). A

number of users (two experts, two not) participated in a pluralistic walkthrough, in an effort to find

mistakes and problems in the design. Below are the said screen views, along with user comments on

each view.

Use cases supported and walked through:

1) User checks his notifications

2) User checks a specific message in inbox

3) User composes message

4) User finds a contact

5) User wants to find others for collaboration

6) User writes a recommendation

7) User asks for recommendation

8) User creates group

9) User asks for a referral for someone

10) User edits his profile picture and info

11) User edits his experience in CV

12) User wants to find blogs of interest

13) User wants to find another user to connect to

Users where finally asked if settings where placed where they expected them to be. The answer was a

definite no, they were not pleased with location of settings and wanted them all together somewhere,

and not in the tabbed menus as they are in the prototypes.

The Walkthrough evaluations will be handed in separately, the general observations and comments

follow each screen below.



Figure 21 - User Home -> Notifications

General user comments:



They were not sure what the first icon under the logo was for, (it’s supposed to be a newspaper, for

quick notifications).

Users were very confused by the duplicate use of words Groups, Blogs, Jobs in horizontal and vertical

menus. They assumed they were for the same use, where they are actually not.

They didn’t like the idea of having to drop down the Account menu to logout, and thought that a

separate link to account settings would be more acceptable

They rest was considered more or less obvious.



Figure 22 - User Home -> Messages - > Inbox

One user wanted to know is search messages had an option to search just titles or all messages.

It was obvious to all to click on subject or preview to view message.



Figure 23 - User Home -> Messages -> Compose



The add recipients button and popup was well received. One user suggested it would be useful to have a

recycle bin.

Figure 24 - Add contacts to recipients of message

A user suggested Confirm instead of continue, he said continue made him think he had to do more.



Figure 25 - User Home -> Messages -> View message details

One user didn’t like the idea of an incoming message icon, because it wasn’t clickable while other icons

are.

Another was looking for the message menu above message details.

A third user asked if it was possible to view past messages, as a form of conversation (example iphone

messaging)



Figure 26 - User Home -> Contacts -> My network

Requests tab was not obvious. Requests by me or by others?

Users preferred the idea of an x icon for delete instead of trash.

A user suggested <<first <previous 1-2-3-…6 next> last>>



Figure 27 - User Home -> Contacts -> Suggestions

Users wanted the option to delete (hide) some of the suggestions.



Figure 28 - User Home -> Recommendations -> About me



Figure 29 - User Home -> Recommendations -> write

Users thought it would be important to have the option to save as draft.



Figure 30 - User Home -> Recommendations -> Get



Figure 31 My Profile -> activity



Figure 32 a contacts profile -> activity

Users where confused as to what the icon with 120 symbolized, they need more information to know its

size of users network.



Figure 33 My profile - resume



Figure 34 a connections profile -> her contacts



Figure 35 Edit profile> edit basic info



Figure 36 edit profile > edit photo



Figure 37 My profile > edit resume > edit experience

Users expect to see a popup when they ask for recommendations, not to be transferred to

Recommendations > get recommendation. It confuses and irritates them.



Figure 38 User Home > Blog Dashboard> New post

User thought it was confusing that to view blog it would open up in profile.



Figure 39 user Home > Blog > blogs I follow



Figure 40 User Home> Blog Dashboard



Figure 41 Groups > Popular groups

User expected to see the menu in tabs, not vertical side menu.



Figure 42 Groups > Create Group

User was looking for posting privileges.



Figure 43 Advanced Search > People > general



Chapter 7: UML Class Diagram

Figure 44. Uml Class diagram



Figure 45. Uml Class diagram (part2)



Chapter 8: Entity Relation Model

The database is described with the following ER Model.

Figure 46. Entity Relational Model





Chapter 9: User Interface Guidelines

9.1. Grid: There are three templates used throughout the site.

A. Welcome Page

Welcome Page uses three horizontal bars in its layout. The top bar is the header and has the

logo and the sign in form

Middle bar contains sign up incentive and form

Bottom bar contains signature

B. Presentation

C. Index

Both Presentation and Index Layout can be described as four horizontal bars.

The first bar contains the header with logo and unchangeable menu.

The second bar shows the conceptual path user followed to get to the page he is on.

The third bar consists of three vertical bars.

The first vertical bar contains a menu to complement the logical ontology User is

navigating (ex: Profile, Group, Administration).

The second vertical bar shows the content User views and manipulates.

The third vertical bar has advertisements.

Header:

Header will have site logo on top left, account options on top right. Header also contains horizontal

menu, which offers access to Personal profile, Jobs (Offers and Requests), Search options (quick

customizable search and link to advanced search).

Body:

Body presents information user is interested in.

Footer:

Footer will have horizontal menu consisting or contact link, f.a.q., site developer and designer

information



Figure 47. Grid Layout



9.2. Aesthetics:

Aesthetic principles used can be summed up by the following:

- Use of Rounded corners to make the site visually pleasing and give it a “polished” look.

- Use of borders to define basic parts of the layout and emphasize grid

- Use of white space to avoid clutter for lesser elements of the page

- Intense colors for menu areas

- Visually pleasing yet conflicting color combinations for menu option selections

9.3. Vocabulary/Terminology/Icons:

After every administrative task, user must Save changes made or Cancel changes. Content is added by clicking blue add buttons. Buttons all start with a capital letter. Form labels start with a capital letter when they are master labels, small letter when they are sub labels. Consistency is kept as far as terminology is concerned by sticking to key words. For example sign in, sign out, delete, contact, connect, resume, account, settings, tag, blog, article, and cetera.

Icon Semantics

User

User Information

User Description

Connect to User

Delete User from Contacts

Photograph

Education

Experience

Honors

Skills

Collaboration Preferences

Hobbies

Addresses

Recommendation

Old Notification

New Notification

Delete

Edit



Information

Path

Search

Search Key

Search Results

Tag

Reply

Message

Read Message

Delete Message

Unread Message

Privacy

Blog

Sign out

Settings

Alert – Confirmation required

9.4. Colors: I wanted colors that would be found in a typical contact book. I also wanted colors that would be pleasing to the eye. For this reason, I chose black for the master menu, blue for the side menu, and off white for the content. These are colors colorful enough to keep the site from being drab and boring, but not too childlike to make it unsuitable for a professional – oriented site. Background is cream colored (#FFF7D7). Black is generally a tiresome color, but the master menu does not take up a lot of space, and it stands out nicely. A deep blue (#095882) was chosen for the side menu, also with intent to make it stand out, and also because such vivid colors are often found in contact books and agendas. Off white reminds people of paper and is easy to look at when reading amounts of content. Orange (#E54F0B) was selected for prompts, as it stands out nicely against the background, it is a vibrant yet comfortable color, and catches the user’s eye. It is also used to explain errors in form validation, so as not to terrify the user with red, but simply point out what went wrong. Gray (#CCCCCC) was selected for information accompanying forms. The user won’t notice the information until he needs it.

Figure 48. Orange links used to indicate an action prompt



Figure 49. Orange used to indicate error on form submission, gray for form input information.

9.5. Fonts:

All static content text font such as content headers, menus and actions is "Lucida Grande", Verdana,

sans-serif. This font was chosen because it is clean and legible and alludes to human handwriting in

the construction of the letters, making the type as a whole more friendly and warm. Sans-serif is often

used for headlines.

I chose 'Baskerville', serif for use in dynamic content with large body of text.

Font size differs between menus, headings and content. Titles and menus use Large font sizes, where

as content is displayed in smaller font sizes.

9.6. Buttons: There are 5 button colors used; blue, red, green, orange and gray. Blue buttons: Used to continue to another Use Case, generally assist flow – hint at a continuation. Blue was chosen as a neutral color, easy on the eyes, visible yet not tiresome.

Figure 50. Blue button

Red buttons: Used for terminal actions, such as delete contacts, messages etcetera, resetting or canceling forms. Red was chosen as it is generally a color of alert and caution, very often used for negative statements.

Figure 51. Red button



Green buttons: Used to affirm the completion of a regular flow of a Use Case. Ex: sign-in, sign up, save form information etcetera. Green is soothing and relaxing, occupying more space in the spectrum visible to the human eye and is second only to blue as a favorite color.

Figure 52. Green button

Orange buttons: Used to prompt edit information. Orange is very often associated with warmth and energy, and stimulates activity.

Figure 53. Orange button

Gray buttons: used to deviate from the task.

Figure 54. Gray button

9.7. Links:

Links are displayed in blue (#095882) or orange (#E54F0B). Blue is used for navigational links, orange is

used for links that result in or lead to an action. External links are opened in a new tab. All links display

an informative title on hover, explaining their function.

Figure 55. Links in blue and orange

All user names and avatars link to the user’s profile, providing the 2 users are connected.

Figure 56. avatar and name are links to profile



9.8. Forms:

Form consistency is kept by placing all labels to the left of input fields. This is done to efficiently use

screen real estate and make the labels stand out. Input field information is displayed beneath input field

in small gray font. Input prompt is shown with gray letters in the input and erased on focus. Form focus

is displayed with yellow border around input field. Input errors are shown at the bottom of every field

after submit with orange text and input field border turns orange.

Figure 57. Form with focus, input prompts and input information

9.9. Tables:

Table head is blue background (#095882) with white bold 11px font. Rows are divided by thin gray line



9.10. Visibility of system status:

Menu selections are visible due to contrast of colors. If there are unseen notifications the notification

box turns red so does the pin beside it..

Figure 58. System status visibility

In addition, if a user completes an action such as request connection of another user, the button is

replaced with “pending”, so the user knows the request was sent.

If user tries to visit someone’s profile with which he is not connected, he is informed that he does not

have sufficient privileges and must first connect.

Pending

notifications

Path

Selected menu

Selected menu

Selected tab



9.11. User Control:

One of the most irritating things that can happen when clicking through a site is leaving the site by

clicking on an external link. For this reason, when a user clicks on an external link, the corresponding

page is loaded in a new tab (or window).

If a user requests connection to another user and changes his mind, he is offered an option to cancel his

request.

Ease of navigation is ensured by menu grouping. Highest level navigation is on the page header, with sub

navigation on vertical menu and tabs. Maximum menu options are found on user’s profile page which

offers 10 different options on the vertical menu.

Logout link is placed at the top right of the page, out of the way. It is the expected placement of a logout

link and minimizes error.

9.12. Error Prevention:

For terminal actions such as delete, user is asked to confirm.

Input in invalid format is checked for and not permitted to be submitted. For example, if a field must be

in a required format or if it must not be blank, input is checked on submit, and problematic fields

marked and explained. If input must not exceed a limit of characters, input stops being filled in after

limit of characters has been reached.

9.13. User Guidance:

User is guided to complete Use cases with various ways.

Firstly general stereotypes are kept (for example one expects to find buttons for continuing the flow on

the right.) As people in the western world read from left to right, they first note the first button in a

clump of buttons, and so the first button will always be the one to complete the use Case with success.

Forms are designed to enable the user to fill them out with as little effort as possible. Stars are kept

beside required fields, explanations and prompts are given, and if a user makes a mistake he is informed

how correct input is, (and if possible told what the error was).



When a row is clickable (example: Messages or Contacts), the rows are highlighted with orange. As said

above orange is meant to prompt an action. By clicking on a highlighted row, the corresponding

checkbox is selected.

Figure 59. No action on row

Figure 60. Prompt click row on mouse hover.

Figure 61. Row selected.

9.14. Primary Actions:

When a form is completed, the primary action is to go ahead and save the information entered. Thus

Save buttons are made exceptionally visible in contrast to Cancel buttons. The Cancel option is

unobtrusively visible beside the flashy and vibrant Save button.

Figure 62. Primary action example.



9.15. Screen Real-Estate:

Page width is 1000px, and can be viewed on most computer monitors as typically monitor resolutions

are primarily 1024x768 and up.

Content is gathered in the middle, due to the sidebars on the right and the left. The left sidebar is

needed to create a good user experience, so the user can easily see where he is and what his options

are. The right sidebar was necessary to “pay the bills”, as this is a free site – no payment required for

registration.

Content is therefore placed carefully in the middle section, with as much spacing between elements to

ensure difference is defined by “white space” to avoid unnecessary clutter. I show only information of

immediate interest to the user, for instance in the page displayed above, the profile information box is

conveniently at reach yet closed to save space. The list of contacts is arranged with white space in

between to make sure they do not look smooched together. In the top right of the main Content box,

there is a search box to easily refine the selection of contacts shown.



9.16. Flow Diagrams

Use Case 1: Login



9.17. System Architecture:

The architectural pattern followed to implement this web application is the BCED Architectural Pattern.

The BCDE design approach defines four packages of classes: Boundary, Control, Entity,

Database_Interface (BCED).

Layer 1. The Boundary Layer.

The Boundary Layer is responsible to interact with the user for presentation or input of data. In our case

it consists of all .jsp, .css and javascript (.js)

Layer 2. The Control Layer.

The Control Layer manages the flow of information between Server and Clients. It consists of the

controlLayer package in my source code, and implements the communication between boundary classes

and entity classes. Various events trigger the controller who in finds the action handler responsible for

this event. The action handler then populated data or information based on system status and user

input, and decides which JSP is to produce the HTML to send to the client as a response. This flow of

information is implemented with the MVC design pattern. View changes are called via Actions handled

by the Controller. Actions make use of Java Beans belonging to the Entity layer.

Figure 63 the MVC design pattern

Layer 3. The Entity Layer.

The Entity Layer contains the main concepts of the business domain and belongs to the Business logic

tier of the architecture. Entity classes describe objects that represent semantics of the application. The



MVC pattern (Model – View – Controller) was implemented to link the boundary layer with these

objects (as mentioned above). This pattern isolates the application logic from the user interface.

Layer 4. The Database Interface Layer.

The Database Interface Layer consists of classes responsible for mapping entity classes to the database.

It belongs to the Business logic tier of the architecture, and it communicates with the Entity classes in

the layer above it and the classes responsible for communication with the databases in the Layer below

it. This is done to ensure the independence of the database.

The Database Interface layer consists of DataAccessObject classes, a factory to create database data

access objects and each database access object factory creates the classes for connecting and

interacting with the databases given. In our case there is only one database (MySQL), so apart from DAO

classes, DAO factory and MySQL_DAO factory we have MySQL_Object_DAO classes.

Layer 5. The Database.

The database in this case is a MySql database. There is a package in the applications source code that

implements the connection to this database.



Figure 64. BCED diagramm



The application’s corresponding Entity Relational Model is described in the following diagram:

Figure 65. Entity Relational Modal



Appendix A. Application Views



Figure 66 User Profile Page





Figure 67 Account Settings



Figure 68 Notification Settings

Figure 69 Close Account



Figure 70 Edit Resume Education



Figure 71 Add New Experience



Figure 72 - Notifications



Figure 73 Inbox



Figure 74 view received message



Figure 75 Outbox



Figure 76 Send a message (1)



Figure 77 Send a message (2)



Figure 78 Contacts



Figure 79 Delete Confirmation



Figure 80 Recommendations



Figure 81 - My Blog



Figure 82. Blog Article



Figure 83 – Blog Administration



Figure 84. New Article



Figure 85 Edit article



Figure 86 Advanced Search

Figure 87 Advanced Search Results



Figure 88. New Groups











Documents

TECHNICAL UNIVERSITY of CRETE Dept.christina/documents/myAgendaReport.pdf · 39. Hide Recommendation ... MySpace was started to assist networking among musicians, Businesses use facebook