profile

A page which dynamically displays a User's profile information.

Overview

Editor

Desktop (When the Current User is viewing someone else's profile)

Mobile (When the Current User is viewing someone else's profile)

Desktop (When the Current User is viewing their own profile)

Mobile (When the Current User is viewing their own profile)

Why does this page exist?

The profile page allows Users to display their name, profile picture, a short biography, personal website, their following and followers. When the Current User is viewing a profile page of a fellow User, the Current User can choose to follow/unfollow or send a message to that User.

The Current User can also click on the Text "Following: X" and Text "Followers: X" elements texts in order to view those lists of Users. The rest of the page can be customized to display any type of content relevant to your application:

Who can access this page?

Only logged-in Users can view this profile page. This makes sure that only Users with an account can send messages to, and follow, other Users. If the Current User is not logged in, they will be re-directed to the homepage.

What does this page allow my Users to do?

1. Follow/Unfollow the User

2. Send a Message to the User

3. View the User's Followers

4. View Who the User is Following

5. Edit Profile (if the Current User is Viewing their Own Profile)

Where do my Users click in order to go to this page?

When clicking on another User's Profile Picture

Logged-In Users are automatically taken to the profile page when they click the profile picture of a fellow User.

Users can click the Group Current User Profile element within the user picture/dropdown reusable element to view their profile page:

Users can click the Group Current User Container element within the mobile menu (list) reusable element to view their profile page:

desktop navigation

mobile menu (list)

header_navigation

When are my Users taken to this page?

Users are never automatically navigated to the profile page. They are taken to the profile page only after clicking one of the links or icons which navigate them there.

What else should I keep in mind about this page's workflows?

Every 10 seconds, this page updates the Current User's "last date online" field (type: date, list: no) to the current date and time, using this workflow:

If you do not wish to run this workflow every 10 seconds for capacity reasons, you can remove it.

The profile page allows Users to view their own profile information, and the profile information of other Users in the application.

The Follow/Unfollow Button on the Profile Page

When the Current User is viewing someone else's profile, the Button Follow and Text Button Send Message (or Edit Profile) elements are shown to the Current User:

When the Button Follow element is shown, and the Current User isn't yet following the person whose profile they are viewing, the Button Follow element's text will be "Follow":

When the Button Follow element is clicked, the Current User is now following the person whose profile they are viewing. As a result, the button's text conditionally changes from "Follow" to "[checkmark] Following".

When the "[checkmark] Following" text is hovered, its text will conditionally change to "Unfollow":

If the "Unfollow" text is clicked, the Current User will no longer be following the person whose profile they are viewing.

The Message Button on the Profile Page

When the Text Button Send Message (or Edit Profile) element is clicked, and the Current User is trying to send a Message to a friend, the Current User will be navigated to the messages page, with two additional parameters:

v = new (this shows the FG - Create New Conversation element once the messages page is loaded)

u = [the unique ID of the person who the Current User would like to message]

When the messages page is loaded, the FG - Create New Conversation is shown automatically, and the "u" parameter User is automatically added to the "Selected Recipients" custom state (type: User, list: yes). (This custom state stores the list of Users who the Current User wants to start a Conversation with):

This way, the Current User can immediately start typing their new Message when the messages page is loaded. An existing Conversation will be displayed if there is one between the Current User and the selected User(s).

The Edit Profile Buttons on the Profile Page

When the Current User is viewing their own profile page, the Text Button Send Message (or Edit Profile) or Text Button Edit Profile (Mobile) elements will be visible, depending on whether the Current User is on desktop or mobile.

Editor

Desktop:

Mobile:

Preview

Desktop

Mobile

These buttons' texts are "[pencil icon] Edit". When clicked, these buttons' workflows navigate the Current User to their account page, in order to edit their profile information.

What else should I keep in mind about this page's design?

The page navigation changes conditionally based on the width of the page as shown here:

When the Current User is Viewing a Fellow User's Profile:

When the Current User is Viewing their own Profile:

The profile page shows the desktop navigation, mobile header, and mobile submenu reusable elements conditionally, depending on the current page width.

Here you can see that the desktop navigation is shown when the current page width is greater than 887 pixels in width.

Once the page width is less than 887 pixels, the desktop navigation element becomes hidden (using a responsive, hiding rule) and the mobile header and mobile submenu reusable elements are shown, so the Current User can easily navigate the application.

When the Current User clicks the Icon Menu element within the mobile submenu reusable element, the admin page's FG - Mobile Menu and FG - Fade Overlay elements are shown: