NOT DECIDED YET

# NOT DECIDED YET ## Team members: Qilman Beytullazada Farid Talibli Baigutanova Aitolkyn Sanjarbek Rakhmonov ## Video [Youtube link ](https://www.youtube.com/watch?v=zvezDRca0n8) ## Representative screenshots ![](https://i.imgur.com/acyV2iV.jpg =250x) **Fig. 1. The main page users see once logged in. Uniqeness: no waste of time, quickly proceed with JOIN to start** ![](https://i.imgur.com/9u5r9i9.jpg =250x) **Fig. 2. Uploading the video to validate the result. Now others can check if they want.** ![](https://i.imgur.com/JuNjTI4.jpg =250x) **Fig. 3. Creating a customizable challenge.** ![](https://i.imgur.com/LS9IoxN.png =250x) **Fig. 4. Filterable leaderboard to check progress.** ![](https://i.imgur.com/oxA62B8.jpg =250x) **Fig. 5. The "filter by challenge" feature.** ![](https://i.imgur.com/VPQcBX1.jpg =250x) **Fig. 6. The profile tab where all challenges a user took part in are displayed together with the recored videos.** ![](https://i.imgur.com/vex9WsJ.jpg =250x) **Fig. 6. Report the dishonesty feature.**  ## Quality Arguments While building the platform, simplicity and intuitive user interaction was our top priority. Platform is very easy to navigate with seamless switching from one page to the other thanks to navigation buttons at the bottom. Navigation can be seen in the screenshots provided. Initially when we were working on the design, one of the comments made by the user was the following: “Opening the challenge page and reading all information and scoring criterias every time I want to make a submission is redundant if I am already familiar with them.” To tackle the issue we decided to make the submission easier. Users can submit their video and results directly on the challenge list without switching to the separate page dedicated for the challenge. They just press "Join" button next to the title of the challenge and submission form appears. To keep people motivated to take part in challenges, we made a profile page were people can see their past scores and work on improving them. It can be seen in Figure 6. Most of our users reported that keeping track of their progress was very easy and encouraged them to participate in even more challenges. Humans are inherently competitive because we evolved like that. If there is a challenge in front of us we try to beat the challenge and come on top, especially when other people can see us. Becuase from evolutionary point of view, that earned the respect of the people and increased the chance of our survival. To exploit that behaviour our main task was to create a competitive enivronment. To achieve that and to promote active user engagement, we developed the leaderboard page. There users can see how they fared compared to others and filter the leaderboard based on the challenge. Page is very intuitive and simple with nothing extravagant. The design of the page can be seen in Figure 5. Even though our platform is web application we wanted to make the experience of the people to be on par with mobile apps. One of the user complaints at the beginning was not being able to record their videos directly on the website. Therefore we added the feauture where users can start recording their videos on the submission form for the challenge. It improved the usability of the platform without relying on outside recording tools and apps. ## Evaluation In order to test our system we conducted user studies. First, we briefly introduced our system and explained what they can do with it and then gave users concrete tasks to perform with our UI. After that, they freely explored any interesting features and answered our interview questions. We advertised the system among our friends because we thought that participants will feel more motivated when sharing results with people they know. In total, we had 10 participants, and their demographic information is given in the table below. ![](https://i.imgur.com/Su3qrow.png) We asked all the participants to rate how likely they are to use our system if deployed in real-world, and the average score was **3.1/5**. This suggests that people are willing to use our system, but there are some limitations: * Difficulties understanding how challenges are created. Users wanted more explanation or some examples when filling the form of creating a challenge. * Concerns about the score validity. Users wanted scores to be thoroughly checked. Despite these limitations, users liked certain features of our UI: * Leaderboard combined all information on the other participants of a challenge users participated in, which made it easy for them to navigate and immediately compare their results. * Users enjoyed watching each other’s videos. One participant said: “Wow, this is actually so fun!” when she saw her friend’s video. * The design was intuitive and the chosen color palette appeared pleasing to some participants. Below are some of the statistical results we obtained through our deployment. ![](https://i.imgur.com/kYxDsDF.png) We tracked how many users succeeded in completing each of the tasks we asked them to do. As the figure above shows, users had no difficulties signing in and checking their progress in the leaderboard (except for one participant) but some could not easily create a challenge and join it without our help. Also, some users did not join a challenge because they could not record a video. ![](https://i.imgur.com/CkbYgF6.png) We have also asked participants to rate our UI from 0 to 10 based on the 4 criteria given in the figure above. We then averaged the answers and rounded to the closest 0.5. Overall, we got more than 5 for all the criteria. Interestingly, participants considered our system novel. One paticipant said: "That is cool that I can participate in these challenges with my friends and share results as in social media, but more targeted on my fitness goals. This makes it feel new."   ## Discussion Our project allows users to participate in and create their own 1 minute sports challenges. For a sporting app which involves fitness, challenge is very important as it not only pushes one’s body but his mind as well. With that said, given current circumstances of worldwide lockdowns, people have lost motivation to work out and be a part of a gym. **Explicit motivation by sharing and competing:** Our application allows users to create challenges and participate in them by uploading videos and stating their scores. The ability to see others’ scores and performance on a certain exercise creates a competitive social environment, where everyone is thriving to share their progress and try to outperform each other. One of the important points of our platform is hiding the leaderboard of a challenge from users until they join it, to ensure that they push themselves to their absolute limit and do not just do 1 more repetition than the top spot. We have also disabled rejoin challenges to ensure that users cannot check the others’ scores and then adjust their result to get the first place. This also contributes to the competitive environment because users do not know what to expect from their competitors and try their best. **Social interaction (presence of others and being seen by others):** Most gym-goers are used to seeing other people exercise around them during their workouts. This is also an important social interaction in the gym environment, although a not so direct one. We recreate this and even go further to create a more personal interaction by allowing the users to see each other’s videos. This helps users feel the presence of others around them and provides them a sensation of a social unity - collaboration, as they all strive to achieve the same goal. We decided that the duration of each video should be 1 minute, since most people would not be willing to watch a longer video, and we decided to make the duration of a challenge 3 days with 10 maximum participants not to get challenges too crowded, and preserve diversity of challenges. **Privacy:** When it comes to privacy, this can definitely be a limitation for people not willing to share their videos. However, we are planning on extending the application to support private challenges, which can be joined by invites only. This will allow users to participate in challenges privately with their friends and have fun in sharing videos with each other. **Quality control and monitoring social norms:** Finally, as there is a feature of reporting, which is monitored by the moderators of the application, people are provided with the option to be heard, when they disagree with someone else’s claim or feel cheated. This is done for quality control, to make sure that the trolls and “fakers” are banned from the system. ## Individual Reflections #### Qilman Beytullazada I developed the user profile page, where the user can see all the challenges in which he took part, what score he got there, compare overtime progress and see the video he posted, along with basic user details and a sign-out option. I also operated on the application router, where in the navigation menu I moved to the active application tab, depending on the one that the user is pressing. Finally, I added the application sign-in component and connected it to the router to verify if the user was signed in or not. Some of the fundamental difficulties I had during the involved, such as difficulties in selecting the right class names, so that for the teammates it is also understandable. Also, it was a little frustrating to refer to the figma prototype with non-symmetric styling when I needed to set the necessary paddings and margins to maintain it consistent. I learn using the js redom library while working on this project and implemented the functionality by using it. I learned more about the meaning of the code's modularity and reusability, and why we need to organize it. I have also learned to use a minimum number of external libraries to create single page web applications with vanilla setup. I learnt testing properly during this projects, for example usage of break points in the browser. The team did a great job as well. They were responsible and hardworking. Though we had some tense moments, overall the development process was not the worst. We could meet sometimes number of times in a week to get the job done, but we obtained better results when we separated our tasks. #### Talibli Farid When it comes to the challenge screen, I implemented the overall logic of the application, where the user can see all the challenges on the screen as well as build new challenges or enter the current ones. I sorted them and tested if they have over 10 participants or they are expired on the client side on every load because we have no backend server to do this. I also worked with the initial entries on the setup of the database and linked the OAUTH to the web app. In addition, I added the functions for my teammates to collect data from the database along with handling and submitting the forms. Additionally, I added the video modal, so that the user can see the video inside the same window. We tried to make a minimalistic design to the application with minimum on-screen changes and items to avoid information overload. We also took a similar approach to implementation to minimize the time spent on learning a framework or a library and maximize the output of the team by either using something easy to learn or that all of us know. I think overall, we worked great as a team. Of course, in the beginning we were not really sure that the team is going to work, since we had a lot of disagreements, but we quickly learned to compromise and cooperate which I think happened naturally overtime. One of the major tendencies that I reallly liked was that everyone was treated as an esqual in the team, that's why we all felt comfortable stating our opinion, proving our points and sometimes even arguing. Through all that we figured out a way to correctly talk to each other and collaborate in the most efficient way possible. Through this experience I learned a lot about what it takes to create platforms that involve social interactions and understood the dynamic, in which one user is required to have others, whch in our case is one user needs to create an interesting challenge, to have more people attracted to the platform. I also learned that when it comes to the GUI it is really essential to keep it minimalistic not to overwhelm the users. Our initial iteration was not as good, because it contained too many small details, but overtime we learned that we need to balance everything. I also understood that it is not always necessarry to use a fancy framework to implement a decent product. #### Aitolkyn Baigutanova In the implementation, I have contributed to setting up the storage database to upload videos, and display them accordingly in the leaderboard when clicked. I also worked on the overall design of our interface to improve the aesthetics, such as color palette choice, dynamically changing timer for challenges, and consistency between the tabs. I have also worked on recording the input from the forms to the database. I have added a report feature and recorded that to our database as well to reflect upon the validity of scores concern. Overall, our team could resist all the difficulties of remote collaboration, though it was sometimes challenging to set meeting time because of time zone differences. Also, we had some long discussions when we needed to decide on some important steps of our project at first, especially with brainstorming and creating the storyline. However, it is good that my teammates could freely express their opinions and raise their concerns to others and we could decide together. This definitely helped us to overcome any misunderstandings between team members. For my future projects, I would try to communicate with my teammates more closely because I believe there are many things we can learn from each other. This time it was quite challenging due to the distance learning. Regarding the social computing aspects, I realized how powerful the community can be in influencing each other. People who are seemingly diligent sportsmen can be in fact very dependent on their surroundings. We need some external validation of our progress and seek encouragement from others. Online platforms successfully create this sense of community which can be a great motivator for people and we should definitely use these positive aspects. Also, I learned how privacy can be important, we should be very careful when developing some platforms and consider all possible personalities and scenarios because some people do not want to expose themselves to the public. Finally, I have learned how quality control can be tricky to monitor, there can be so many people using the platform which make it impossible for humans to manually check all the suspicious behaviors on the website. I think depending on each website’s purpose, the quality control should be uniquely adjusted. #### Sanjarbek Rakhmonov During bulding the platform I worked on editing the html file and linking all the interactions together with the javascript files. I researched appropriate libraries, designig the overall application and the layout along with which screens should be added and what should be present on them. I also provided my teammates with some of the final html code for individual elements and pages, that was a prototype for them to work on and add on the DOM. I created a modal for the page and provided my teammates with appropriate IDs and bootstrap/custom designed classes. I also made minor contributions and changes to the CSS file. To be honest, intially working together as a group was a little hard. We had some disagreements and it took us a long time to unanimously agree on something whether it is small design change or big conceptual change. I think part of the reason for that was we not being able to communicate well online. Because of the pandemic, all of our meeting were virtual and it is not always easy to express everything through the screen. However, as we progressed forward and things became clearer, we started working more efficiently together. Everybody helped each other as much as they could. Whenever I had a problem understanding something, my teammates always patienly explained and guided me through it. Therefore, I think the main issue was finding the common project idea that everybody could agree on and the rest were easier to decide. While working on the design of the project, what I understood is simple design is actually harder to implement than the complex one. The reason behind it is we are trying to achieve something complex while keeping the design and tools on the screen to the minimum. As a developer, we might be tempted to think that everything we are creating is easy to use and intuitive. However, we should not be illusioned by this. We think it is intuitive because it is our own creation, but users might not feel the same way we do.