# Team ARLANDAR: DP6 Project Showcase

## Table of contents

- [Final Interface](#Final-Interface)
- [Representative Screenshots](#Representative-Screenshots)
- [Quality Arguments](#Quality-Arguments)
- [Iteration](#Iteration)
- [Individual Reflections](#Individual-Reflections)
- [Mukhtar Kussaiynbekov](#Mukhtar-Kussaiynbekov)
- [Aidyn Aluadin](#Aidyn-Aluadin)
- [Nurlykhan Kopenov](#Nurlykhan-Kopenov)
- [Nurlykhan Kairly](#Nurlykhan-Kairly)

## Video
Link: https://youtu.be/c5hewc3u3qk

## Final Interface

### Representative Screenshots
*Figure 1: Homepage of Aeuen*

*Figure 2: List of other events*

*Figure 3: New event creation form*

*Figure 4: My event detail page*

### Quality Arguments

The most important thing in UI design is efficiency, learnability and safety. First, all users loved our simple design, which makes our application more learnable. For example, naming of buttons we have used are straightforward such as **Create** button for creating a musical event and **My Events** button for seeing your own musical events. Also, as our application is very simple and as we have used only few buttons, we should say that it is more efficient. Moreover, to increase efficiency of our users we have used navigation bar and address search autocomplete function. Lastly, as every buttons that we have implemented are big enough to click, our application also reliable in terms of safety.

In order to support the core functionalities of the website we decided to integrate third party libraries, frameworks and ready-to-use components such as React, Firebase, Material UI, etc. Using those libraries not only saved our time but also helped us build a better app with styled components from Bootstrap and Material UI, login system and data storage from Firebase and map from MapBox. Apart from those, we also implemented our own features and componentes from scratch such as music suggestion, collaboration between musicians, modification of the playlist and message dialogs that appear after user's successful actions. Moreover, from the testers' feedbacks we added new 'Notifications' tab where user can easily find the latest updates on collaboration requests of their events. While implementing all of these features we always kept in our minds the users' needs and strived to make our app more useful.

Our app has full potential of being widely used by our target users. During the testing phase of our lo-fi and hi-fi prototypes most of the participants revealed that they would indeed use the website in case we release the first working version of our app. Overall, they liked the idea of advertising their music events in our platform so that it could be noticed by others.

## Iteration
We provided 5 milestones for our project which can be found from previous report. We tried to gracefully cover each point. Here are summaries what we did to achieve each goal:
1. Profile picture used to be optinal, but now it is mandatory to upload profile picture. Unfortunately, our event creation form did not validate any user inputs and would create an event even if nothing is provided. Since this was a serious problem, we validated user input so that most of the important information fields were mandatory to fill out. To correctly reflect on the goal, we made posters optional.
2. By using Firebase Firestore, we retrieved relavant information and displayed next to buttons so that user's attention would be drawn to numbers and would clearly notice any pending suggestion or collaboration request.
3. This was quite a subtle task since it required us to think about user experience even more. After discussing over and over again, we concluded that it would be noticeable if the "Requests" was placed next to event organizers so that once request has been approved, it would be displayed immediately in the close proximity.
4. We made our design more user friendly by making appropriate adjustments to item alignments and text fonts.
5. We hard coded data since our user target is not audience, but rather musicians. Therefore, the data is useful for organizer/s and does not deviate from our user target group.

## Individual Reflections
### Mukhtar Kussaiynbekov
1. I have implemented authentication UI and logic. Furthermore, in the early iterations of the project I contributed to designing My Events and Event Details page where list of user's events is listed and event creation button is layed out. Moreover, I contributed to further development of the project where I made initial design for showing list of songs suggested and playlist as well as UI for suggesting a song. Additionally, I directly contributed to accomplishing three of five of iteration goals.
2. What I liked the most about our team is that we got along with each other pretty easily since we are compatriots and know each other. Additionally, gathering and working together for consecutive hours really played into our hands, especially when writing reports which I consider as tiresome to write in isolation. Such gatherings helped our team to move forward quickly and spend time productively. However, due to our friendship our team meetings went in relaxed way. For instance, some of our teammates might be late for team meeting due to unexpected appointment. At that times we just discuss about what will we do during that meeting or just have friendly conversation to spend time. As a result, we sometimes end up spending more time than needed. But we managed to complete everything on time because each of our teammates was responsible. Thus, responsibility would be valued the most in my future team works.
3. I used to be offended when someone gives feedback about my project. I used to blame users for not seeing obvious things. However, after taking this course I learned tons of useful information regarding user-centered design, especially the part that it is not user's fault if he/she makes mistake in assessing a product. That means there is a flaw in the design and something needs to be done to improve it. Prototyping probably was the most important aspect in designing a product and yet usually undervalued since it would potentially save work hours if wrong desing was implemented, and it also gives clear goal for a project. By working on the project, I learned Firebase deeply by using it to authenticate a user, Firebase Firestore to work with database. Last but not least, I got hands on experience with React which would definitely be of help in my summer internship.

### Aidyn Aluadin
1. Mainly I was involved in the implementation of the display of the music events such as showing list of events and showing full information page about them. Also, I implemented the 'Request Collaboration' feature and designed the respective pop up windows and buttons. Additionally, I included feature that allowed users to point to a location on a map instead of typing the address manually.
2. In our team we could easily share our thoughts and opinion because we knew each other. We discussed the ideas freely and gave honest feedback on each others work. I think this helped us with our design process because we knew exactly what was wrong and what has to fixed. Also, all of our team members were CS majors and all of us knew at least the basics of web development. This helped us a lot during coding part of the project. However, we faced few challenges while working in a team. For example, in the beginning of our hi-fi prototyping process we incorrectly divided the given tasks and we ended up writing the same code even though our tasks were different. So, I understood that better planning has to be done before starting the implementation of the project.
3. Before the course I didn't know anything about user-centered design. Now, after taking this course, reading the given materials and working in a team-based design project I understood the difficulty of creating a product that can be useful for your target users. Five stages of design that we learned in class will be helpful for the development of my future projects as this process enables iterative work and gradual improvement of the product. Needfinding and Low-fidelity Prototyping design projects were especially helpful and insightful for me and I learned a lot by doing them. In particular, I learned how to explore and detect user's needs and improved my skills in Figma which I think is really useful. Regarding the web-based GUI implementation, I learned how to work with Firebase Firestore and Mapbox and overall improved my knowledge in web development while working on our project. Overall, doing team-based design project was interesting and beneficial for me as expanded my knowledge and acquired practical skills.

### Nurlykhan Kopenov
1. My part in this project was creating homepage for our website.I made dynamic homepage using Firebae auth function, so that when user logged-in the page, the homepage should show **My Events** button, whereas when logged-out **Get Started** button. In addition, i wanted to make our homepage simple, so that everyone can easily understand our ui. In order to make this simple homepage, i have used react styled components. For example, i made navbar using styling components and Infosection, which is main part of our homepage. The reason that i have used react styled components was that, we can easily change and add other features if we want in the future.
1. As all of us from same country, we had really good communication and discussion during creating this project. So i think having known your teammates better definely huge plus in creating new projects. In addition, we knew each others skills, so that we can give appropriate tasks to each other. Moreover, as we knew each other well, we could teach our skills easily to others. For example, as I am majoring in Indusrial Design, i was mostly involved in designing, and helping others with design. Others, more good at Computer Science, so they taught me how to use React more effectively.But of course there were some problems. For example, one of us was in homecountry, so we had time zone difference. To handle this, we first listed core tasks that we should implement, and then we used some web devices such as when2meet to schedule our meeting so that everyone will be available on time. And had small discussions to divide tasks, and then mostly used messenger group, so that we just message when we need something, and after someone reads our message he will answer it(same as Q&A)
The most important lesson that i have learned from teamwork is that we should have many meetings so that we can share our thoughts, also we should divide tasks by looking for person's skills.For example, someone is good at design, but not good as others at coding. So it would be efficient, if teammates did tasks depending on their skills
1. The important thing that i have learned from user-centered design is to research a lot(needfinding). Because, we should find what our user needs most, we should narrow down our tasks,so that it will be specific and covers the needs of our users. In addition to this,i learned that having more wild ideas is better than having one good idea. Moreover, to make our UI great, we should always look for usability, mainly for efficiency,learnability and safety.Lastly, to improve further we need process of iteration.Because there always can be some drawbacks that we haven't noticed, so by iteration we can improve and fix that errors

### Nurlykhan Kairly
1. I mainly contributed to the Create Event Page, it is used by a musician to share his/her future performance which contains title, description, poster, date, and location. All fields are aligned on the center of page and are saved on the Firestore. The title and description are simple text fields. While the poster field is image picker which has preview when image is selected. For the date field I used Material-UI Date Picker which is quite beautiful and simple interface with the starting & finishing date and time. Finally, for the location selection I used text field with Autocomplete which shows the suggestions of the places when user starts typing. This location is then showed on the map (MapBox). Also, a musician can directly choose the location by clicking on the map.
4. In the beginning, our website view was quite narrow which was mentioned by users. Therefore, I made it broader and changed the layout of the page. Also, there were difficulties in uploading the information to Firestore. For example, in the beginning I didn't upload correctly when there was no poster, since the there was no link to the image in the Storage. However, after that I fixed that bug and performances are now created without poster, i.e. poster is now optional. Also, it was challenging for our team to agree on the format and keep everything in that format in Firestore. This is because team members implemented different parts like My/Others events which used the data I upload.
6. Overall, our team did a great job throughout the course. There were some difficulties in meeting since we were in different time zones and meet only through ZOOM. We overcome this hurdle by selecting all available time slots in app like when2meet.com. I learned that each team member does unique influence on the work, and we should use each one's skills efficiently.
7. Throughout the course I learned about user-center design such as five stage design which helped us a lot in developing project. I understood that the user is always right and it's developers job to ensure that use is comfortable when using their service. I found that developers should improve the learnability, efficiency and safety of their app. The most interesting part of course were user-testing, ideation and needfinding. In user-testing, I discovered many things which I didn't think about when user had difficulties throughout the user testing session and it helped a lot in making our app better. In the needfinding, I learned how to identify the needs of users and then brainstorm the ideas in ideation to find unique and useful solution. In web-based GUI implementation, I learned how to develop projects in a team using Git and ReactJS. I discovered Firestore, Location autocomplete feature, Modal components in ReactJS. In general, I learned how to create fully working web project. This course improved my work in a team and user-centered design.