User Guide

Before Continuing with this User Guide, please make sure you have deployed the frontend and backend stacks.

Deployment Guides

Index	Description
Landing Page	Features on the landing page
Find Group	Searching for public groups
Create New Group	How to create groups
Group Profile	Features on the group profile page
Joining Groups From Group Links	How users can join a group
Log Action	How to log an action
Validate Actions	How group owners and Admin can manually validate actions that have failed rekognition's validation
Admin Dashboard	How admin can manage actions and quiz questions
Account Settings	Managing user account information
User Profiles	Viewing other user's profiles

Landing Page

Once a user is logged in, the Landing Page displays relevant updates including alerts, the user's recent progress, leaderboards and a list of the groups a user belongs to. There are 4 main sections.

1. Alerts

The New Actions in Need of Validation alert is displayed when the user is an admin or a group owner and there are actions by their group members that they need to validate
The Actions Pending Validation alert is displayed if the user has any actions pending manual validation. This alert shows the potential impact of the user's pending actions

2. Recent Progress

This section displays the collective CO2 impact of all users on the app, and the current user's weekly and cumulative CO2 saved

3. Leaderboards

There are 2 leaderboards to toggle between: Global Groups (ranks all groups in the app) and Group Users (ranks all users in the app)
Users can filter the metric they want to view by clicking the filter button (available metrics are Total CO2, Weekly CO2, Total Points and Weekly Points)

4. My Groups

This section displays all the groups that the user belongs to
Clicking on the group name will redirect to the group's profile page
Clicking on the dropdown accordion opens up charts displaying the user's individual contribution for each group stat (hover over each colour in the graph to see labels - grey is the contribution of all other members, green is the user's contribution)
Users can also access the Create Group page by clicking the Create Group button (More information in Create New Group)

Find Group

The search bar on this page searches through all public groups to return group cards for any groups with a name that matches the user-inputted search term

Create New Group

This page contains a form for users to create a new group (an example use case would be a teacher creating a group for their class)
The required fields are Group Name and Group Privacy (private groups require a password for users to join the group, and will not be discoverable through the Find Group searchbar)
The successful creation of a group will redirect the user to the newly created group's profile page

Group Profile

A group's profile page contains general group information, a list of group members and their actions, and a leaderboard showing how the group is progressing compared to other groups. Group owners and admin users can manage group members and group information on this page as well. This page contains 3 sections:

1. Group Overview

This section displays the group's number of members, privacy and recent statistics
If a user is not part of the group, they can join the group by clicking on the Join Group button
If a user is already part of the group, they can leave the group by clicking on the Leave Group button

2. Leaderboards

There are 2 leaderboards to toggle between: Global Groups and Group Members
The Global Groups tab displays the rankings of all the groups on the app, along with the group's current placement
The Group Members tab displays the rankings of the group's members, based on how much they have contributed to the group
If a user belongs to the group, they will see their individual contributions to each metric (Total CO2, Weekly CO2, Total Points and Weekly Points) in pie charts beside their current ranking

3. Group Profile Tabs

The Group Profile tabs display relevant group and group member information. Group owners and admin users can also manage group members and edit group information (description, password, privacy, profile photo) here.
The 5 tabs are:

1. Group Info

This tab displays the group's description and a list of all the group owners

2. Member Actions

This tab displays all validated actions submitted by members of the group
Admin users will be able to view an Unapprove button on member actions to override Rekognition's validation or the manual validation done by group owners. Admin users can also unapprove actions on the user's profile page

3. Group Members

This tab displays all group members (group owners will have a star icon by their profile picture)
Clicking on any member profile picture will display their name and role, as well as an option to go to their user profile (More information in User Profiles)
A user can view the option to leave the group by clicking on their own profile picture
A group owner or admin user can view the options to promote/demote/remove group members from the group by clicking on that member's profile photo
If a group owner decides to leave the group and they are the only owner, they will be prompted to select another owner before they can leave successfully
If a group owner decides to leave the group and they are the only member, a popup will be displayed warning the user that the group will be deleted if they leave

4. Add Members (Only Displayed To Admin or Group Owners)

Group owners or admin users can invite users to join a group by copy and pasting the group link found in this tab and sending it to the users that they want to add
Private groups will also have their group password available to copy and paste, as invited users will be prompted to enter the password to successfully join a private group
More information about the join group process can be found under Joining Groups From Group Links

5. Edit Group Info (Only Displayed To Admin or Group Owners)

This tab contains a form to edit the group's information
The required fields are Group Name and Group Privacy - if a group is set to private, then the Password field is also required

Joining Groups From Group Links

When a user receives a join group link, they can paste it in their browser search bar and it will open a pop up with an invitation message, prompting them to join the group
A success message will then display and redirect the user to the group's profile page
For private groups, users must enter the group password to successfully join the group

Log Action

Users can log their actions and submit their related action photo on the Log Action page. The log action flow has 7 steps:

1. Select Action

Users start by selecting an action to log from any of the icons displayed

2. Select Date

Users then select the date on which their action was successfully completed. Users can click on the calendar icon to display full calendar view

3. Action Fact

A related fact to the action will be shown here. If a user has seen all possible facts, the action's fallback text will be displayed. If there is no fallback text set for the action, there will be a default message displayed

4. Action Items

Users must enter input for one or more of the action items for their selected action

5. Validation

Users can upload an image relating to their action by dragging and dropping the image or by clicking the Browse button
This image will undergo Rekognition validation to determine if it contains any of the action type's relevant image validation labels

6. Bonus Question

A question related to the action fact shown in step 4 will be displayed here. The user can choose to skip the question, or answer. If the user answers the question correctly on the first try, they receive 10 bonus points. Otherwise, they have multiple tries at the question but will receive no bonus points.

7. CO2 Saved

The action will be submitted and undergo Rekognition validation (if there is an uploaded image). If the image has passed validation, a success message will be shown along with the CO2 saved. In the cases where the image does not pass validation or the user did not upload an image, the message will inform the user that the action is awaiting manual validation and display the potential impact of that action.

Validate Actions

Admin users and group owners can validate actions through the Validate Actions page (admin users can validate actions submitted by all users, while group owners can only validate the actions of members of their groups)
Unvalidated actions will be displayed with relevant information (date, name of user, action name, action items, co2 saved, total points earned, and the groups that the action was submitted to).
Admin users and group owners can approve or reject an action by clicking on the Approve or Reject buttons on the right hand side of the action card

Admin View:

Admin users can toggle between 3 tabs: My Groups, Users Without Groups, All Unvalidated Actions
In the My Groups tab, users can filter their search using the Group Name or Action Name toggle buttons
If the search toggle is set to Group Name, clicking on the search bar will display all groups that the user owns
If the search toggle is set to Action Name, clicking on the search bar will display all the possible action types within the app
The Users Without Groups tab displays unvalidated actions from all users that are not a part of any groups
The All Unvalidated Actions tab displays unvalidated actions from all users of the app, regardless if they are in a group or not

Non Admin View:

Users that are not admin users but are group owners will only be able to validate the actions of members of their groups

Admin Dashboard

Users can only navigate to this page through the navigation bar if they are admin users. The Admin Dashboard is used for viewing overall app statistics, creating new action types and quiz questions, and managing existing action types and quiz questions.

There are 4 tabs:

1. Dashboard

The Dashboard tab displays app statistics, such as the total number of users and groups, the total number of actions submitted with/without an image, the total CO2 saved and the total number of actions submitted by all users. All graphs can be filtered to show data for the past 7 days, 30 days, and year.
To view more specific information about a point on a graph, hover over the data point and a popup will appear
To filter and view data from only 1 label category on a graph, click on the label that you wish to hide

2. Create Action

The Create Action tab contains a form to create a new action type with required fields being the Action Name, at least 1 Action Item, and at least 1 Image Validation Label
The Fallback Text field is what is shown by default in the Action Fact step of the Log Action menu flow if there are no quiz questions created for that action (shown in image here)

3. Manage Actions

In the Manage Actions tab, admin users can view and edit information about currently existing action types, as well as delete, pause and restore them.

Admin users can click on an action icon to view the action and its corresponding information (Action Icon, Action Items, Fallback Text, Image Validation Labels)
Clicking on each individual action item will display the Name, Description and CO2 Saved Per Unit fields for that action item
To edit the action information, click the Edit Button
To delete an action, click the Delete button. If an action is deleted, all user submitted content for that action will also be deleted
To pause an action, click the Pause button. When an action is paused, it will not appear as an option on the Log Action menu for users to submit to
Paused actions will appear with a greyed out icon on the Manage Actions menu
A paused action must be restored by clicking the Restore Action button before users can submit content for that action

4. Manage Quiz Questions

In the Manage Quiz Questions tab, admin users can create new quiz questions or edit existing quiz questions for any action type.

Creating Quiz Questions

Admin users can click on an action icon to view and create action facts with quiz questions for that action
To create a new quiz, click the Add New Question button
The required fields for creating a new question are Fact Text, Question Text and at least 1 Possible Answer
To mark an answer as correct, click the checkmark icon on the left hand side of the answer. The answer will then become shaded in (in the following image, test answer on the left hand side is marked as correct). Multiple answers can be marked as correct.

Here is an example of a sample quiz, along with an explanation of how the contents of each field will be displayed:
The Fact Text field will be the fact that is displayed in step 3 of the Log Action menu:
The Question Text field will be the question that is displayed in step 6 of the Log Action menu, and the inputs to the Possible Answers field will be displayed as multiple choice options. If multiple answers were marked as correct options, the user will get the question right as long as they select 1 of those options.
If an action has no quizzes and no fallback text, then a default message will be displayed in the Log Action menu, and the Bonus Question step will be skipped.

Editing Quiz Questions

To edit existing quizzes, click the Edit Existing Questions Button. This will display all the quizzes for your selected action
Click the pencil icon on the upper right hand corner to edit. This will change the card into a form, which has the same functionality as described in the Creating Quiz Questions section
To delete a question, click the Delete button on the bottom left hand corner
To apply changes, click the Save button on the bottom right hand corner
To switch out of the Edit View, click the pencil icon again

Account Settings

Users can edit their information and view all their submitted actions on their Account Settings page.

Editing User Information

Click the Edit Info button in the top right hand corner
This will open a form with 2 sections:

For users to edit their name, email and profile photo

For users to change their password

Viewing Submitted Actions

All the submitted actions for a user are split into 3 tabs (Validated, Awaiting Validation, Did Not Pass Validation)
The Validated tab displays all actions that have passed validation
The Awaiting Validation tab displays all actions that have failed Rekognition's validation and are now awaiting manual validation
The Did Not Pass Validation tab displays actions that have failed Rekognition's validation as well as manual validation. If the user uploaded an image along with the action, the image will be greyed out

User Profiles

There are 3 sections that are displayed when viewing another user's profile.

The user's profile picture, name and email

A list of the public groups that the user is a member of

A list of all their validated submitted actions

Admin users can go onto user profiles to unapprove validated actions by clicking the Unapprove button
Regular users will not be able to see the Unapprove Button

Uh oh!

FilesExpand file tree

UserGuide.md

Latest commit

History