Mockups_Phase 1 (2)

7/28/2019 Mockups_Phase 1 (2)

1/25

LMS & Social Networking

Initial document of understanding-Phase 1

6/28/2012


2/25


Page 2

Revision History

Date Version Description Author

28-June-2012 1.0 Document of Understanding _Phase 1 Seasia

2-July-2012 1.1 Revised Submission_Phase 1 (Incorporated client inputs) Seasia


3/25


Page 3

Contents

1. Home ................................................................................................................................................................................................ 4

1.1. Sign up .................................................................................................................................................................................... 5

1.2. Login ....................................................................................................................................................................................... 6

1.3. Forgot Password ..................................................................................................................................................................... 7

2. Profile Creation ............................................................................................................................................................................... 8

2.1. Login Details............................................................................................................................................................................ 8

2.2. Educational Details ................................................................................................................................................................ 10

2.3. Professional Details ............................................................................................................................................................... 11

2.4. Other Details ......................................................................................................................................................................... 12

2.4.1. About Me ................................................................................................................................................................................... 12

2.4.2. Skills and Expertise ................................................................................................................................................................. 13

2.4.3. Honors and Awards ................................................................................................................................................................. 14

2.4.4. Goals ......................................................................................................................................................................................... 15

2.4.5. Achievements ........................................................................................................................................................................... 15

2.4.6 Interests ......................................................................................................................................................................................... 16

2.4.7. Hobbies ......................................................................................................................................................................................... 17

2.4.8. Photo ............................................................................................................................................................................................. 18

3. Main Profile ................................................................................................................................................................................... 19

4. User Home Page ........................................................................................................................................................................... 20

5. Contacts ........................................................................................................................................................................................ 22

6. Messages ....................................................................................................................................................................................... 2

7. Notifications .................................................................................................................................................................................. 25


4/25


Page 4

1. Home

This is the Home Page of the portal. We have removed the registration box from the Home page. The middle

section will have some informative text or highlights of the portal plus a Demo tour. The below section will

have some blogs and footer.

Please ignore the content and only look for the features. These will change later when you will provide us the

real content to go on site. This screen will display portal's highlights and placements.

http://klout.com/home- Something like this will look good? Please suggest. No registration on this page. May

be just a link leading to contact page or for parents. Think how UI should be. But no need of a box for

registration as its closed network. Not sure if we need all these info in home page as this is not a public

network. Do suggest. I DO NOT WANT ANYONE TO COMMENT OR FEEL THAT OUR SITE LOOKS LIKE COPY OF

FACEBOOK OR LINKEDIN IN STRUCTURE, CONTENT, ANYTHING. IT HAS TO BE UNIQUE. Login section should

have more emphasis, not in a bar like that I think?

Still this page is not as good as Klout. VJ said we will have UI experts who will suggest how things has to be?

I do not want to be the one who decides this as I am not UI expert. Can I speak with UI/UX expert? Becausethis is very important part.

Still my comments here: Since this is member only site, I thought the login page should be like klout. This is

still different. Not sure if we will have ads now. Let me know.
http://klout.com/homehttp://klout.com/homehttp://klout.com/home


5/25


Page 5

1.1. Sign up

This is a Sign up screen. When an Institute will sign a contract with Admin offline, they will provide the Admin

with student's DB along with personal email ids. Admin will send out the invites to all students and teachers of

respective colleges.

The link arrived in mails will have college name auto selected. Students and teachers will sign up themselves

there. There might be colleges, not willing to give their students database so we can also give a link to college

where students can register themselves. In this case, college itself be responsible to circulate this link among

their students.

Admin will manage the registration process for HRs. Admin will enter HRs name, email, contact and companydetails and send out an invite. HRs will go and sign up via the link arrived in mail to avail the benefits of the

portal.

Parents will be able to sign up on their own or their students can send them invite too. If they will sign up

themselves, they would be asked to enter their student's name and institution name. Once verified, they will

be registered and given the access.

For students, we will also provide an option to send invites to their parents. This is something they can do at

any point of time. Students will just need to enter the email id of their parents to invite them on the portal.

There is no public registration. If general public will try to register by clicking on sign up, they will be sent to

the Contact page. Only visitors those have arrived on the portal via the link received in their emails will be ableto sign up on the portal. Can you refer to latest web 2.0 sites to see how their signup pages are?

Query: Will this contact page be a simple page as on other sites where users can go and leave any post for the

Admin? Ya, Contact page is simple. Fields may have an addition or so, but yes, simple form.

Users will also be able to sign up with Facebook account. So is there multi step registration to get more

details? Yes, as on http://klout.com/home, users can connect on this portal via Facebook. They will enter their

Facebook credentials to sign up andstart creating their profiles right away.
http://klout.com/homehttp://klout.com/home


6/25


Page 6

1.2. LoginThis is a login screen which will allow users to direct Login on the portal or via Facebook account. I like the

klout.com kind of login look than this. We need email based login in that page too which klout does not have,

but that looks and feel is good. Dont worry about look and feel. This is designers job and before proceeding

with other pages, they will get the Home page look approved from you. I am just not very sure about this

part, because the home page here in social network is login page. Dash board is main inner page. We mighthave to see inner pages as well after login pages. I like login page l ike klout. Thats the quality I am looking

at. May be login and home page is merged together. We dont need 2 separate pages? UI expert suggestion

please.


7/25


Page 7

1.3. Forgot Password

This screen will appear on clicking the "Forgot Password" from login screen. This screen will help in recovering

the password. It will ask for the email id and once user is verified, a link will be sent on their personal mail id

using which users can reset their passwords. Look and feel must change. All else okay. Same for all

screenshots. When PSDs will arrive, you will find the change in look and feel.


8/25


Page 8

2. Profile Creation

Immediately after signing up, the process of profile creation will start. The wizards will be:

Login

General Educational

Professional (This is only for teachers and parents)

To Do List

(We need to think these sections and form them)

2.1. Login Details

The first wizard will display Login details which can also be edited, if needed. On Login wizard, users will

specify their roles.

If users will check mark the "Parent option", they will be asked to enter Student name and Name of the

institute.

Once done, parents will successfully be given the access.

There are totally 5 roles. Not 4. Do you want me to verify all fields now? Or is it something we will do later?

Most of these fields like relation, guardian, in next image, language, nationality, etc are not needed.

OK. As far we know, apart from these 4 there are two more roles: General public and Admin. We are told to

consider general public later on and admin we cant show here.

Kindly share the fields preferences you have. Fields is something that we have to work on when we move on

to Programming as .NET. We will now focus on design and HTML. We will add/edit/delete fields later onbefore moving to .NET.

If this is the parents signup, then its first institution name (which gives drop down as they type first letter)

and same way for student name. They can only signup by selecting one in the drop down. They cannot

enter. Why send invite to parents screen if

this is signed up by parents? Send invite

to parents by students is a place where they

enter their parents email id and send

invite, like invite friends. Even if that

option is in signup, it has to then provide

2x2 fields where Name, Email is givenfor both mom and dad to fill. Need UI/UX

suggestions please. To do list? Not sure on

many parts here.

Please ignore the Inbox Tab on the following

screens.


9/25


Page 9


10/25


Page 10

2.2. Educational DetailsThis screen will ask for educational details. The name of the college will come pre-filled based on the link. The

one they enter here is CURRENT college details. So when they click add another, they wont have college

name filled, but that wont be added to list of colleges too, unless its already there. Dates attended is

calander box type filler. Grade??? Activities & Socities, Additional notes To be given thought.


11/25


Page 11

2.3. Professional Details

This screen will ask for Professional details. The profile creation for teacher and parent will also Professional

Details Tabs. These will be customizable so that admin may modify them if needed.

Let me know if we should work on fields as well now. It is something you must research and suggest right?

We will continue our research on it but would also appreciate your inputs on field names, if any specific. This

wont come for student registeration. Only for parents. Needed for teacher & HR? To be decided. I think we

will should focus on getting design out first. We can work on fields after that.


12/25


Page 12

2.4. Other Details

On this screen, users will complete various profile options to bring their profiles on top.

Each To Do List options on right will open a new panel on left prescribed area. But does this happen during

signup process?

2.4.1. About Me


13/25


Page 13

2.4.2. Skills and Expertise


14/25


Page 14

2.4.3. Honors and Awards


15/25


Page 15

2.4.4. Goals

2.4.5. Achievements


16/25


Page 16

2.4.6 Interests


17/25


Page 17

2.4.7. Hobbies

Interests, hobbies, skills, etc should have suggestions, some list of pre loaded data like in linkedin/facebook

to select from when they start to type

We will brainstorm on other needed data as we go on.


18/25


Page 18

2.4.8. Photo


19/25


Page 19

3. Main Profile

This is the profile view of the details entered and this is how the profile will appear to others. Users can edit

any information on this anytime.

Profile Tab will have following options in drop list: (I dont want this option. May be a button in profile pagecalled EDIT which on click goes colorful and page can be edited and when clicked again goes grey and it is

view mode. I just do not want a 2 sub menu for this like linkedin)

View Profile

Edit Profile

On the Top, we have preserved the space for AI. This will keep reminding users of the details they still need to

fill to bring their profiles on top. Also update users on activities they need to revisit.

On the right panel, they have given an option to upload their resumes for HRs to consider.

Users could also select Post to Facebook wall option to share their profile on Facebook.

Below that, users will see the % completeness of their profiles via a bar. We need Sync to corporate here.

Thats like the bar only. Needs more thought from other references and sites. Under analysis.


20/25


Page 20

Upload Resume

Profile is very important page. I am NOT going to comment anything here. I need UI/UX designers to assit

me in this.

4. User Home Page

This is the Home page of the portal. Users will be able to upload anything on the arkeytect wall. On sharing,

same would go on Facebook wall. This need settings/approval and disabiling option or TICK option like

hootsuit. I tried to look for this feature on hootsuit but I was not able to find any free trial. Hootsuit has free

account. Please register. Or come to chat, I will guide.

On Home page, users will see all updates from different users connected to the person logged in. They will be

able to share, like, comment on the updates.

There would be a section on right to display the companies on boom and the top jobs for users consideration.

To be thought if needed or not. Pl let us know if thats needed.May be this is needed only for final yearstudents. For other years, we can give them something else on this side.

We have also defined a section for any kind of headline/news from Admin. All these pages are missing some

modules which we spoke, like motivational quotes, etc. Please refer docs. These mock-ups only cover phase 1

features. Once approved, we will start with next phase, probably tomorrow onwards. The motivation quotes,

etc are part of this page. Though its in different phase, it has to be part of this page. So try to make it up. I

understand. Lets get all phases in to action, we need support of your UI/UX to get these sorted.


21/25


Page 21


22/25


Page 22

5. Contacts

This tab will have following options in drop list:

All contacts (Shouldnt this page have option to remove/delete/unfriend contacts? Why separate

page?)

Add/Invite contacts (Lets refer to facebook and other networks. For this) Remove Contacts

This screen will display the contact list of the user.

From this screen, users could also remove contacts from the list. Need to see better interface. Refer to fb and

linkedin. This screen has been designed after referring Linkedin. You can refer to facebook andhttp://klout.com/#/KarnikaYashwant/influencers/2

May be they give some idea.

http://www.edmodo.com/home

Refer to this for some UI part Not to copy, but how they have modified it to suit schools

https://plus.google.com/- See new UI they have. Thye dont have any menus. All are compact based on item selection on sides.May be we have to come up with innovative world class UI which is very different from all others. I do not want a usual UI andmenus. Facebook, Klout, Google+, they dont have it!!! Only linkedin has menus. To be worked .
http://klout.com/#/KarnikaYashwant/influencers/2http://klout.com/#/KarnikaYashwant/influencers/2http://www.edmodo.com/homehttp://www.edmodo.com/homehttps://plus.google.com/https://plus.google.com/https://plus.google.com/http://www.edmodo.com/homehttp://klout.com/#/KarnikaYashwant/influencers/2


23/25


Page 23

5.1. Invite contacts

This screen will allow users to invite friends and import users from existing ids. Its a closed network. Do we

need invite via email? Please give some thought on each of those please. Like Linkedin, based on college we

can search for students and add or open browse. Suggest.

5.2. Remove contacts

This screen will allow to unfriend any connection. Merge it with main contacts page.


24/25


Page 24

6. Messages

This is the message center that will allow creating, sending and deleting messages. There is a separate section

on right to display all invites separately. Ok, Lets review other sites to see how we can make it better. I

thought as per our initial discussion, you will compare other sites and see problems users face on those sites

and come up with a solution better than current.


25/25


7. Notifications

This tab will show all new notifications received. See Facebook, klout, etc. They have it in a subtle icon/bar.

Mockups_Phase 1 (2)

Documents

Transcript of Mockups_Phase 1 (2)