Homepage

platformOS CommunityKit Business Logic

Last edit: Mar 17, 2023

Users

Register user

The user can create an account on the community site by entering their email address and password, and agreeing to the Terms of Service, Privacy Policy, and Code of Conduct.

After registering, the user gets access to the site automatically.

Onboarding

After registering on the site the first screen displayed for the user is the onboarding screen.

  • On this screen, predefined community topics will be listed as hashtags.
  • The user can decide which hashtags they are interested in, select those, and click the “Let’s go” button. Not selecting any of the hashtags is allowed.
  • After clicking on the button, the user lands on their activity feed where they can find the selected topics in the sidebar and the related posts on their feed.

Edit profile

The Profile Edit page allows users to modify their

  • first name (required),
  • last name (required),
  • username (in this version it is an optional field, it can depend on the project needs),
  • email (required),
  • interest (optional): users can select the topics by clicking on the hashtags with relevant texts on it,
  • location: select the country from a drop-down list
  • text of the short bio,
  • job title,
  • employees,
  • LinkedIn URL,
  • and profile picture.

After editing all required data, clicking on the Update profile button will save all changes.

Posts

Create post

At the top of the right side of the page, the user can share a text and/or image. Clicking on the image icon allows users to upload a picture, then clicking on the Post button will share the content in the user’s feed. All followers of the user can see this content. Posts use Markdown formatting.

Edit post

Users can edit their posts by clicking on the … icon on the top right corner of the post and selecting Edit post.

Delete post

Users can delete their posts by clicking on the … icon on the top right corner of the post and selecting Delete post.

Comment on post

Users can comment on a post by typing in the Write a comment… field below the post and clicking the Post button.

Like post

Users can like a post by clicking on the heart icon below the post.

Activity feed

Activities from the followed hashtags, groups, and community members are under the sharing/posting option. All activities display the name of the member who created it, time/date and content of the post, and the number of likes and comments.

  • If the content comes from a followed group, the user will see it as: “the post xxxx posted in the yyy group”,
  • If there are any comments connected to a post, that will appear under the post. Posts can be commented on by any group member writing in the input field or uploading a picture by clicking on the picture icon right in the input field.
  • Adding a Youtube link as a post is displayed as a video.

Groups, followed users

The activity feed shows all the activity (posts) that the user is following: hashtags, groups, users. The sidebar menu is located on the left side of the page, where the Activity feed menu item is selected when the user lands on the page. The other menu items are:

  • My Groups: with the number of the groups the user joined. It points to the listing page of the joined groups.
  • Followers and Following: with numbers about the followed/following users. These point to the listing page of the followed/following users.

Following

All followed users and ones suggested to follow are displayed under this menu item. From all followed users, this pages shows only a couple and will reveal all followed users by clicking on the See all button (upper right corner of the page).

All users are displayed on cards. The cards are clickable on the user’s name and picture. The cards contain information about the title and workplace of the member and a follow request button on the member’s cards who are not followed yet. In case of already followed members, the cards don’t have follow request buttons but apart from that they look the same as the cards of not followed members.

This page also offers all options in the sidebar menu that the one under the Activity feed menu does.

User profile - Following

When you see a user’s picture, name, and other personal data in the header section it shows that you are standing on someone’s profile page. Information will appear based on how the user provided them.

The available information are:

  • user’s name,
  • short introduction,
  • location,
  • start date of their membership,
  • link to its social media (e.g. LinkedIn),
  • and also its title/role and workplace.

Under a user’s profile it can be checked who that user is following.

  • Followed users are displayed on cards. The member’s name and picture are clickable on the cards. The cards contain information about the title and workplace of the member, too. In case of an already followed member, the cards don’t have follow request buttons.
  • A followed member can be unfollowed by clicking on the Unfollow button next to their profile picture, in the header.
  • A search field under the header allows the user to search by typing someone’s name in the search field and then clicking on the magnifying glass icon button.

This page also offers all options in the sidebar menu that the one under the Activity feed menu does.

Tags

Hashtags: The followed hashtags are located under the sidebar. Users have the option to choose one or more new hashtags to follow, by clicking on the offered hashtags under the already followed ones. It is also possible to remove hashtags from the followed hashtag lists by clicking on them. Clicking on the “Show more” link reveals more hashtags to choose from.

Events

Posted events appear in user’s feeds just like other posts.

The post contains information on:

  • who created the post,
  • date of post,
  • created event (appearing as the event cards on event listing page),
  • likes and comments.

There are like and commenting options.

The posted event is clickable on the More info button and the Event name, where clicking on it navigates the user to the event detail page. Tags are also clickable.

Groups

Groups listing page

The Groups listing page collects all created groups (except the ones where the visibility is set to secret) and displays them as cards that summarize the basic information on the group such as

  • group name (link),
  • tags with keywords on the group,
  • a snippet from the introduction statement of the group,
  • number of members,
  • number of posts,
  • join button.
  • Cards have a clickable cover image if it was added.
  • The name (link) and the image on each group’s card is clickable. The card contains a Join button. A group can be filtered by topics using the input field connected to it on the upper left corner of the page, below the header/main title.
  • Users can sort groups using the drop-down on the upper right corner of the page (below the main title).
  • Created (oldest first),
  • and Created (newest first).

Information on the search result appears in the upper left corner of the page, between the filter bar and the group cards.

Joined and suggested groups

Joined and suggested groups - empty

The My Groups listing page lists all groups that the user joined. Suggested Groups to choose from are also displayed. A user can find this page when clicking on the My groups menu in the sidebar.

If the user hasn’t created a group yet, a help text on the top of the page suggests that they can create a group. In the sidebar menu, the My Groups, Followed projects, Followers, and Following menu items are marked with a number if they include more than 0 items.

Joined and suggested groups - populated

If the user created a group, it will appear as a card on the My Groups listing page. The card’s cover picture, title are clickable to open the group. There is no button added to the card. The Create a group button lives in the upper right corner of the page, and navigates the user to the group creation page.

Join group

Join a private group

Users can join a private group by going to the Group details page and clicking on the Request to join button. A group administrator can give permission to the user to become a member of the group.

Join a public group

Users can join a public group by going to the Groups listing page and clicking on the Join button on the card of the group they would like to join.

Invite user to group

Regular group members and group admins can reach this page when selecting the Invite new member option from the more actions icon on a group’s detail page. Typing in the search field the user can search for other users to be invited to the group. The search field automatically populates the possible results where users can select the right member to be invited. More users can be searched for and selected for inviting them at once. From the already found and selected other user’s list, the user can also delete the ones they are not intending to invite anymore. Once the user found all other users to be invited, clicking on the Send invite button, invited users will be notified about the invitation.

Members

Members are displayed on cards where the member’s name and picture are clickable. The cards contain information about the title and workplace of the member and an invitation button on cards for users who are not members of the group yet. For members of the groups, the cards don’t have invitation buttons but apart from that look the same as the cards of non-members.

There is an additional search field on the page (under the group’s header) which allows users to search for a user and send an invite to them.

Create group

A user can create one (or more) groups under the “My groups” sidebar menu item. On this page, a message/help text (“Join groups below or create your own based on your special interest.“) points the user to start with clicking on the “Create a group” button.

After this, a group creation page appears requiring the user to fill out the input fields with the group related information. All required fields are marked with (“required” help texts), others can be left empty.

Setting the group’s privacy is required, where users have three options to choose from:

  • Public: Anyone can join the group, see previous content, post & invite new members.
  • Private: Users can request to join the group, see members and the group description. Members can see previous content, post & invite new members.
  • Secret: Users can join the group through invite only. Other users can’t find the group via search.

Manage group (as admin)

The Manage group page works like the Create group page with the exception that the Manage Group page contains the information added by the user during the group’s creation. Another difference is that the confirmation button states “Update group info” instead of “Create Group”.

This page enables users to manage not just the group information under the Group info tab, but the members as well, by selecting the User management tab.

User management tab

All members of the group can be managed under the User management tab. Selecting the three dotted icon in a user’s row offers two options: remove the admin permission of the user or remove the user from the group. Sending direct messages to a user is also possible on this page by clicking on the Message button in the user’s row.

At the upper right corner of the page a search field is located, where users can search for group members by typing the user’s name in the input field and clicking on the magnifying glass.

Group activity feed

This page is populated with all activity (posts) in a group. Starting from the top, the group’s header contains the selected cover picture (if there is any), name and short description of the group, connected hashtags (e.g. UX, design, etc.), and an icon (with three dots) fore more action regarding the group, such as Manage notifications, Invite new member, Manage group, and Leave group.

The sidebar menu is located on the left side of the page, where the Activity feed menu item is selected and the Members menu item can be selected, too. Additionally, there is information on the group’s visibility, the creation date, name of the admin(s), detailed description of the group and the group’s rules (if there are any) as a link. Clicking on that link reveals the rules on the group’s About page.

Right under the group’s header, users can share text or pictures. Clicking on the picture icon allows users to upload a picture, then clicking on the Post button will share the content with the group.

Activities from group members are under the sharing/posting option. All activities display the name of the member who created the post, the type of the activity (e.g. “xxxx posted in the yyy group”), time/date and content of the post, number of likes and comments. If there are any comments connected to a post, they appear under the post. Posts can be commented on by any group member writing in the input field or uploading a picture by clicking on the picture icon right in the input field.

Events

Events listing page

The Event listing page collects all created events and displays them as cards that are summarizing the basic information on the event, such as:

  • date and time of event,
  • event name (clickable link),
  • tags with keywords on the event,
  • location of event (online or local/in person)
  • number of participants (that are going to the event),
  • a clickable cover picture if it is added,
  • and a More info button.

The event listing page shows upcoming events first.

Each card’s tag shows the type of event with different icons and color codes:

  • green - online event,
  • green - local/in person event,
  • gray - expired event.

A new event can be added on this page as well when the user clicks on the “+Add event” button that leads to the event creation page.

Information on the search result appears in the upper left corner of the page, between the filter bar and the group cards.

Pagination placed in the bottom right corner of the page allows users to check all events.

Event detail page

The Event detail page shows information on the event and enables users to subscribe for updates without joining the event, add event to calendar, and join the event.

The event’s header contains information on:

  • event title
  • date and time of event
  • type of event (online or local / in person)
  • location of the event (link to an online event, or address to local / in person events)
  • short description of event
  • topic tags with keyword on event
  • cover picture of event
  • subscribe for updates button
  • an add to calendar button
  • a button with a three dot icon containing a dropdown with the options to:
  • Manage notifications - Event’s creator and other users have it
  • Invite new member - Event’s creator and other users have it
  • Manage Event - only event’s creator has it

The creator of the event can manage / edit the event by clicking on the Manage event option from the dropdown list. Clicking on this leads the user to the Manage event page.

Right under the event’s header users can indicate their intention about joining the event by clicking on one of the three buttons:

  • Going
  • Maybe
  • Not going

This section also provides information on other participants who joined the event. Clicking on the See who’s going section opens a pop-up that lists all participants who clicked going to the event or clicking on Maybe when deciding about attending the event. It is possible to filter on people going and maybe going to the event by clicking on “Going (n)” and “Maybe (n)” words.

Each participant’s row contains:

  • the participant’s profile picture (if it is added)
  • name (clickable link)
  • title
  • and a connect button that navigates to the participant’s profile

Under the header appears detailed information on the event section. How detailed this free text section can be depends on the event’s creator. Here can stand e.g.:

  • event details
  • schedule of event
  • speakers of event
  • tickets and prices
  • location (external meeting link in case of online meetings, or address in case of local / in person meetings)
  • and sponsors

Create event

If there is no event yet or an additional one is desired, the user can create one in different ways:

  • under the “My events” sidebar menu item. On this page, a message/help text (“Join events below or create your own based on your special interest.“) leads the user to the right direction starting with clicking on the “Create event” button.
  • from the event listing page, users can click on the Add event button next to the filtering and sorting section.

After selecting one of these options, an event creation page appears requiring the user to fill out the input fields with information related to the event. All required fields are marked (with a red asterisk), others can be left unfilled.

Adding the start date and end date of the event is possible by clicking on the related input field and selecting the desired date and time from the datepicker.

Events can be online or local/in person events. Based on the selected event type user can add:

  • external meeting link in case of online events,
  • or address in case of local / offline / in person events.

Enabling comments to users (not just participants) is possible by using the toggle.

After filling in all required fields, the user clicks on the Create event button that triggers a notification to the admin who can approve or disapprove the event.

At the top of the page, information is shown on the event’s status. A status tag appears when the admin indicates whether the created event is approved or disapproved.

Manage event

The Manage event page works just as the Create event page with the exception that the Manage Event page contains the information added by the user during the event’s creation. Another difference is that the confirmation button states in this case not “Create Event”, but “Update event”.

At the top of the page, information is shown on the event’s status. A status tag appears when the admin indicates whether the created event is approved or disapproved.

Changing the start date or end date of the event is possible by clicking on the related input field and selecting the desired date and time from the datepicker.

Canceling the event is possible by clicking on the Cancel event button. This opens a popup message that informs the event’s creator that:

  • Community members won’t be able to see this event anymore.
  • Members who have subscribed for updates or answered “Going” or “Maybe” will be notified via an in-app notification.
  • Adding a reason for cancellation is possible using the input field.

Once the event is canceled it can not be published again. The event’s creator needs to create the event again.

Post to event

On the event detail page, users can type in the input field and send their posts to the event by clicking on the Post button.

Mark attendance

On the Event detail page, right under the event’s header, users can indicate their intention about joining the event by clicking on one of the three buttons:

  • Going
  • Maybe
  • Not going

This section also provides information on other participants who joined the event. Clicking on the See who’s going section opens a pop-up that lists all participants who clicked going to the event or clicking on Maybe when deciding about attending the event. It is possible to filter on people going and maybe going to the event by clicking on “Going (n)” and “Maybe (n)” words.

Each participant’s row contains:

  • the participant’s profile picture (if it is added)
  • name (clickable link)
  • title
  • and a connect button that navigates to the participant’s profile

Joined and suggested events

Joined and suggested events listing page - empty

The My Events listing page lists all events joined by the user, and suggested events are also there to choose from. The user finds this page when clicking on the My events menu in the sidebar.

If the user hasn’t created an event yet, a help text suggests that they can create an event on the top of the page by clicking on the Create event button. In the sidebar menu, the My events, Followed events, Followers and Following menu items are marked with a number if there are more than 0 items within.

Joined and suggested events listing page - populated

If the user created an event, it will appear as a card on the My events listing page. The card’s cover image and title are clickable to open the event. There is no button added to this type of card. The Create event button in the upper right corner of the page navigates the user to the events creation page.

Questions?

We are always happy to help with any questions you may have.

contact us