phourus / app Goto Github PK

Import/Share/Verify Facebook, LinkedIn, Github, Google+, Youtube, Twitter

So the Profile page is for both Individual Users as well as Organizational Users. They will share a very similar structure, with a few minor differences.

HEADING
The Heading is the most crucial part, as it contains all of the user’s vital profile information, as well as links to the subviews that will display more in-depth information.

• Username (johndoe) or Shortname (Username for organizations, abc-company). This should also link to the default subview (more info below)
• User/Organization pic
• Influence Rank (Score 1-100, indicates how reputable and influential the user/organization is on Phourus). This should also link to the ‘Ranks' subview (more info below)
• Profile information (refer to Account page basic info — first/last name (John Doe) or Organization name (ABC Company, Inc))
  • First & Last name (Users) or Organization Name (Organizations)
  • Location (City & State)
  • User: Company, Occupation, Date of Birth, Gender
  • Org: Size (50-100 Employees), Type (Corporation), Industry (Energy) and Founded (July 1995)

LINKS
So the Links section is how users will navigate subviews of the Profile page. Most hyperlinks should include a total and link to the appropriate subview. For example, there should be a hyperlink that says ’16 Reviews’, which would be the total reviews written by that user, or for the organization. If that link is clicked, it would bring you to the Reviews subview to see that actual reviews.

1. Username/shortname: Should bring you to the default subview
2. Contact: A “Contact” link should bring you to the contact page for the user/organization
3. Influence Rank: The 'Influence Rank’ for the User/Organization should also link to the ‘Rank’ subview somehow
4. x Posts: Total number of posts, should bring you to the Search page (not a subview) with all the user’s posts
5. x Members/Organizations: An Organization has ‘Members’ (users who have joined the organization), while a user has ‘Organizations’ (how many Organizations the user belongs to)
6. x Events: The amount of events attending or hosting by the user/organization.
7. x Reviews:

SUBVIEWS

1. Default (Same for both Users and Organizations)
   • About: Simple paragraph about the user/organization
   • Social: Tweets, FB feed, LinkedIn profile, Youtube videos etc
   • Clout: Awards and/or Press clippings for the user/organization
2. Members/Organizations
   • For Organizations: This subview is a list of users that are official ‘Members’ of the Organization
   • For Users: This subview is a list of all Organizations that user is a member of. There should also be an indicator for Organizations the user is an admin for, and some sort of ‘Edit this organization’ button so the user can manage the Organization
3. Events
   • For Organizations: All Events hosted by Organization or it’s Members
   • For Users: All Events hosted by or attending by the User
4. Contact
   • Email, phone, fax, addresses, website
5. Ranks

• Member list
• About/Contact
• Events
• Social
• Reviews/Clout

There should be a link to change the user’s password somewhere on the Account page, which will display the ‘Change Password’ view when clicked. Once clicked, the ‘Change Password’ view should have a form with the following fields:

• Current password (The user’s current password to ensure it is indeed the account owner)
• New password (The new desired password)
• Confirm password (Because they will not be able to see the new password they typed in, they will need to type again to confirm it was correctly spelled)
• Submit button (To submit the password change)

The default Account page should have a list of Notifications for the user. Examples of Notification are:

• {username} viewed your profile
• {username} commented on your post “{post title”}
• {username} liked your post “{post title}”
• {username} disliked your post “{post title}”
• Each notification should have a picture for the user that performed the action
• Each username should be a hyperlink to the user’s profile
• Each post title should be a hyperlink to the post

After a new user registers for Phourus, they can access their account page to upload a profile pic/avatar, change their password, add/edit/remove addresses, and view their history and notifications. Also, there should be a link to their Posts.

PIC UPLOADER
The Pic Uploader is pretty straightforward. Users only have 1 picture so it really just needs to display their current profile pic or the default pic, and some sort of ‘browse + upload’ form/button.

BASIC
There should be a way to view and edit basic account details.

• username
• first name
• last name
• email
• phone

DETAILS
In addition to basic profile information, users should be able to add/modify the following as well:

• company
• occupation
• website
• date of birth
• gender

ADDRESS
Users could have multiple addresses, so some way to display a list of their addresses, with the ability to add/edit/remove addresses.

• street
• suite/apt etc
• city
• state
• zip
• type (default, mailing, billing etc)

VIEW MY POSTS
There should be a simple link somewhere that links to the user’s posts, with a count of how many posts they have.

VIEWS
The Account page has 3 subviews that are accessible by the URL:
/account/ - Default view (Notifications)
/account/history - History view
/account/password - Change password view

So the ‘Ranks’ Subview hasn’t been entirely thought out yet, but it’s basically a page to indicate how well the User or Organization stacks up against other Users or Organizations on Phourus. Phourus aims to be a competitive platform so some creative way of displaying their rank would be awesome. Some stats to consider:

 - Total Members/Organizations
 - Total posts
 - Total comments
 - Total likes
 - Avg popularity

Also, Phourus is broken up into 4 different sections, so I’d like to see how they rank in each of those 4 sections:
- Phourus World: (GREEN -- Economy & Environment)
- Phourus Mind: (BLUE — Education & Knowledge)
- Phourus Voice: (RED — Politics & Government)
- Phourus Self: (GOLD — Beliefs & Religion)

The editor page is basically a page for editing posts. Think of a Wordpress page editor screen.

TOP OBJECTIVE: Forms & Buttons

• Red, Blue, Green and Gold buttons (Like logo)
• Dropdowns, Input boxes, textareas/multiline text boxes, labels, checkboxes
• Form field validation (red when invalid value, green when valid etc)

COMMON FIELDS

• Post Title
• Privacy (Public, Private, Phourus)

RICH TEXT EDITOR
Posts can be full articles complete with formatting options.

• Heading/paragraph options (Heading 1, Heading 2, Heading 3, Paragraph)
• Ordered and Unordered Lists
• Hyperlinks
• Left, Right, Center, Justify alignment options

POST TYPE
Users should be able to pick one of the following post types. Please include the description somehow.

1. Blog: General Post type, start here if you dont know what to choose
2. Event: Virtual or real-world event
3. Subject: Share your knowledge or expertise with the community on a variety of Subjects
4. Question: Need help or clarification on a topic? Ask it with a Question
5. Debate: Get the discussion started with a local, county, state or national-level Debate
6. Quote: Has someone else already described how you feel? Post their Quote here
7. Belief: Tell us more about your Belief on something dear to you

META
Each Post Type has it’s associated Meta Fields. Just use “Blogs” as the default type, and use the following Meta Fields:

• Element (World, Mind, Voice, Self)
• Category
• Subcategory
• Positive checkbox (Determines whether or not the Post is a feel-good ‘positive’ article or not)

TAGS

• Ability to add/remove tags

LINKS

• Ability to add/edit/remove tags

LIST

• “Back to List” button should bring user to a list of their posts

BUTTONS

• Add New Post
• Update Post
• Remove Post
• Back to List

• Companies:
• Schools: Grades, Assignments,
• Govs: Laws & Regulations, Org Chart
• Groups: Donate

• Signup
• Reset Password
• Account Notifications

Sometimes we’d like to use this search but in the context of an individual or group, so we need some sort of “Viewing all posts by {the user}” or “Viewing all posts by members of {organization}” or “Viewing all my posts” for the current logged-in user.

• None (All Phourus Posts)
• User (Posts by a specific user)
• Organization (Posts by users within an Organization)
• Account (Posts by the currently logged-in user’s)

https://www.ascribe.io

The Leaders page is a key differentiator for Phourus and should be an exciting, pleasurable and memorable user experience. It is also responsible for driving the competitive aspect of Phourus and the initial attempt at ‘gamifying’ the creation of valuable content.

RANK
‘Rank’ is a heading at the top of the page that provides contextual information on where the current Post, User or Organization (Leaders) ranks for the selected Metric (Likes, Influence Rank, Comments, Popularity etc).

For example, if you are sorting ‘Posts’ (Leader) with the most ‘Likes’ (Metric), the Rank section will show the Post with the most Likes.

If you click the Post with the 4th most Likes in the list, the Rank context will change to that Post instead.

• Current Number Rank of Leader (User, Org or Post), (#1 to total number of items)
• Current value of the selected Metric and Leader (133 Likes for Current User, for example)
• Value of the Selected Leader’s current Metric (1,230 Likes, for example)
• Value of Top Leader’s selected Metric (13,823 Likes)
• Next/Previous Buttons to click to Next/Previous Leader
• Basic Metadata for the Leader
  • Location
  • Title
  • Date Registered/Created
• Percentile Graph (See links)

FILTERS
The Filters help narrow down the search for Leaders. Think of them as drop down menus.

• Leader: Posts, Individuals, Organizations
  • Microfilters
    • Post
      • Type: Subject, Quote, Blog etc.,
      • Keyword
      • Distance
    • Individuals
      • Age: 18-25, 25-40, 40-60, 60+
      • Gender: Male, Female
      • Political Party: Liberal, Conservative, Independent, Other
      • Religion: Christianity, Islam, Buddhism, Judaism, Taoism, Atheism etc.
    • Organizations
      • Companies
        - Type: sole proprietor, corporation, llc etc.
        - Size: 1-10 Employees, 10-20 Employees etc.,
        - Industry: Manufacturing, Software, Legal etc.
      • Schools
        - Size: 1,000 to 2,000 Students
        - Type: Private, Public, Charter, Certification
        - Grades: K-12, High School, Post-Secondary, Masters
      • Govs
        - Population: 1,000 - 10,000 citizens, 10,000 - 20,000 citizens etc.
        - Scope: City, County, State, Federal
        - Type: Primary, Agency/Department
      • Groups
        - Belief system: Christianity, Buddhism, Atheist etc.
        - Size: 1 - 50 Members, 50 - 100 Members etc.
        - Type: Non-profit, religion
• Metric
  • Influence Rank
  • Likes
  • Popularity
  • Views
  • Comments
• Element
  • All
  • World: Health & Wealth
  • Mind: Education & Knowledge
  • Voice: Politics & Government
  • Self: Beliefs & Religion
• Date: Show Stats at a given point in time

LIST
Pagable list of Top Leaders for current selected filter options.

• Basic Metadata with Link to full Post/Profile
  • Location
  • Title
  • Date Registered/Created
• Very similar to the ‘Rank’ header
• Some Users may not want to show up in Lists, so items can be anonymous as well

VISUALIZATIONS
Percentile Graph (for top heading section): http://c3js.org/samples/chart_gauge.html

Maps:

• Filter granularity: City, County or State
  • Circles: http://mbostock.github.io/d3/talk/20111116/airports.html
  • Heatmap: http://bl.ocks.org/mbostock/4060606

Historical:

• Timeline (Over time): Date from, Date to
  • Stacked Area: http://c3js.org/samples/chart_area_stacked.html

Standard:

• Current 10 + Rest of List
  • Donut: http://c3js.org/samples/chart_donut.html
  • Bar: http://c3js.org/samples/chart_bar.html

Advanced:
* Circle Packing Hierarchy: http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html (Culture, Element, Organizations, Users, Posts)
* Word Frequency Bubbles: http://www.infocaptor.com/bubble-my-page

 * Average Charts (Diverging Stack): http://bl.ocks.org/wpoely86/e285b8e4c7b84710e463 
 * Tags/Categories (Bubble Charts) http://bl.ocks.org/mbostock/4063269    

Inspirational:
* Map: https://live2.zoomdata.com/zoomdata/visualization#53f22849e4b08f9d5f15360a-522655b0e4b00f4f3af30f12
* Relationships: http://www.brightpointinc.com/interactive/political_influence/index.html?source=d3js

Find discussions on common issues from various sources on the web such as comment sections, discussion boards, forums etc

The Search Page is where users will find posts on Phourus. It’s a pretty standard search/results page and I’ve provided all of the details needed below:

SEARCH BAR
Need a search bar and search button

• Search by keyword, Users & Organizations
• Fuzzy search, search for
• Category & Tag searching
• Personalized Curation

SEARCH RESULTS
The list of search results is the primary focus of the page and very important. Each result should have data about the post, the author and have some statistics for such as total number of comments and views.

• Post
  • Title
  • Post Type (Blogs)
  • Category & Subcategory (History, Ancient History)
  • Summary/Excerpt
• User
  • Pic
  • Username
  • Location
  • User Influence Rank
• Stats
  • Total Views
  • Total Comments
  • Total likes
  • Popularity (0-100%)

SORT
Need to be able to sort search results.

• Sort ascending or descending by
  • Influence Rank
  • Views
  • Popularity (Ratio of likes to dislikes)
  • Likes
  • Comments
  • Location
  • Date

FILTER
There are 8 different Post Types on Phourus. Search should be able to turn these on/off somehow, as well as filter by date ranges.

• Post Type filters (Blogs, Events, Subjects, Questions, Debates, Polls, Quotes, Beliefs)
• Date range filter (Posts created between this date and that date)

PAGINATION
Users should be able to page through results.

• Next/Previous button
• Numbered pages 1,2,3…10 etc
• Total posts/current posts ("Displaying Posts 21 - 30" for example)
• Kind of think sticky pagination would be pretty cool, at least for mobile

1-5 star reviews of the Organization, or Reviews left by the user on Organizations

• For Organizations: All Reviews left by users for the Organization
• For Users: All Reviews User has left for Organizations

• Social Network Analysis
• NLP

• Feedback/tickets/contact

• Posts by title, profiles by name

The Post page is pretty straightforward. It is basically an article with a title, an author, some stats, as well as an upvote/downvote feature, and a comments section.

Primary Objective: Typography
- Headings, Paragraph, Lists, Fonts, Colors, Spacing

Main information
- Title, post content
Meta information
- Author name (as hyperlink), post category, post type, element, difficulty, etc.

View Counter
- It should display a count of how many times the page has been viewed
Upvote/Downvote
- Ability to up vote and down vote a Post
- It should display a count of up votes and down votes e.g. 123 up/35 down
- It should have a ‘Popularity’ ratio of 0-100% based on the ratio of down votes to up votes

Tags
- It should have a clever and useful tag mechanism, such as a tag cloud
Links
- It should have a section for links/attachments
- images, video, audio, links to other webpages
Comments section
- Should have a list of comments
- Meta: User picture, username, user influence, date, comment, downvote/upvote
- Should have an ‘Add Comment’ form

History is very similar to Notifications, only in reverse. While Notifications are other user actions related to current user, History is a list of actions current user performed.

• You viewed {username's} profile
• You commented on {username’s} post “{post title}”
• You liked {username’s} post “{post title}”
• You disliked {username’s} post “{post title}”
• Each profile view should have a picture of the user that was viewed
• Each username should be a hyperlink to the user
• Each post title should be a hyperlink to the post