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?
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.
When clicking on their name in the user picture/dropdown Reusable Element
Users can click the Group Current User Profile element within the user picture/dropdown reusable element to view their profile page:
When clicking on their name in the mobile menu (list) Reusable Element
Users can click the Group Current User Container element within the mobile menu (list) reusable element to view their profile page:
When clicking on the Profile links within any of the desktop navigation , mobile submenu, and header_navigation Reusable Elements
desktop navigation
mobile submenu
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?
This page updates the Current User's "last date online" field (type: date, list: no) to the current date and time every 10 seconds using this workflow:
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/Edit Profile element is shown to the Current User:
When the Button Follow/Edit Profile element is shown, and the Current User isn't yet following the person whose profile they are viewing, the Button Follow/Edit Profile 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 Edit Profile Buttons on the Profile Page
When the Current User is viewing their own profile page, the Button Follow/Edit Profile element will be visible if the current page width is greater than 725 pixels; the button's text will be "Edit Profile". If the page width is less than or equal to 725 pixels, the Button Edit Profile (Mobile) element will be visible instead.
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?
Desktop/Mobile Navigation
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 more 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:
