# Team ARLANDAR: DP5 Usability Testing

## Table of contents

- [Written Protocol](#Written-Protocol)
- [Session Observations](#Session-Observations)
- [Usability Lessons](#Usability-Lessons)
- [Plan for Iteration](#Plan-for-Iteration)
- [Studio Reflection](#Studio-Reflection)
- [Summary](#Summary)
- [Addressing](#Addressing)

## Written Protocol

### Instructions for preparation and setup
1. Create a zoom link for usability testing, and schedule meeting with User
2. Invite observer, facilitator and user
3. Join zoom meeting with user:
1. Greet user!
2. Provide the link for the website
- https://aeuen-deb1e.web.app/
- http://aeuen-deploy.s3-website.ap-northeast-2.amazonaws.com/
3. Introduction and informed consent about the usability testing
4. Ask user to screen share, and start usability testing

### Introduction and informed consent
1. **Introduction**
This is usability testing for our web application called "Aeuen". This web application is for musicians who are willing to showcase their talent by creating their own music events and having performances in public. Also, musicians can collaborate with other musicians in order to make better performances and gather more people for the event. In other words, you can create events and collaborate with other musicians using our app.
The goal of usability testing is identifying potential design concerns in order to improve learnability, safety and efficiency.
1. **Informed consent**
We would like to collect personal information such as email address and name. You may choose to upload any profile picture which would also be stored in our database. During usability testing session we also would like you to share your screen, while completing the tasks, so that we could observe the issues. In addition, while testing usability, we will need to take screenshots of zoom meeting.
**Note**
The collected information will only be used for educational purposes.

### Task list & instruction
- If you are new to the website, first register by going to sign-up page using "get started" button
- After finishing each task go to the homepage by clicking "Aeuen" button on the top left corner, and start next task

- Task 1: Create a new live performance with some description and location
1) Go to "My Events" page or either click "Get Started button" in the homepage
3) Click "Create" button on the left side
4) Fill out the form
5) End of the Task 1, too see your event in the "My Events list" you should reload the page (due to the firebase problem)
- Task 2: Modify your playlist of any of your event (i.e: add or remove songs) and checkout whether there are music suggestions from others
1) First go to "My Events" page and you should see the list of your upcoming events
2) Click on the event that you want to modify personal playlist (any event that you see, for example: the event that you created in first task)
3) Click "Playlist" button to see your playlist and to modify it.
4) If you want, you can add songs or delete it.
5) After modifying playlist, see suggested music from other musicians. To do it, click "suggested" button on the left side
6) End of Task 2

- Task 3: Search for existing performances of other musicians and select one, and then ask the creator of event to collaborate
1. Click "Other Events" button and you should see events list of other musicians
2. See detailed view of other event created by other musician (For example "Tempo" by Elon Musk)
3. Ask for collaboration by clicking "Request" button
4. You can also try to suggest some songs to this event by clicking "Suggest song" button
5. End of the last task!

### Recording strategy
**Facilitator** will conduct the online interview session through ZOOM and explain each step of the process.

**Observers** will record the details of the interview session by writing down important points (usability issues, bugs, etc) and capturing the screenshots of the ZOOM meeting.

### Questionnaires, Interview questions
1. How would you describe your overall experience with Aeuen?
2. Is there anything that surprised or frustrated you during the tasks?
3. What did you like the most / the least about Aeuen?
4. How would you change Aeuen?
5. On a scale out of 5, how likely are you to recommend Aeuen to a friend?
6. How frequently would you use Aeuen from scale 1 to 5? (1 - Never, 5 - Frequently)

### Debrief prompt
Our app was designed for musicians to gather audience and collaborate with other musicians.

During the session, you have helped us a lot in finding how efficient Aeuen is. By completing the tasks, we found out useful informations related to usability which we will use to improve our product.

We appreciate your help in testing our app!

## Session Observations

- Participant A
- 22 y.o pianist who loves performing in public places during weekends and holidays
- He was an acquaintance of our friend at KAIST and so we contacted and recruited him
- He can be considered as our target user because he needed a way to let other people know when and where he's going to perform
- This participant is an active user of productivity apps and websites for musicians such as Kompoz, SoundCloud, etc.
- As this user is familiar with modern technologies he could give us valuable feedback about the design and useful features for our website
*Figure 1: Participant A checking out his playlist*

- Participant B
- 21 y.o vocalist who spends most of his time in karaoke
- He was Mukhtar's classmate during high school
- He can be considered as our target user because he wants to meet and work with other musicians because his current goal is to form a music group
- This participant has experience of organizing and conducting small concerts and knows some ways of reaching out to audience
- User pointed out that some information during the event creation process was not necessary and suggested to change some wording in the event details page. This way we are able to collect and show more relevant information on our website
*Figure 2: Participant B adding a song to his playlist*

- Participant C
- 25 y.o guitarist who has regular performances at clubs and restaurants
- We found his contacts through Facebook and messaged him
- He can be considered as our target user because he wants to make his performances as engaging as possible to audience
- This participant has little background in web development as he tried to build his own web page for promoting his performances and getting feedback from audience
- This user suggested us some improvements regarding the interactivity of the website. For example, one suggestion was to animate the "success" message box to make it more noticable for users
*Figure 3: Participant C in the process of doing the first task*

## Usability Lessons
### Usability Problems [severity, user/s]

- #### Task 1
1. Bad image preview rendering [medium, users A, B]
Solution: Fix styling and css files of our web app
3. My events doesn't show after create (user reloaded page to see newly added event) [critical, users A, B, C]
Solution: Add the newly created event to the "My events" view immediately after creation
5. As there were too many fields user didn't notice he can add poster [medium, user B]
Solution: Divide the event creation into several steps so that user can focus on exactly what is needed.
7. There was difficulties in picking time due to UI [medium, user C]
Solution: Change UI for the Date Picker View so that user can type the time or select it with mouse

- #### Task 2
5. User doesn't see whether someone requested, suggested to add number (of current suggested) [minor, user A]
Solution: We plan to add the number next to Requests to indicate the number of new requests
7. There is no name of organizers (only picture) on event page [minor, user C]
Solution: Add names under the photos of organizers
9. There is no explanations on the buttons suggested/collaborate [medium, users B, C]
Solution: We plan to make hints on the meaning of buttons (tooltips on hover)

- #### Task 3
8. The page was scrollable when dialog (pop-up) is opened [medium, user B]
Solution: Make the page static when there is pop-up view
10. Didn't notice that Accepted user was added to Organizers list [minor, user A]
Solution: When accepting user show text that he was added to Organizers list
12. The location of "Requests" doesn't stand out so user may miss some new Requests [medium, users B, C]
Solution: Add notifications button on the header of the website to show new requests
14. The page layout was too narrow, as buttons were close description [medium, user C]
Solution: Update the css files, more specifically width and margins of the events page

### High-level reflections
Overall we learned that important usability issues and bugs can be found during real user testing process. That is because each user uses different browsers and has different screen size which reveals many problems with the design of the website. All in all, most of our testing sessions were fine but still there were some points that could be improved. For example, it was hard for us to determine how much we would help the user to complete their tasks so that we could assess the learnability of our application. So we decided to let the users understand the functionality by themselves first, and then explain the parts which were confusing. By that way, we could get useful insights and see the impressions of the users. Additionally, we felt like we were not getting new feedback from the testers while we were asking the same questions repeatedly so we had to come up with new questions to get new insights.

## Plan for Iteration

1. Change the requirements for the profile picture and poster:
- Make profile picture mandatory since audience should know some basic info about event organizer.
- Make poster optional because street performers might not have poster.
2. Add number of suggestions and requests next to suggested musics and requests so that event organizer would see that someone made some request, otherwise organizer might not check and would ignore the request.
3. Change location of "Requests" to the header so it's more noticeable for the users and they don't miss new requests.
4. Make the page layout more wider so the description, buttons, and organizers parts are not squeezed.
5. Consider adding "I am in" button for the users and participant list so the organizer/s would know how many people will come to an event.

## Studio Reflection

### Summary
Since members of our studio session did not leave any feedback on Design Project Feedback google doc, we will be considering feedback from pilot testing which is what mentioned on Campuswire. To put in a nutshell, our website did not load in first user's laptop. We initially thought our app had technical problems, but it perfectly functioned in one of observer's laptop. We came up with solution where user controlled observer's laptop using zoom. Hence, we spent half of pilot testing's time trying to come up with feasible solution. Below we are providing feedback we collected from both of our pilot testers.

- #### Task 1
- No possibility select location using marker on the map
- Bad render of poster
- After create event my events doesn't show
- Unsure why there is end date (mostly concerts ~2-3 hours)
- Event doesn't create when no poster is selected

- #### Task 2
- No options to see my suggestions to others

- #### Task 3
- Pop-up messages help to understand that user done something
- Who is collaborator?

### Addressing
- #### Task 1
- We have added marker so specific location would be selected.
- We have fixed this bug.
- We would try to fix this problem in future iterations. It is due to asynchronous call.
- Since usually people want to know estimate end time of an event, we decided to provide such an option so that it would also help musician to plan timing ahead.
- We will make poster optional.

- #### Task 2
- We will not add this feature since it deviates from our target users. Our target users are musicians and not the audience. We added suggestion feature so that musician can suggest music to other musicians in order to potentially collaborate with them.

- #### Task 3
- We will do our best to provide as much feedback as possible in future iterations when user succeeds at some task.
- Someone who helps creator of an event with organization and performs together on stage.