Final Report

[RyuChigon]

Cheers Final Report

Members

Chigon Ryu
Dain Kim
Subin Kim
Huikyeong An

Representative Screenshots

[Main Page: Users watch a live sports streaming with others.]

[Archiving: If many users do “cheering”, the moment is archived. Then users can see it]

[Character, Chatting and Emoticon: users can interact with others]

[Mini-Game 1: press space bar and get points]

[Mini-Game 2: press space bar when character is on the blue bar]

Quality arguments

In the perspective of UI components & visual design,

We designed Characters, emoticons and most of the components by ourselves by using pixel drawing tools without using exterior tools like Bootstrap. Through this, we were able to give a unified and organized visual mood.

We designed four kinds of characters so that users could express their identity through them. Many testers gave enthusiastic feedback that the design of the characters were cute.

We focused on separating the participants into two teams, so the participants could feel a sense of belonging. For this, we separated the colors of the character, chatting balloon, and added a team-colored frame and a logo of each team in the main page. We also divided the user’s positions depending on the team during the minigame.
We also inserted two kinds of minigames to strengthen the interaction of users and give motivation in participating. The minigames are based on a simple action of pressing the spacebar, and the scores are based on team interactions, which also strengthen a sense of belonging.

When chatting, the chat balloon appears on the left top of a character. We purposefully didn’t make the contents of the chat appear on the character because in an actual stadium, we can hear the voices but it’s hard to catch the contents due to noise. Also, the page can get too messy.

Cheers detect the number of cheering and if it’s bigger than a certain proportion of the current users during intervals, the moment is archived. Then users can enjoy the moment by using the “ViewPoint” function.

In the perspective of usability,

We tried to focus on being able to use the character without much explanation. For this, we used a bright box to differentiate the user’s character from others. Also, characters are movable through arrow keys which is also intuitional and supports social interactions.

People can watch the game and other users at the same time, which makes reactions during the game more interactive. Moreover, we enabled live streaming function through software streaming tool OBS, so that permitted users can live stream in the service individually.

We also included a short term for noticing the start of the minigame to prepare the users, and added timer counts on the edge of the screen. The blue square that iterates in the minigame 2 also makes the timing to cheer in rhythm more easier.

To concentrate the minigames, we gave some components changes during minigames. Video size becomes smaller, the Chatting Box is closed and users are located at suitable space for progress of the minigame.

We made an administrator account that makes quality control easier. By users being able to report other users, and the administrator confirming the decision to kick out certain users prevents bad quality users.
Also, the report function of the administrator and being able to monitor the chatting is helpful in controlling the overall crowds.

Evaluation

Participants of survey

16 testers used all the functions of Cheers. Then, they responded to several survey questions.
First, we surveyed the preference level of sports. Most testers love sports and miss the live sports game. So we could think Cheers is a suitable service for these sports lovers. Next is the section of our service.

Our respondents as a whole liked sports, had experience watching the game on the field, and missed the experiences. Therefore, it can be seen that they are appropriate subject to a survey.

Character, Emoticon and Chatting

Feedback

Positive

• Users liked how we could choose characters, and some were satisfied with the cute designs. Many users thought this could help the interactions of users.
• Many liked that we could watch live streaming games while using the characters.
• Many liked the existence and the reaction speed of chatting.

Negative

• Some users thought customizing the characters could have been more interactive.
• Some users thought that increasing the kinds of characters and emoticons could have been better
• Some users thought that using emoticons could be more intuitive.

According to the result, users were generally satisfied with the character, emoticon, and chatting functions. Although some users wanted some variety of design, basically they all agreed that the main function is helpful for interaction and enjoying the game. So we can conclude that these functions support social interaction between users and motivate them.

MiniGame

Feedback

Positive

• Because minigames’ rules are simple, most users can understand how to play and they feel novelty by the presence of Minigames.
• There was feedback that it was nice that the flow of the game was similar to the game in an actual stadium, and they could feel competitiveness towards other teams, just like they were at the stadium.
• Overall, users thought the game was creative and fun.

negative

• Some users wanted more time to read the tutorial or felt the need for practice games beforehand.
• Some users wanted diverse motions other than the cheering motions.

Most users positively evaluated the reason for existence of minigames, that allow users to feel the actual live game at the stadium, and simple rules. However, they suggest some improvements for user understanding and game fun.

Overall

Overall, users were satisfied with the main functions, which were using characters, playing the minigame, and watching live streaming & archiving and reporting users. Users liked that they could choose the characters and interact with each other, use different motions, and liked the simplicity of controlling the motions.
Compared with existing services like Youtube, social interacting elements in Cheers were original compared to previous services so users love Cheers because it has many chances of interactions with others.
However, users also gave feedback that it would be nicer to have more diverse characters or motions, and minigames. Also, they gave feedback that the overall UI could be more organized and delicate.

Appendix

Character, Emoticon and Chatting feedback

Minigame feedback

Overall positive feedback

Overall negative feedback

Differences from existing platforms

Discussion

What worked well?

In terms of quality control,

• Users were satisfied with the functionality of being able to report and the administrator monitoring & kicking out bad users. This could prevent certain users from chatting inappropriate messages.
• We also made the score count proportional to the number users in each team (for instance, if there are 3, 4 people each in team1, team2, then each click of team1 would have the value of 4 and each click of team2 would have the value of 3), which can give more fairness to the minigame score.

In terms of incentives for participation,

• Through competing for a better score in the minigames, it leads to more active participation through competition with other teams.
• The hottest moments of the game can be archived by users’ cheering, and it gives users satisfaction and induces more active participation.

In terms of supporting social interaction,

• Various ways(emoticons, characters, character movements, chatting) to express themselves were most contributed to supporting social interaction. We observed interesting, unexpected behavior patterns such as following someone, leaving someone, moving into the team’s section, etc.
• Through the mini games, users can unite with those who support the same team. Also it leads to more active participation through competition with other teams.

In terms of privacy,

• There’s no need to expose personal information(face, name, etc) because users can use nicknames and representative characters.

What didn’t?

In terms of quality control,

• We made the user reporting function simple, so it was difficult to find a bad user as originally intended because users reported indiscriminately.

In terms of incentives for participation,

• We made all users move into the minigame screen when the administrator started the minigame. However, some users didn’t want to participate. They required the choice to participate in or not.
• There were no specific rewards for the winning team after the minigame except for the notice. We could have given a stronger incentive for winning the game, such as playing a theme song for the team.

In terms of supporting social interaction,

• We made the characters move behind the streaming window. Since we couldn’t deal with the problem that it needs to click before moving the character, once the character moves behind the streaming window, users might never move the character again.

What would you have done differently?

• When reporting, the function to select a reason should also be included. And we would make reporting time limits to protect the indiscriminate reporting.
• We would give users a choice to participate in the minigame or not and proceed with agreed users.
• We would limit the character's movement outside of the streaming window so the character can't move behind it.
• To motivate users more and make them more active, we would offer a reward for winning the minigames and tutorial of the minigames.

Individual Reflection

Chigon Ryu

What part of the implementation did you contribute to? Be concrete and honest, please.

I contribute to making a high-fi prototype. I have developed a web service so I led making a high-fi prototype. First, I made two github repositories for frontend and backend. I installed and set necessary modules and packages like react, styled-components, etc. At this moment, I think that it is not enough because we have different code styles and we may be confused to start. Considering the confusion, I wrote code for the first draft(initial, choose game/character, main pages) in advance. Also, I installed EsLint, Prettier and husky and these modules made our code format be unified. These initial settings made our members get code direction and unify our code like one person writing. There were drafts I made so we just needed to add or refactor codes. In conclusion, it helped write code and accelerated to make a high-fi prototype process.

What worked well and not in your team? How did you overcome any hurdle in teamwork? What lesson about teamwork did you learn that you might apply to your next team project?

In Ideation, we had a project topic list by brainstorming and watching a live sports streaming service(Cheers) was a strong topic among them. But we have 2 hardships. First, some members didn’t feel the need for the service because they weren’t interested in watching sports. In this case, we respected the opposite opinion and persuaded by using reliable reasons. Second, we were suspicious of making this service at our development level. But we found some references and made a mini demo. Then, we saw the possibility. We were good at respecting a minor opinion and finding the possibility of development before executing. One lacking point is consuming too much time. We were not skillful at web developments so this project was a big challenge. Especially for me, implementation to live streaming and archiving services made me spend too much time referring to huge references and googling. So we made “regular development day” and progressed it not only together but also individually. Too much time investment was difficult because we took other courses. But we got over it because we loved the fun development process and Cheers. Through teamwork, I learned that the standard of our team is important. Teamwork makes “one” output by “very different” members. So it is necessary to make some rules or standards of processes such as code format and work method. By this project, I become more skillful of cooperation and regulation tools like github, EsLint, and Prettier.

Through the team-based design project experience, what did you learn about social computing and web-based GUI implementation?

I learned Gamification is an important element of social computing. It gives users energy which makes them participate actively and get interesting. Mini-Game in Cheers and Cheering appears as our gamifications. On baseball streaming characteristics, there are terms between innings so I want to insert gamifications into them. Actually, test users said Mini-game is a fun and important element. Also, I learned that design elements have important positions. Our team made our own characters and components like chatting and buttons, mostly not using external modules. And I consider components location for users. As these are considered, Cheers looks at its own lively moods and users can use Cheers intuitively.

Dain Kim

I constructed administrator page UI and made user list&kick-out function. For both of minigame1&2, I made the game process including countdown, scoring logic(get points at once as the number of opposing team), announcing winner, move users from/to minigame and back. And I implemented everything of minigame2 including moving bar&scoring logic like rhythm game, restriction on keyboard operation before&after the exact game playing.
In terms of role distribution, each person knew what they could do well and distributed the roles well. And as soon as a new issue or something to do occurred, everyone had an attitude to voluntarily take charge of it. And each task could be done almost perfectly in parallel, so there was no delay or friction process.
In term of communication, new ideas were always respected because we had an attitude of respect for each other. Also, thanks to the free and enjoyable atmosphere, we could come up with more fun& creative ideas. In addition, if the team members were informed of any issues, we quickly checked and answered, so we could develope the program quickly through active interaction.
In terms of responsibility - due to the nature of our program, there were many cases of developing things that we had not done before. Each member played a challenging role one by one, and all of us didn’t give up on our own challenges and did it to the end, so we could succeed despite many difficult tasks.
There was no problem with the teamwork between the team members. The problem was the possibility that I could harm other members who have experience in and good at developing since it was my first time developing a web program. So I personally invested a lot of time and effort to quickly learn web development and narrow the gap with other team members.
I think it’s important to have a lot of conversations right after the team is formed. We need to fully learn each other’s styles so that we can clearly understand their messages without trouble. And in the case of development projects, it seems essential establishing the framework of the project at the beginning. And I think speeding up this process ASAP is the key point that can set both the direction and speed of the project.
Social computing is basically based on social interaction between people, so the interaction between team members must be fun and creative to improve the idea of the project. And above all, feedback from actual users, not team members, seems to be the most effective way to find weakness in the blind spot of team members. In addition, as it is a web-based GUI, users’ feedback is essential because how the targeted user feels is more important than any other field. And I think it can be more effective to receive user feedback frequently even if the current state of program is incomplete rather than to think too long among team members.

Subin Kim

I Initialized & Managed backend database. This includes Connecting MongoDB and server with mongoose and express, and connected Server and Frontend using axios. I implemented Real-time communication of emoticon and movement using database, socket.io and redux. I stored the emoticon and the positions in the database, and every time a position or emoticon changes, the information is sent using the socket.io. I established synchronization of scores in minigames via the redux. Every time the score goes up, I update the database using socket.io and mongoose, and return the scores to all the other users using socket.io. The users updated their own redux states using the received information from the socket.io. I implemented Minigames UI by iterating all the userlist and mapped the users in ImageList component. I also figured out the algorithm for Minigame2 timer. I helped the teammate who was in charge by finding the implementation of stopwatch using useRef and setInterval functions, so that the wave could move in synch with the time. Finally, I implemented the Report and Return Home function. I added a report modal and a report variable in the mongoose schema. If someone was reported, I sent this information to the server, and also modified the chat balloon UI. In addition, if you press the Return Home, the user gets deleted from the database so the user disappears from other user’s pages as well. I sent the information of the user who clicked ‘Return Home’ and deleted the user from the database in the server.
Teamwork worked well in our team, almost to the point that we all trusted each other. The initial stage of ideation was the hardest part, because we could not think of diverse ideas, and two of us wanted to do the current project, but the other two wanted more crowdsourcing aspects. We overcame this by explaining the detailed visualization of each other’s ideas. I learned to respect other member’s ideas even though I might not agree with it, because there were several occasions that even though I did not think it was a good idea, it proved to be useful. I also learned that organizing workload within members could highly reduce the time and effort consumed. The best part of our team was that we each had skills that others didn’t, and were able to make up for each other. For instance, the 4 members were each good at coding, visual designing, English and structuring reports, and really fast at learning and pointing out important parts.
I learned that it needs a lot of studying to build an effective, well-working social computing service. Web-based GUI was a great deal of fun, and I learned a lot about react framework and mongoDB. I also learned that when actual users start using the service, lots of unexpected errors occur. Now I know that debugging and managing the service constantly is an important part, just like in the reading material about the lone hacker trolling the Shredder challenge.

Huikyeong An

I created image sources such as character and emoticon. Also, I implemented a chat system. Using socket.io, I have implemented both functions where the user's message sent is delivered to all users, and the administrator can send a notification to all users. I created a socket for sending messages and a socket for receiving messages so that every users can see same messages. I also contributed chat box UI. It is a form of wrapping the message content with a round rectangle and the color of the chat balloon is changed according to the team with the information of the message sender. I also added a feature that automatically scrolls down as messages stack up. The administrator's notice used a timer and a variable that records the number of consecutive notices so that it disappears automatically after 4 seconds based on the latest notice.
In one line, the teamwork of our team is “very good”. The balance of the team members' abilities is good. There are members with excellent aesthetic sense and members with excellent development ability. Also, there was a situation where the scope of the subject was enlarged by presenting creative ideas. In this way, they were able to form a complementary relationship by having things that each other did not have. In terms of project progress, we were able to create synergies complementary to each other. At first, most of us were awkward about development. Under the advice of a team member who knows best about development, other members understood the code and started implementing each major function one by one. As I studied hard about the part I was assigned to, I was able to understand it deeply. By sharing this knowledge and know-how with other members, we were able to teach and receive instruction from each other. I think this has created a synergistic effect. Thanks to these points, I think we were able to successfully complete the project.
While working on a project with a team base, I felt the importance of communication more than anything else. This is because there were many times when problems that I had been looking for and pondering on my own for a long time were solved quickly when I consulted them with the members. Also, I felt that implementation and publishing of the service was not easy because it was very different when a team member tried it and when more people connected at the same time in the demo because a lot of errors occurred. Also, it was good to hear various opinions from user feedback, and the most interesting thing among them was about the chatting quality control. For the chatting quality control, we simply added the function for users to report troll user, and we totally believe it. However, user feedback has uncovered new issues. A new direction for quality control was needed in that users could report trolls, so I felt it was a complex issue that simply couldn't be solved.

Video Link

https://youtu.be/mWQXH55Iu4A