FS-Achievements

1. Purpose

The purpose of this document is to explain the functionality expected for the achievement's page in the together application. The main focus is to describe about the achievement earned, user achievements, group achievements, multiple achievement levels.

2. Scope

The Functional specification document will describe the requirements, components involved, and basic design to be implemented.

3. Component

The proposed configuration, component, and the process flow covered in this document includes:

1. Achievement logo

2. Name of the achievement

3. Image of the achievement

4. An indicator level

5. Achievement description

6. Status bar

4. Context

The achievements are earned by users and groups (issues) by performing certain actions a specific number of times. User achievements are earned only by the actions completed by that user, whereas group achievements are earned by the combined actions of all members of the group. Often, achievements have multiple levels in many cases. Users and groups can level up achievements by performing the required action more times. Each subsequent level requires more actions completed than the last.

5. Design Wireframe

The below wireframes describes the various components and their designs for the together app.

Achievement section in together app

List of achievement's logo

6. Requirements

The requirement section explain in details about the requirements to develop achievement section at various levels in details.

A. Achievement Section

An achievement is the result of User's task accomplishment. For every task completion the user will be awarded with the respective badge. The below points should be followed while creating the UI design for achievement section:

A standard blank achievement image for achievements which haven’t yet been earned. Example Image shall be similar to the below image:

Unearned Achievement Logo

The achievement design assets are located in the Figma page given below: https://www.figma.com/file/KKi8eIqDaHrXMB0t6mL6NQ/Together-%7C-Discovery?type=design&node-id=1401-38276&mode=design&t=rAhpcLSH0LukbVaI-0

B. Achievement Levels

There are various levels of achievements based on the User's action. The achievement section consists of four categories namely Image, Name, Description, and Status bar. The below configuration must be followed while creating different achievement categories:

1. Name

The name of the achievement will vary based on the level reached by the user. The names that can be eared by users are Subscriber, Influencer, Professional Writer, Superstar, Supporter, volunteer, etc.,

2. Image

The image of the achievement will vary based on the level reached by the user. Each name earned by the user will have the image specific to that and should be updated as the User's levels alter. Example images are listed below:

Achievement Level 1 (Name: Better With Two)

Achievement Level 2 (Name: Fist Bump)

3. Description

Each achievement earned has a unique description and the details should include the reason of achievement "What it's for?" and "How it's earned?".

4. Status Bar

A status bar (with numbers like “17/20”) shall be added below the description to indicate the number of actions required by the user to reach the next level.

The below diagram is an example of an achievement

An Achievement example

The achievement names, actions, and levels are located in the spreadsheet below: https://docs.google.com/spreadsheets/d/1TG8pLoylT-VbF9KRnGijxc3VdoKk3-lTvNXzxK3ux6c/edit#gid=2136638298

c. Achievement Indicator

A user shall have any number of achievements based on their actions. So, each achievement must be displayed with the indicator to remind the number of actions required by the user to earn their achievements.

The below image is an example of achievements at various levels:

Achievements to be earned