*Team Pongpong*

# DP5 Team Report

## Protocol

### Instructions for Preparation and Setting up the Testing Environment

* Example data to load: Prove photos, achievements
* URL: <https://pongpong-f1442.web.app>
* Browser: The latest version of Chrome

### Introduction and Informed Consent

Hello, we’re team Pongpong, working on a team project in KAIST CS374.
We have created this site mainly with the aim of providing processed information, consistently motivating and sharing opinions with people so that people who live helplessly indoors can have active hobbies outside.
The process of the test will be screen recorded. It can also be used for feedback for the development of our homepage if necessary.
The personal information you entered will be temporarily stored in the database, but if you want we will delete all of it after the test. If you are worried, you may enter the fake information.
I would like to inform you in advance that this test is for testing the usability of our website, not for testing your abilities.
If you continue with the user test, you will be considered to agree with all of the above.
If you feel pressured, stressed, or have any questions during the test process, please feel free to let us know, and if you want, you can quit anytime.

### Tutorial or Training

No tutorial is needed.

### Task List & Instruction

#### Preparation

1. Sign up using fake information.

#### Task 1

1. Think about what kinds of activities you want to try.
2. Search for activities you want to try and read the information about activity.
3. If you think it is not capable then search for other activities.
4. Choose your favorite.
5. Now start the activity.

#### Task 2

1. Check the achievements of the activity and select some you want to challenge.
2. Assume you have completed all the achievements.
3. Go back to the search page and revisit the activity information page.
4. Complete each achievement by uploading proof photos
5. Go to my page and check the current status.
6. Complete one activity.

#### Task 3

1. Write a new review, and click the like button for some reviews you like.
2. Add a new achievement for others.
3. Add new tags for the activity, so that others can search the activity with them.
4. Go to my page and check out the activity you've completed.

### Recording Strategy

* Using Zoom recording (no face) and screenshots
* Facilitator: The person who invited the participant.
* Recording and Capture: The another person.
* Observer: The other two.
* We will explain this later in detail.

### Questionnaires and Interview Questions

1. Was it easy to do tasks only by listening to the explanation? If there were any difficulties, please explain which parts were difficult.
2. How convenient was the searching with tags? Please let me know if more functions are needed in the search.
3. Is there any unnecessary information given on the activity information page? Or is there any more information that needs to be provided?
4. Did you feel inconvenience when you wanted to switch between pages?
5. Did you immediately come up with the idea of clicking on the label in the process of selecting and achieving challenges? If it didn't occur to you, what did you think it would be?
6. Are the five numerics criteria for each activity appropriately selected to help you choose it? Are there any measures that would be good to be added or removed?
7. If you don't feel like doing the achievements you've chosen, would you like to complete it with a fake photo or cancel the activity?
8. Wasn't it uncomfortable for the side menu button(hamburger icon) to disappear when scrolling?
9. Which do you prefer, the side menu always open or open when you click the button like now?
10. Do you like the overall color scheme of the page?
11. Is there anything else you would like to add or ask the next test user?

### Debrief Prompt
Our target users are enervated people who want to start an active hobby but have not found a suitable activity in their surroundings.
We found that they need to be provided with organized information of various activities and be motivated to continue the selected activity.
The reason is the related information is scattered messily on the Internet and doing an activity without a goal makes people lazy.
For them, we make a website which has several functions:
* tag searching to make searching activities easier,
* providing processed information about each activity,
* motivating users by offering achievements
* writing reviews to share one’s thoughts
* adding tags to make it easier for others to find activity.

Thank you for participating.

## Session Observations

#### Participant 1
##### Information about the participant
* Demographic information: 21 years old KAIST male freshman from Ethiopia, he lives in KAIST dorm.
* Method of recruit (relation): He is Myeonggyu's international buddy, so contacted by Facebook Messenger.
* Reason of invitation: Since he is a foreigner, he does not have many friends. Also, he does not belong to any club because he did not get much information about clubs. Hence, he has a lot of free and lonely time in his room.
* Context information: He likes only soccer very much among sports. However, since he does not have many friends in KAIST and COVID-19 is taking over the world, he has not been able to play soccer this year. Therefore, he is not doing any outdoor activities. Hence, he wants do some outdoor activity in some club.

##### Photo or sketch

##### Observations
* Firstly, he confused 'what is a tag exactly.'
* He had difficulty moving from ActivityInformationPage to MyProgressPage. It is same for other participants.
* He did not catch that clicking a label has some function.

##### In charge
* Facilitator: Myeonggyu Kim
* Recording and Capture: Changhae Lee
* Observer: Minseok Kim, Sangmin Lee

#### Participant 2
##### Information about the participant
* Demographic information : Male, Korean, KAIST 21, 19 years old. He lives in KAIST dorm.
* Method of recruit (relation): He is Changhae's tutee.(KAIST tutoring program)
* Context Information relevant to our interface: He lives alone in his room and he does not belong to any club(동아리). He is not outgoing. He usually surfs on the internet first before he starts something new.

##### Photo or sketch

##### Observations
* Because there were only a few activities in our database, it was quite hard to find available tags. So he recommended us to provide some recommendation tags in search.
* He understood well the concept of Include/Exclude tags.
* It seemed that the connection between Activity Info page and My Progress page was unintuitive. It took a while for him to find out how to access My Progress Page after clicking Start button.

##### In charge
* Facilitator: Changhae Lee
* Recording and Capture: SangMin Lee
* Observer: Minseok Kim, Myeonggyu Kim

#### Participant 3
##### Information about the participant
* Demographic information: Male, Hanbat National University 20, 21 years old, he lives in his home at Daejeon
* Method of recruit (relation): He is Sangmin's middle school friend
* Context Information relevant to your interface: He is the start of Corona generation. So he doesn't have any university friends to hang out with. He used to lots of activities but now he only plays games after weight training. He want to find new activities, achievements for weight training, and friends to compete with.

##### Photo or sketch


##### Observations
* It is hard to know that it is possible to go to the info page by clicking the cards in my activity page.
* There is no need for exclude tag, but after our explanation with some example with aquaphobia he understood.
* There were lack of datas to interact in a prototype
* It is hard to tell an acitivity is actually affordable by looking at the 5 numerics because the critieria are subjective and people have various opinions on each.

##### In charge
* Facilitator: Changhae Lee
* Recording and Capture: Minseok Kim
* Observer: Sangmin Lee, Myeonggyu Kim

## Usability Lessons

### Usability issues

##### Judgement Criteria
* High - Intention diffrent from the purpose of website creation
* Middle - inconvenient, but no problem to use
* Low - rarely inconvenient, but no problem to use

##### Organize by Theme
* Learnability
* Efficiency
* Safety

1. It is impossible to see the search result right after entering tags.(It is inconvenient to manipulate tags according to the result) **(H1 / Efficiency / P1)**
\- We can make the search bar be imbedded in the top blue bar after we entered at least one tag. Then in the search result page, we can manipulate the tags according to the search result.

2. It is hard to know that we can still select new achievements after we have completed all the selected achievements. **(H2 / Learnability / P1, P2, P3)**
\- After users have completed an activity, write some instructions that they can still add new achievement even if they completed their activity.

3. It is hard to find how to access MyProgressPage. **(H3 / Learnability / P1, P2, P3)**
\- Implement the start button to redirect to the MyProgressPage.
\- Change the location of the button to MyProgressPage to the horizontal bar or the side menu.
\- Add the process to the tutorial so users can get used to the function.

4. It is hard to tell an acitivity is actually affordable by looking at the 5 numerics because the critieria are subjective and people have various opinions on each. **(H4 / Learnability / P3)**
\- Before a user writes a review, show some pop-ups to inform the users about the criteria of numerics.
\- Change the numerics to more realistic numbers with units. (e.g. cost-effective:5.0 -> cost:500$ per month)

5. It is hard to find which tags are available in search. **(M1 / Learnability / P1)**
\- When there is no input, show some popular tags as an example.

6. The two buttons for selecting some existing achievements and adding new achievements are positioned too far from each other. They are in different pages. **(M2/ Efficiency / P1, P2, P3)**
\- Insert the 'Add achievement button' to MyProgressPage.

7. It is hard to know that it is possible to go to the info page by clicking the cards in my activity page. **(M3 / Learnability / P1, P2, P3)**
\- Put a guide text at the bottom of the topbar.

8. It is hard to notice the existence of Exclude tag. **(L1 / Learnability / P2, P3)**
\- We consider the Exclude tag as an additional function. For the most of users, it is okay to use only include tags. If some users especially hate some kinds of activity, we expect them to discover carefully on the screen.

9. It is hard to notice the existence of horizontal bar. **(L2 / Learnability / P1, P2)**
\- This is not a big problem since the horizontal bar is just for efficiency. If many users feel convenient without it, we are still happy.

10. It is hard to notice the existence of Go Top button. **(L3 / Learnability / P1, P2)**
\- Similarly, GoTop button is also for efficiency. If many users feel convenient without it, we are still happy.

11. Users tend to enter the activity name itself in the tag search bar. **(L4 / Learnability, Safety / P1, P3)**
\- Increasing font size of TagSearchPage.
\- When the cursor is placed on the search bar, the tag search is emphasized.

### High-level Reflections
We learned that just combining some useful features in the preexisting websites is not enough for creating actually a useful one. We had to figure out what the current underlying problems users face are. Also it was a lot harder to expect the users' reaction than we thought. This is because we are developers, not the real users. We can pretend to be the users, but there are still some obstacles we cannot see. Sometimes even the users themselves don't know what they really need, and every person has their own opinion. So we learned that we need to introduce the users as many solutions as possible and then get feedback from them to improve our ideas. Moreover, we felt the usefulness of agile feedbacks from the users.
On the other hand, we tried two different methods to get better results from the user testing. First, we provided direct instructions to the users to finish the task. In this way, it seemed that most of the users did very well on the tasks without additional explanations. Hence, we thought our prototype was quite intuitive and self-explanatory. After the first method, we tried another approach. At this time, we provided the users the minimal information on each task. For example, we didn't tell the user that they have to go to the My Progress Page in order to modify the selected achievements. Then, they had hard time to find out how to do it. We didn't know there is a usability problem until we tried the second approach. So we realized that the amount of information provided to users matters the result of usability test. Therefore, we need to carefully decide the amount of imformation provided considering the trade-off.

## Studio Reflections

#### 1. It was very hard to find how to access MyProgressPage. - Sew You Later, Tamsaasoo
\- Most of test users said this. Therefore, we are considering three solutions: first one is changing it's location to the horizontal bar or side menu, the second one is to add an sequence about accessing MyProgressPage in the protocol, and the last one is making a tutorial to make the user get used to the interface. Thank you!

#### 2. I wish the hamburger menu button follows the screen when I scroll down. - Sew You Later
\- Actually, we first implemented like that. However, since the button is overlapped with the horizontal bar, we fixed it at the top bar. But listening to your opinion, we think it is better the button to follow. Hence, we have a plan in mind to change the shape of the horizontal bar and insert the hamburger button.

#### 3. I think exclude tags are not needed. - Sew You Later
\- Up to a point, but we think some people must need the function. For instance, a user who has water phobia should exclude water sports. So if they can exclude 'water' tag, it will be very helpful.

#### 4. There were lack of datas to interact in a prototype (e.g. tags, images, ...) - Tamsaasoo
\- Since this is a prototype, we did not insert many data in our Firebase. Please understand it. In the case of images, we implemented only for the case when the number of images is three. Thus, now we plan to modify our code, so that ActivityInformationPage can show more than three images.

## Plan for Iteration

Reflecting the usability issues mentioned above, we decided to implement some high and middle important functions that we think they must be implemented for our site among a total of 11 usability issues.

1. We can make the search bar be imbedded in the top blue bar after we entered at least one tag. Then in the search result page, we can manipulate the tags according to the search result.
2. After users have completed an activity, write some instructions that they can still add new achievement even if they completed their activity.
3. Implement the start button to redirect to the MyProgressPage and Change the location of the button to MyProgressPage to the horizontal bar or the side menu.
4. Before a user writes a review, show some pop-ups to inform the users about the criteria of numerics.
5. When there is no input, show some popular tags as an example.
6. Insert the ‘Add achievement button’ to MyProgressPage.
7. Put a guide text at the bottom of the topbar in MyPage.

Because the exam period of the team members is included, we thought that we would not have enough time. Therefore, in function 1, we think it will be difficult to implement within the given time. Thus, we plan to implement and reflect the 6 cases except for this.

We will be improving our website until 6/17 and we will make videos and reports for the DP6 during the remaining submission period.