*Team Pongpong*

# DP6 Team Report

* Video URL: <https://youtu.be/LEEaPeayGX0>

## Final Interface

### Representative Screenshots

\- A function for users to find hobbies through search
<br>

\- The page where users can get information about the hobby they choose and decide if they want to start this hobby.
They can also choose some achievements others made and achieve them one by one by uploading pictures.
<br>

\- The page where users can write reviews and edit tags for others. Newbies can know what others think about the activity at this page.
<br>

\- The page where users can see their currently doing activities. They can also add new activities or achievements for other users. It is a way for them to add new data on the database.
<br>

### Quality Arguments

1. There are total 4 search methods and users can select one of them according to their goal.
* If they are intertested in a certain activity, they can search it directly by using name search.
* If they just know what kinds of activities they prefer or hate, they can use tag search.
* If they want to discover various acitivities, they may use category page.
* If they want to see pouplar acitivites, they may use hot activities page.

<br>

2. We adopted minimal design to remove any distracting excess details so that users can focus on their goal.

<br>

3. By using the user's evaluation as a tool to sort hobbies on the searching page, we reflect the user's evaluation as much as possible
<br>

4. We aimed to create a virtuous cycle among users by making new hobbies or providing new goals to other users to promote their favorite hobbies.
<br>

5. It is designed to help user achieve faster progress by showing user progress against current goal on My Page or progress page.
<br>

6. By implementing include tag, exclude tag, and priority sorting of hobbies, we made it easier for users to find the hobbies they want.
<br>

7. Overall, we use intuitive icons to make it easy for users to navigate even when they first use this page.

8. We made it possible to move between pages as much as possible with minimal manipulation for the convenience of users due to the nature of our page that we have to look at various hobbies and deal with completed achivements from time to time.
<br>

## Iteration

We tried to reflect on some user feedback.

#### 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)**

Added edit button in the result page to go back to the TagSearchPage with all the current tags maintained.

#### 2. It is hard to know that we can still select new achievements after we have completed all the selected achievements. **(H2 / Learnability)**

Added an instruction 'still you can set and carry out new achievements.' in the alarm.

#### 3. It is hard to find how to access MyProgressPage. **(H3 / Learnability)**

Added a new function on Start button in ActivityInfoPage. If a user clicks it, it redirects them to MyProgressPage.

#### 4. It is hard to tell an acitivity is actually affordable by looking at the 5 numerics because the criteria are subjective and people have various opinions on each. **(H4 / Learnability)**

If a user hovers over evaluation criterion, tooltip pops up. Since, we don't have exact data we couldn't change numerics more objective.

#### 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)**

Added 'Add Achievement' button at MyProgressPage.
Added icons to prevent users from being confused between 'Modify Achievements' and 'Add Achievement'.

#### 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)**

We added an instruction on the topbar of MyPage.

#### We also modify other things which makes our site more intuitive.

* We adopted fancier alarm design.

* We added an instruction about clicking label.

* We blocked Submit button when the text is empty
(Compare others.)

## Individual Reflection

### Minseok Kim

#### My Contribution
I implemented the overall function for MyPage, and implemented the part for achievement of each hobby. Also, after writing all the code for the frontend, I repaired the part that conflicted with the existing code that occurred in the process of connecting it to firebase.

#### What Worked Well and Not
* Well: I think that it worked well by linking with the database for all the parts we were aiming for. In addition, I am satisfied that everyone seems to have done their best for good teamwork.
* Not: Since most of the team members are using javascript for the first time, there was a conflict between the code written at the beginning of the project and the code written as it grew, so it was a little difficult to handle this.
* Lesson: I have learned an efficient way to separate tasks through GitHub, and I also learned that the discussion on the technology stack should be sufficiently discussed to reduce the time for future repair.

#### Lesson about UI
From the perspective of the project developer, there seems to be an effect that looks good because we spend a lot of effort and time put into it, and there is a love for the result. However, in order to implement a better UI, I have learned that it is essential to try to observe from the user's point of view and to listen to and reflect constant feedback.

### Myeonggyu Kim

#### My Contribution

I made ActivityInfoPage, MyProgressPage, and SideMenu, except colorings (Sangmin) and TopBar templete (Changhae). To be specific, I created InfoDocument and ProgressDocument including Review templete, Achievement templete, and all Modals. Recently, I took charge of Iteration 2, 3, 4, 6, 7, and other petty things in DP6.

#### What Worked Well and Not

* Well: I think my team divided roles very well. Hence, each part of our website was successfully made. Also, we gave plenty feedbacks to each other. We decided on a solution at the Zoom meeting, suggesting each opinion and discussing which was most appropriate. This allowed our website to have intuitive designs and useful functions.
* Not: It was hard to understand others' codes, because we did not determine variable and function names. By using Zoom meeting, we talked a lot and made each other understand. Furthermore, since each member has different thought, design of each person was different at first. It bothered us, because we should fix each code again. In the middle, to solve this problem, we discussed the design policy so that we need not to modify the code again. Before and after the examination period, compromising time was also tough. Indeed, come to think of it, it was natural that everyone was busy studying for exams. Nevertheless, we postponed works to DP6. Therefore, we did DP6 tightly.
* Lesson: I realized that I had to consult with my team members enough before doing anything in a team project. Only then will the hassle and conflict be reduced significantly. Also, I will continue giving and receiving feedbacks actively (what I did well) when I do other team projects in the future. Lastly, I learned that it is necessary to finish and help others as soon as possible instead of delaying my work.

#### Lesson about UI

I applied grid-based design at InfoDocument and ProgressDocument, so that our site became cleaner. Also, I used hierarchy system at fonts. For instance, subtitles are bolder and bigger than other normal texts, while instructions are smaller. Furthermore, making low-fidelity prototype was very helpful. It made us that we can draw a big picture of our project. Since Figma is similar with Powerpoint in a way, we could easily experiment many designs. This makes design of our high-fidelity prototype intuitive.

### Sangmin Lee

#### My Contribution
I mainly made the login, register page and routing, authentication system. For some details, I worked on all components with authentication, routing, accessing to user information. Also, contributed in design details such as overall colour theme, button shape, css positioning etc. Suggested libraries and model for design too(antd library, sidemenu, google style search page etc).
#### What worked well and not in your team? How did you overcome any hurdle in teamwork?
* Well: We used to use when2meet to decide meeting time, but after many classes we got familiar with each others' schedule so deciding process got much simpler(Send similar day and time at sns and vote). We divided works very fair so everyone can contribute where they can perform great. Also we checked others' commits, branches before changing the code so there are zero conflicts to the main project. Everyone gave a feedback to the new commit very fast too. We unified the design theme at prototype stage so everyone can make similar UI and this made our web page look consistant.
* Not: Some teamates had different coding style so it was hard to find and fix the bugs from others' code. But our team had fast communication with teamates, so I heard brief information from the one in charge and fixed the problem. Also we have unified the design theme but since we are all human we had some dificulties with deciding the final design. For the solution, we made several versions to see and compared with everyone. Since, we have seen our design and functions for a long time, it was hard to find problems by our own. So we asked for beta testers to find the bugs and design problems and gave them rewards. I think beta tester did a big job finding many errors in feed-back.
* Lesson: We divided work fairly, so problem occured. Some works like PPT must be consistant but every one did their job seperately. So someone's part has less images and color in text, but someone has pretty fonts, full of images. This may be difference of PPT ability, however we should have given these works to the one who can do very well.

#### Lesson about UI

I always made web pages without building low fidelity prototype. All I did was drawing simple designs on the paper and implement it. But in this class I learned to use Figma, adobe XD. Implementing after low fidelity protype made the work very easier because most of the functions had enough details even though it was prototype.
Using appropriate color had great effect on the overall mood of the page. I used pastel tone in the protype, and after the color lecture I got confident in my sense. So I convinced to use pastel tone on the most of our project. Middle saturation is good for eyes and always fits nicely on everywhere.

### Changhae Lee
#### My Contribution

I mainly made tag search, name search, search result, category, and hot activity pages. I also gave additional help for selecting color scheme.(color of tags, horizontal bar etc.)
In the iteration period, I added tag edit button in the result page.

#### What Worked Well and Not
* Well: The communication between team members worked well. Finally we set our own rule for writing code. So we could correctly expect and easily read other's code. Also every team member worked very hard so we can get a quite nice prototype.
* Not: We did not take care of our health. We stayed several nights for working on the project. I sometimes felt dizzy while working. I think we really need to take enough rest in summer vacation. I could feel the importance of health. First we did not set a rule for writing codes. So each team member used different methods for naming variables or functions. But soon we had a meeting for setting rules and then the problem was solved.
* Lesson: The communication worked well but we spend a lot of time on meeting. So in the next project, it is better to have enough time to think alone before having a meeting to use our time efficiently.

#### Lesson about UI
* A lot of users do not read the written instructions on the page. So it is more important to make users be able to learn things easily by doing.
* It is impossible to correctly expect the users' preferences and behaviors. We should try to make many variations and introduce them to users to get their feeback. It is not good to spend so much time on implementation. Before that, setting the direction of the project is much more important. For this purpose, making lo-fi prototype can be very helpful.(by using tools such as Figma)