JIRA's Wisdom of Crowd

An Artificial Intelligence powered real time multilingual team voting application.

Comment


Wisdom Of Crowd

An Artificial Intelligence powered real time multilingual team voting application built with Atlassian's connect framework.
View the demo »

Table of Contents

About The Project

Wisdom Of Crowd video

An AI powered realtime team voting app to make better decisions. The first distinct quality that separates us from other similar platforms is the customisability/flexibility that we offer. The exhaustive coverage of the various forms of discussion encompassed in a single multilingual group chat platform, to ensure a comprehensive exchange of ideas and conveying of ideas.This completely changes the way remote teams work. This app make use on Atlassian's connect framework and Jira's rest api along with AWS's Translate and Polly for AI.

Inspiration

The inspiration of this came to us while pitching an idea to a group of friends, who all had their opinion regarding it, so we decided why not create something which enables us to easily take a note of each other's opinion and analyse it efficiently to move forward with the idea/project and give a direction to it. It can be efficiently used for effective decision.

What separates us from the other similar chat platforms?

The first distinct quality that separates us from other similar platforms was the customizability/flexibility that we offer. The exhaustive coverage of the various forms of discussion encompassed in a single group chat platform, to ensure a comprehensive exchange of ideas and conveying of ideas is something that this idea has brought forward.

Highlight Features

  • Real time voting 
  • 7 types of questions
  • Real time language translation in 11 languages
  • BarCharts and PieCharts for each question
  • A dynamically generated PDF report
  • AI powered video generation

How it works ?

The app allows you to take an opinion on your idea by asking questions about the same to your fellow team members, the results are displayed instantly in the form of bargraphs and piecharts along with a Pdf report of all the details about the questions asked. Our app also provides dynamic video generation of the data presented as well as real time language translation options using AI, so that you friends can give an opinion in their own language, this in turn helps you to take a better approach to give a direction to your idea.

Also, this app takes advantage of the Atlassian's Connect framework and Atlaskit UI along with JIRA's Rest API to provide a platform to raise issues and generate ideas along with the benefit of team voting, to get real time statistics of the data. Not only this with the integration of slackbot and AWS Rekognition, along with AWS Translate, AWS S3 and AWS Polly , the functionalities it becomes capable of doing are limitless.

Want to know more about it's features ? Checkout the link below:

Wisdom of crowd features

Components and App Walkthrough

Before starting add members to your Jira workspace you need to add all your team members in a group named 'wisdom-of-crowd' in order to choose and invite members to the session.

Step 1

Home Page

You are welcomed with the home page of the app, which has a create new Session button.

What is a Session ? A Session is basically a Q/A round you play with your team mates.

On clicking the button you are taken to create a session page.

Step 2

Create Session Page

On create wisdom of crowd session page a form is shown to fill out the session details, in order to store the data in the database.This allows you to create a new session, by filling in :

  • Session Name
  • Session Description - telling what it's about
  • Number Of Questions - the number of questions you want to ask for that particular session.

On submitting the form the data is added in the database and you are now directed to Add people and time page, to enter more details about the session.

Step 3

Add People And Time Page

This page consists of a form which gives you the option to invite other members to your session, up next you schedule a time and date when the session will take place, as soon as you create the session, you are directed to the Questionnaire Builder page to add you own questions.

Step 4

Questionnaire Builder Page

This page allows you to build up set of questions you want to ask for the session. On clicking the add questions button, a modal pops up asking you the question details like:

  • Question Number
  • Question
  • Question Type

For certain types of questions you specify a set options you want people to select from. All the questions are displayed in a data table to give the user an idea of the order in which the questions are going to be asked after the meeting starts.

Types of Questions For Direct Decision Making

Various question types to choose from are are -

  1. Wisdom Of Crowd -In wisdom of crowd round a question is put up, everybody gives their answers and then all the answers are collected.Then we have a voting round, now what happens in a voting round is basically everybody chooses from each others answers, so you pick the answer that you feel best solves the problem and wait for others to choose their answers, once everyone is done we show how many times each answer was chosen so that we get to the best solution for the problem at hand.

  2. Yes Or No - This type of question allows you to choose from either the yes or no options. These are as simple as the name suggests.

  3. Rating - This type of question allows you to rate something .Think Amazon Reviews. For example, "How was the food yesterday, rate it from 1 to 5"

  4. Multiple Choice - This type of question allows you to choose any one option from the options provided. This is suitable for answers which have less than 4 options

  5. Dropdown - This type of question allows you to choose an option from a number of options provided in a dropdown menu, it is kind of similar to multiple choice. You choose this type of question when the number of options is more than 4.

  6. Checkboxes - This type of question allows you to choose any number of options from the options provided. You can select all those answers which you find appropriate .

  7. Ranking - This type of question allows you to drag and arrange the options in a particular order you want to rank them. For example, you could ask team members to rank possible modes of communication.

Upon clicking the submit question button, the question is added in the Questionnaire Builder. The question can be edited or deleted from the Questionnaire Builder anytime before the session starts.

When you have added all the questions you want to ask your team members, you click on save and continue button are saves all the questions in the database database and the session creator is directed to Session Dashboard page, to view all his sessions.

Step 5

Session Dashboard Page

This page allows you to manage all your sessions, all at the same place.This includes three types of sessions that is my sessions, pending sessions and completed sessions, with a toggle button to switch between card view or table view based on your preference. You can edit a session's questions, delete a session, start a session, join a session, or get a final pdf report. You can also get an AI generated video for the session.

Types of Session on your dashboard

Dashboard consists of three types of sessions:

  1. My Sessions - These type of sessions include all those sessions which have been created by you. It has all the session details along with some buttons -

    • Start Session - It becomes active only five minutes before the session's scheduled time, and when the user clicks this, a session is started and user waits for his team members to join.
    • Edit Question -It allows you to edit the questions for that session before the session starts.
    • Delete Session- this button is used to delete a particular session.

  2. Pending Sessions - these type of sessions include all those sessions to which you have been invited to. It has all the session details along with two types of buttons -

    • Join Session - its activated only after the Session creator starts the Session, this on being clicked directs the user to the waiting area, if the session is started by host, so that they can become part of the question and answer round.
    • Delete Session- this button is used to delete a particular session meeting request.

  3. Completed Sessions - These type of sessions include all the completed sessions, both created by you and joined by you. It has all the session details along with a few special types of buttons -

    • Generate Final Report - this upon clicking displays a final report of all the questions that were asked in that session in a table.Thus allowing the user to get a detailed view of each and every question.
    • Generate PDF - on being clicked this generates the PDF for that session, which includes all the session details as well as question details of each question that was asked and along with images of the question statistics, the statistics of that particular question, that is form of bar graphs and piecharts, all in the PDF.
    • Generate Video Report - this upon clicking gives you an AI generated video , about all the questions that were asked. AWS Polly gives the voice and Viola we have a video explaining the entire question.


Step 6

Waiting For Players To Join Page



WaitingForPlayersToJoin

When the user clicks the start button or the join button from the session dashboard, they are directed to the waiting area, where they wait for other members to join the session.Only the session creator has the ability to start the session, no other member can do so.The user then chooses his preferred language from the dropdown, as stated before we have a total of 11 languages to choose from.

AWS Translate


AwsTranslate

Supported Languages

  • English(English)
  • Hindi(हिन्दी)
  • Chinese (中文)
  • Spanish(español)
  • Arabic(عربى)
  • Dutch (Nederlands)
  • French(français)
  • German(Deutsche)
  • Italian(Italiano)
  • Urdu(اردو)
  • Japanese(日本人)

This page also has an interesting feature, when the user reaches this page, a dropdown is shown, asking user to select their language, the game auto detects the language with the help of AI and the use of AWS Translate almost instantly, this allows the user to answer the questions for the meeting in their own language, thus solving the problem of language differences, there is even a toggle button to switch between their chosen language and default english language.

Before the start of the game the user picks his preferred language.Let us say User A picks "French" The question asked is, "How would you describe the current situation?" which is translated in real time to "Comment décririez-vous la situation actuelle". User A chooses to answer in French, "C'est tres mauvais" which translates to "It is very bad". And he or she waits.

Step 7

StartSession

After all the players have joined the session, the session creator clicks the start button to start the session.Once the session starts, the questions that were decided by the creator are put forward to all the attendees of the meeting, and they are required to answer the question based on it's respective type.

Question and Answer Round

So the session begins when session creators(let him be called Sarthak) clicks on start session and waits for team members to join, Jane joins, Vaibhav joins, Varun joins, the session length is decided based on number of questions creator has entered for that session. Once everyone has joined Sandy starts the game.

Step 7.1

Enter Answer Page

EnterAnswer

Once the sessions starts, all the attendees are shown the same question, the picture shows the question 'How is the lockdown treating you?', and the question type is 'Wisdom of Crowd', which means the user can write their own answer. Multi-language support means that irrespective of what language the user answers in it is automatically converted to English.This is the video call equivalent of idea sharing with the added benefit of being anonymous. This helps in overcoming the hereditary bias we inherently have in decision making.

  • Sarthak answers "Great".
  • Jane answers "Awesome".
  • Vaibhav answers "Boring as hell!".
  • Varun answers "Nice".

Waiting for players to answer Page


WaitingForPlayersToAnswer


Once user has answered the question by clicking on the submit button, they are directed to waiting area and they wait while other members also answer the same question, and then only you could proceed to to the next step of the game. If the member has already answered the question, a check icon is shown beside their name.

  • As Sarthak answered first, he waits for Varun, Jane and Vaibhav to answer.
  • As Varun answered, he waits for Vaibhav and Jane to answer
  • As Vaibhav Answered, he waits for Jane to answer
  • And finally Jane answered

The game collects all answers and proceeds to next step of the game.

Step 7.3

Choose answer page

ChooseAnswerFromList

After all members have answered, they are directed to the choose answers page.This page requires user to select the answer which they find the most appropriate from their fellow team member's answers. You are shown all other member's answers as options, while others are shown your answer and not their own answer as options. Why? So that you can't choose your own answer :)

Sarthak is shown all the answers in a jumbled order

  1. Nice
  2. Boring as hell!
  3. Awesome

Sarthak chooses the third answer, "Boring as hell!"

Jane also chooses,"Boring as hell!"

Vaibhav chooses "Nice"

Varun chooses "Awesome"

In this Round Sarthak chose Vaibhav's answer and his answer "Great" was not chosen by anybody.

Step 7.4

Waiting For Players To Choose Answer Page

WaitingForPlayersToChooseAnswer

Once user has chosen an answer they are directed again to a waiting area where they wait for others.

  • As Sarthak chooses first, he waits for Varun, Jane, and Vaibhav to choose their answer.
  • As Varun chooses, he waits for Jane and Vaibhav to choose their answer.
  • As Vaibhav chooses, he waits for Jane to choose their answer.
  • And finally Jane chooses

The game collects all the chosen answers as responses and directs the user to display statistics page.

Step 7.5

Display Statistics Page

DisplayStatistics

Once all the users have chosen the answers they feel are right, all the users are shown the results for the question in the form of barchart and piechart. The charts show how many people have chosen a particular answer. The legend for chart shows how many votes each option got.

The legend of both barchart and piechart shows that :

Responses Votes
Boring as hell! 2
Nice 1
Awesome 1
Great 0

Step 7.6

Waiting For Players To Be Ready For Next Question page

WaitingForPlayersToAnswer

Once user have seen the question statistics they click on ready button, on clicking they are directed to a waiting area again where they wait for others.

Step 7.7

Subsequent Rounds


SubsequentRounds

after all the players have clicked on ready button, they are displayed the next question, and the process goes on in a similar manner.The only difference that the other question types have from wisdom of crowd question type is that they don't get to choose from other member's answers, because they are provided with predefined options to choose from, while all the other rounds remain the same.

As an example , all the user's are shown the next question, "How do you feel about remote work?(MULTIPLE CHOICE)"

As it is a multiple choice question everybody is provided with options to choose from as answer

Options
I love it.
I am getting used to it.
I don't think remote work suits me.
Neutral.

The above table shows an example how options are displayed for each question other than wisdom of crowd question type.

Step 8

Session Dashboard page

After the session has been completed the user is redirected back to session dashboard, and now the session which has been completed, which was earlier in my sessions or pending sessions is now shown in completed sessions.As explained before the user can see the report in Jira itself, get a PDF or get an AI generated video.

Step 9

Final Report Page

This page consists of table which includes all the information about the questions that were asked for a particular session, such as :

  • Question Number - stores the number of each question.
  • Question - stores the content of each question asked.
  • Question Type - stores the type of each question asked.
  • Options - stores the option if any for each question asked.
    • On clicking this field, a modal pops up showing detailed view of options, that is how many votes did each option get.

  • Display Statistics - on clicking this button a modal opens up showing the question statistics for answers in the form of pie chart and bar graph.

Sample Video and Pdf Report

View the sample pdf at : https://wisdom-of-crowd-airtable.s3.amazonaws.com/5f0a492f8c6d1dc9020ba813-pdf.pdf

More About The Libraries Used

AWS Polly

Amazon Polly turns text into lifelike speech, allowing you to create applications that talk. Polly's Text-to-Speech (TTS) service uses advanced deep learning technologies to synthesize natural sounding human speech, this along with ImageMagic in node is used to generate explainatory videos.

View the sample video at : https://wisdom-of-crowd-airtable.s3.amazonaws.com/5f09f636021cfca73dbf18c5-video.mp4

AWS Translate

Amazon Translate is a neural machine translation service that provides fast, high-quality language translation. Neural machine translation is a form of language translation automation that uses deep learning models to deliver accurate translate. We use translate in 3 ways:-

  • To translate question from English to other languages
  • To translate the user's answer back to english
  • To translate other players answers
    • C'est tres mauvais, in French is converted to It is very bad

    JIRA's Rest API

    The Jira REST APIs are used to interact with the Jira Server applications remotely. The Jira Server platform provides the REST API,In this app we use JIRA to save the accountId to MongoDB. We plan to use it create a new issue related to question giving the user the power to add comments.

    Know more about our app

    Checkout the website to see more features-

    Wisdom of crowd features

    Roadmap

    • Integrate a chat bot to do all of this process hands free.
    • Make the game ui more interactive
    • Make a mobile app depicting the same
    • Test our app with a company

    Contact

    Sarthak Arora - sarthakarora1208@gmail.com

    Varun Ramnani - varunhhhrahul@gmail.com

    Vaibhav Garg - vaibhavgarg.exe@gmail.com

    Youtube link

    Wisdom of Crowd

    How I built it

    This game was built using Atlassian's Connect framework and Atlaskit UI, MongoDB, React, Redux, Express, Node and Redis Streams and Data Structures, Aws Translate, S3 and Polly.

    Atlaskit Ui: This is used to design the ui components in React to make the App more attractive and visually impressive.

    Atlassian's Connect Framework:It acts as an bridge between the react app and JIRA, we use Webpack to bundle everything in the form of a module.

    MongoDB: This is used to store user info, and questions in the game, addtionally it stores data about the previous games

    Node: NodeJS works as backend of the application the players communicate to the Redis streams by the means of POST Requests.

    Aws Translate: This is used for real time language translation, thus allowing user for cross language communication.

    Aws S3: This is used for data accessibility and storage, for images and pdfs generated also the videos are stored in this way.

    Aws Polly: This library along with nodejs is used for text to speech conversion and AI videoo generation.

    Challenges I ran into

    While setting up Connect Framework and using Atlaskit ui components, then there was the challenge of setting up the app with Jira and using AWS translate and AWS polly and S3 bucket along with some challenges with redis streams.

    Accomplishments that I'm proud of

    We were able to make a decent enough App which can be efficiently used by various companies as a solution to team voting and for instant accessibility of data as well as solving the problem of cross-language communication.

    What I learned

    1. Using typescript efficiently
    2. Using Jira and Atlaskit ui properly
    3. Implementing Model-View-Controller pattern in backend
    4. Using JWT authentication in NodeJs
    5. Setting MongoDB Atlas
    6. Defining Complex Schema's in MongoDb
    7. How to setup a full stack application using the MERN stack
    8. How to set up a connect app
    9. Setting up Redis on our machines
    10. Using Redis Streams
    11. Using Lists in Redis
    12. Using AWS, that it's S3 bucket, Translate and Polly.

    Wisdom Of Crowd Round French Uncut

    Wisdom of Crowd French Uncut

    What's next for Wisdom of Crowd

    • Integrate a chatbot to do all of this process hands free.
    • Make the ui more interactive
    Share this project:

    Updates