*Team Pongpong*

# DP3 Team Report

## Point of View

### Feedback
We thought the last POV is insufficient about lack of motivation, so we have added about it. We narrowed it down to users who would like to surf the Internet in search of suitable hobbies. There are several reasons for that. First, even though they has already looked around, they could not find a hobby to be interested. Second, if there is no one to talk or do hobbies with around, the only thing they can do is surfing the Internet. Last, people who are too busy to do something with others in same time also can use the Internet. Since our Page has only feature as providing an active hobby, we added the sentences enervated person and an active hobby.

### POV

**A enervated person who wants to start an active hobby but has not found a suitable hobby in their surrounding.**

needs to

**be provided various active hobbies and their information and be motivated to continue the selected hobby**

because

**so many hobbies are scattered messily in Internet and doing a hobby without a goal makes people lazy.**

---

## Tasks

**1. Select an activity which is riding something but not indoor-activity.**

**2. After getting information about activity in a page, choose achievements which you want to attain, and accomplish them.**

**3. Leave a comment that might be helpful to the next user about hobby you ended up doing.**

---

## Prototype

### Tool description and justification


We chose Figma because Figma supports components, collaborative working, and easy version management. Also, all of them are free in educational access. Most of us used Figma at mini project and we thought it had great UI.

### Design choice

#### Home Screen
We were greatly inspired and motivated by game system at the beginning of this project. So we first planned to design our home screen similar to Steam store. But we realized that the purpose of our website is quite different from that of Steam. Steam want the customers to buy as many products as possible and this is the main goal of the store web page. Hence, they try to introduce a lot of new games and sale information to their customers. However, this is not our case. The main goal of our website is to make users conveniently find an activity that fits their preference and conditions, so that they can enjoy it for a long time. Thus, we put the search bar at the center of the screen and minimized the number of other things shown in this page. By this, we expect that users can carefully think about what they really want and fully concentrate on searching.

#### Tag Search
The main feature in activity searching is Tag Search. A user can find activities by entering several related tags like “Water” or “Riding”. There are two kinds of tags in searching: the ones that are included in searching and the others that are excluded in searching. For example, if a user enters “Riding” as an inclusion tag and “Indoor” as an exclusion tag, then they can see activities that have “Riding” tag but don’t have “Indoor” tag.
At first, we made two buttons + and - in the autocomplete bar to determine which tags to be applied, but the meaning of + and - was unclear and the user cannot expect which one is applied when they press the enter key. Therefore, we've changed it to the current toggle design.

Previous Design(+ and - button)


Current Design(toggle)

#### Side menu

If a user needs additional information such as trending activities and categories, they can click the hamburger menu button. At first, we embedded the side menu on the left of the screen so the user could always see the menu. But we felt there is no need to display it all the time and it wastes the space of the screen.

Previous Design(the side menu is embedded on the left)

Current Design(pop-up side bar)

#### Search result page
After entering tags, a user can see the search result page. There are some options and sliders the user can manipulate. We first considered a design that the user can set the range of numerical properties(e.g. cost, time) before they click the search button. But after a while, we thought that setting the range of numerical properties should be done with looking the result so that the user can easily make a trade-off.

#### Activity information page
If the user clicks some activity, then they can see the activity information page. There are several tabs on the horizontal bar(Images/Videos, Description etc.) so the user can quickly go to the part and get particular information they need. But if clicking a tab is the only way to move on to the next section of information, then it becomes hard to grab the comprehensive information of the activity quickly. So we merged it into one page and let the user to freely scroll the page down. Although it has not been implemented in our lo-fi prototype, the horizontal bar follows the user as they scroll the page down(always positioned on the top of the screen).


#### Achievements
There is achivement system in our website which is for encouraging the user to enjoy their activity enthusiastically. After selecting a proper hobby, they can choose some achievements to challange. Although it has not been implemented yet in our lo-fi prototype, users can freely create an achievement list and share it with others. If the user has accomplished some achievements in their activity, they can complete the corresponding achievements in the website by uploading photos. There are several benefits of making the user upload photos. The users will be more honest about the achievements and feel more sense of accomplishment if they see the uploaded photos later.

#### Writing comments
The user can leave a comment and evaluate some properties of the activity. This is an essential process because it is the main source of information about activities of our website. So we tried to simplify the process of evaluating an activity so that a lot of opinions can be collected.
There are a comment box and several number buttons for evaluating some properties of the activity. The given five properties such as Popularity and Stress can be changed later on the hi-fi prototype if there are better representative properties.


### Screenshots(representative moments)

#### 1. Keyword Search

#### 2. Side menu

#### 3. Tag Search



#### 4. Search options

#### 5. Information about a certain activity

#### 6. After selecting an activity

#### 7. Selecting achievements to do

#### 8. Uploading an image to complete a achievement

#### 9. Evaluate an activity

#### 10. Attach more tags to an activity

### Prototype Link (Figma)

#### Task 1

https://www.figma.com/proto/Hdd8Nasw2kq70pLF6fwDMX/Low-fidelity-Prototype?node-id=216%3A41101&scaling=scale-down

#### Task 2

https://www.figma.com/proto/Hdd8Nasw2kq70pLF6fwDMX/Low-fidelity-Prototype?node-id=280%3A78773&scaling=scale-down

#### Task 3

https://www.figma.com/proto/Hdd8Nasw2kq70pLF6fwDMX/Low-fidelity-Prototype?node-id=196%3A54256&scaling=scale-down

### Instructions for running the prototype

#### Task 1
1. Open the side-bar and click the category hobbies.
2. Reopen the side-bar and click the tag search.
3. Add 'Riding' tag.
4. Change to exclude tag and add 'Indoor' tag.
5. Click the search button.
6. Sort in order of popularity.
7. Reduce the cost value to less than 300.
8. Choose the Quidditch.

#### Task 2
1. Scroll up and down to see information about Quidditch.
2. Click the start button.
3. Under the yellow-green bar, there is a rectangle with ‘There is no achievement yet’. Click ‘More Achievements’ button.
4. Select the 1st, 3rd, 4th, 5th, 6th achievements and click the accept button.
5. Choose ‘Riding a broom’ button in ‘My Progress’ area.
6. Click the upload button, then click ‘Yes’ button.
7. Click ‘Catching the golden snitch’ button. (We omit ‘Turning quickly’, ‘Avoiding a bludger’, and ‘Catching the golden snitch’.)
8. Select ‘Disturbing mission’ button.
9. Click the upload button, then click ‘Yes’ button.
10. Click the close button.

#### Task 3
1. Scroll down to see others’ reviews and click the ‘Write Review’ button.
2. Write a review, select whether you recommend it or not, and grade criteria by clicking numbers.
3. You can see reviews including yours.
4. Click the + button at the top of the page.
5. Write ‘mag’, choose ‘Magic’ in autocomplete, and click the add button in order to add ‘Magic’ tag.
6. Click the uppermost arrow button in order to add ‘Flying’ tag.
7. Click X button in the upper right corner.

---

## Observations

### Participants Information

P1: Office worker in his thirties. He was hard work in company and after work, he usually takes care of baby or take a break while watching YouTube or TV. However, in his twenties, he did exercises a lots and was active person. But as he got company and baby, his activity gradually declined.

P2: Middle school teacher in her forties. After she gets off work, she cooks dinner for her family. Then, she has nothing to do. So, she usually watches dramas and Youtube. Also rarely, she reads books. In year before last, she played badminton in a badminton club for a few months. However, she was not interested, and was exhausted. Therefore, she dropped it. Currently, she has no active interest.

P3: Private academy lecturer in his thirties. He does not have spare time at weekdays. He usually plays Starcraft2 at holidays and rarely do active hobbies.

P4: Kindergarten teacher in her forties. She has spare time only after dinner and she don't really do anything at that time. She always look inside her smart phone and watches entertainment show. She wants to play golf but doesn't know how to it.

### Lessons from Low-fidelity Prototyping

#### Indigestible UI

* High: It was hard to find a way to change from Include state to Exclude state. (P1, P4 | Task 1)
* High: The word 'More Achievements' is not good to catch the meaning. (P2, P4 | Task 2)
* High: It is hard to distinguish 'My Progress' and 'Achievement'. (P2 | Task 2)
* High: The information window and the achievement window should be separated. (P4 | Overall)
* Medium: It was hard to recognize the meaning of the arrow on the tag add screen. (P3 | Task 3)
* Medium: ‘Write Review’ button is located at the extreme right, so can be skipped. (P4 | Task 3)
* Low: There should be a clear distinction between sorting filters and hobbies. (P1 | Task 1)
* Low: There is not enough explanation for the home screen. (P3 | Task 1)
* Low: The meaning of X sign in a tag is unclear. (P3 | Task 1)

#### Missing elements

* High: For each evaluation indicator, it is necessary to explain whether a high value is good or bad. (P3 | Overall)
* Medium: I wish the entry barrier is added in the search filters. (P3 | Task 1)
* Medium: Starting a hobby is important thing to decide but it is easy to start. One can start by just clicking at start button. (P4 | Task 2)
* Low: Not only the logo has ‘return to home’ function, but also the letter ‘Pong Pong’ should have that, too. (P1 | Overall)

#### Others

* Low: There are some activities in which it is hard to make an achievement list. (P3 | Task 2)
* Low: I do not think the menus on the sidebar are the same level. (P3 | Overall)

### Plans for Improvement

* Add icons to tags to avoid confusing ‘Include’ and ‘Exclude’.
* Make evaluation criteria be more visible immediately when selecting hobby items in the search result page, by using hovering or some else.
* Change the word ‘More Achievements’ to ‘Modify My Achievements’.
* Change the design of ‘My Progress’ more dynamic, by adding a progress chart.
* Add a pop-up right after when a user clicks the start button.
* Provide a list of names and contacts of each activity club.
* Separate the information window and the achievement window.
* Locate ‘Write Review’ button right next to subtitle ‘Reviews’, so that users will not miss the button.
* Replace the arrow button in the tag add screen to a plus button.
* Make the progress of uploading of proof photos to similar to the progress uploading photos on Instagram, so that users will not feel like doing homework anymore.
* Let the letter ‘Pong Pong’ under the icon also has ‘return to home’ function.

---

## Feedback

#### 1. I think your tasks have functionality description.
\- In the presentation, we used functional words such as tag, review, etc. After the feedback, we revise the tasks. For instance, replaced 'by searching with Riding tag included' to 'which is riding something'.

#### 2. I like the design but it was a bit inconsistent between different pages.
\- We will be careful in next DP.

#### 3. I wish you chose a real hobby as an example to make it more understandable.
\- The reason we used Quidditch as an example was simply to make the audience snort. And still, Quidditch is very active sports and we thought that everyone would knows it. Given this feedback, the assumption that everyone would know was wrong, and we did not consider it. If we have this opportunity next time, we will bring a proper example.

#### 4. I wish why exclude was chosen explicitly for tag searching
\- This is because we thought one's preference was important when we thinking about hobby, but we also need to consider about one's dislike.

#### 5. What if there is a page for highlighted or trending hobbies without any effort for searching?
\- We also consider placing trending hobbies on or below the search bar in the home screen.

#### 6. What if there is a forum to share ideas about different hobbies? I would really like that if there is one!
\- We thought it would be difficult to implement a forum in our homepage, so we replaced the forum to the link of the communities to attach the hobby information section. Also, we are planning to make a forum next time.