Team Foodstory DP5 Report
====
2021.06.10

Written Protocol
----
### Instructions for Preparation
<!-- Anyone in your team should be able to set up and run the experiment just by referring to this document. Example information includes any URL to open, which web browser to use, example data to load, etc. -->
Our team implemented instructions for preparation for unexpected situations such as web browser issues, as shown below. We will check these instructions before each user testing session, then start the sessions.

|Element|Instruction|
|---|---|
|URL|https://foodstory-c6226.firebaseapp.com/|
|Web Browser|Any browsers on computer (ex. Chrome, Edge, Safari, but not IE)|
|Account|No need to login (we assumed you are already login)|

### Introduction and Informed Consent
<!-- Make sure you read this introduction exactly as written in a study session. For informed consent, we don't require formal paperwork, but you should explain what information you're collecting (e.g., photos or voice recording) and get participants' consent. -->
Our team thought that introduction for participants should include the following information.
- Explanation about our project
- Test purpose
- Task introduction
- Data we're collecting
- Make the participant relax

We implemented an introduction that includes all of above information. Following is a raw text of introduction that we will deliver exactly to the participants.

> **[Explanation about our project]**
Thanks for your participation in FoodStory user testing session. Our service provides personal food diary that can store your food experiences. Also, you can share your diary to others using SNS feature, and see other's food experiences. Finally, you can see posts with common hashtag, and see other experiences with same hashtag with yours.
**[Test purpose]**
This test is for better experience in keeping personal food diaries and sharing food experiences with others. Through this test, we will evaluate our user interface, rather than your performance. Any difficulties you would encounter is not our fault, so feel free to talk about them.
**[Task introduction]**
In the test, you will see food diaries and upload a new diary, see feeds and react to them, and see feeds that have similar experiences with you.
**[Data we’re collecting]**
While testing, we will record your screen to analyze the using pattern of our website, and your voice to manage your difficulties and feedback. These will be kept secured, and no one would access the data. Instead, we will use them only for the improvement of our website.
**[Make the participant relax]**
You can say your difficulties and thoughts during the test. Also, you can take a rest or quit the test at any time during the test if you want.

### Task list and Instructions
<!--What are the tasks participants should perform, and what instruction should they be given? This is another part that should be delivered exactly as written to all participants. -->
We defined some tasks that the participants will perform and instructions we will give to them.
|Task|Instructions|
|---|---|
|Check the Food Diary| - Start from main page <br>- Find pictures that 'Korean' food and took in 'Dajeon'|
|Upload New Picture to Diary| - Start from end of the previous task <br>- Upload the provided sample picture to Diary <br> - Check the detailed information of new uploaded image|
|Check the feeds| - Check the other's feeds, and give some reaction to their feeds|
|Post new feed| - Post new feed with the picture that you uploaded previously|
|Check feeds with same hashtag| - Check feeds with "#korean" hashtag, and check one of the post|

### Recording strategy
<!-- How will you record your observations and findings? We advise against video recording, but instead recommend sketches, photos, voice recordings, screen captures, screen recordings, and written notes as you see fit. Also discuss what role members of your team will play in each session: facilitator, observer, and optionally tech person in charge of monitoring if the system is working fine and data is collected properly. -->
- Recorded Object
- Screen of the participants
- Voice of the participants
- Notes by observers
- Role
- Facilitator: 1 person (all of us act as facilitators once)
- Observer: 3 people

### Questionnaires
<!-- After the session, it's a good idea to get qualitative comments about the task experience from participants. In doing so, we suggest preparing a list of questions to ask in advance. For interviews, consider semi-structured format: follow the initial plan you came up with, but ask additional questions based on participants' responses. -->
After the session, we will ask about usability of our service to the participants.
1. Do the design intuitively enough when performing tasks?
2. Is there any feedback on
- diary layout
- feed layout
- single feed layout
3. Is the design consistent?
4. Is there any discomfort that you met while using our app?
5. Did you feel any tasks in our test is redundant?
6. Please rate our application. Why did you give that score?
7. Any suggestion?

### Debrief Prompt
<!-- After the session, thank your participants and give them a short debrief about the experience and the project. -->
After the whole user testing session, we will thank for the participant and summary the session as shown below.

> Thank you! You completed all of our user testing sessions.
You heard the purpose, tasks, and data we collect, and agreed for them.
Next, you got task instructions and tried to complete the tasks.
During the test, we recorded your screen and voice to reflect your difficulties and feedback for improvement of our website. These data will be kept secure and we will not use them for other purposes.
After the testing, you answered our questionnaires.
Thank you for your participation again!

Session Observations
----
<!--
- Participants: Who are they? How did you recruit them? Why are they representative target users? Add brief demographic, context information about each participant that is relevant to your interface.
- Use at least one photo or sketch for each participant and provide a summary description of each session (e.g., What was unique about this participant? Main takeaway from this participant's session?).
-->
### Participants
|ID|Facilitator|Information|Picture|
|---|---|---|---|
|P1|Sanghyeok Nam|- 23 years old<br>- student major in mechanical engineering<br>- loves to eat food<br>- sns lover (Instagram and Facebook)||
|P2|Junu Kim| - High school student <br> - Love to post foods in instagram story(>3posts/week) <br> - Experienced SNS: Facebook, Instagram||
|P3|Dang Minh Hoang| - 20 years old, KAIST student<br>- Student in mechanical engineering department <br> - Frequently use Instagram <br> - The interview was conducted face-to-face||
|P4|Thi Nguyen|-21 years old, KAIST student<br> - Youtuber, be in a lot of social media platform<br>| 

<br>

### Summary descriptions
#### P1
- The participant cares about how easy the user interface is. Also, he focused on how our user interface is similar to existing SNS in the common features.
- At the main page, he clicked some food pictures which do thing.
- He thought where he ate foods is important, so he said that map on food diary looks good.
- He wanted to add text for food diaries although it's not shared to others.
- He liked the default image at sharing page (blank plate image)
- He wanted to check private/public feeds in other user's perspective (Is it really private in perspective on others?)
- He felt that design of whole user interface is not consistent.

#### P2
- At the main page, the user tries to click friend's profile but didn't work
- At home and diary UI, she mentioned that adding some effect to orange box would be better to seem.
- She noticed that the image heights are too long in feeds page so hard to scroll.
- She mentioned that unifying the upload icon between feeds page and diary page.
- She mentioned that the UI of single post is poor than others(about color, widths, dash line...)
- She gave 3 score to our service, because it is easy to use but has bad design.
- Symple typo. Korea -> Korean
#### P3
- At the main page, he prefers the list of recent diaries shorter to make it close to the meaning of the word "recent diaries"
- At the Diary page, he likes the design of organizing diaries in month. He loves the filter because it's functionally convenient but the design is hard for him to notice the filter right when he access the diary page
- He also wants to have a short title for each photo in diary to quickly remind him about that food
- At the feeds page, he likes the feature of changing private status of the post
- When adding a new post, he was confused between the upload section in the sns page and the diary page because he didn't know which one is the right one
- He want the page for a single post is bigger and want to access when clicking on the image
- He like the page that shows all posts share a common hashtag

#### P4
She likes the the interface over all: she quickly gets to know all of the feature in just 1 min. However, she discover that some problems:
- It is not intuitive the definition of Home and Social Media. She thinks current Social Media Page should become the Home Page with friends feeds. While the current Home Page should be something like My Page. Since she uses alot of social media, she finds that this is less like the convention that she always think of.
- Post: The icon is small and hard to recognize: she "kind of" but not really sure is it the comment.
- Navbar: Navbar is disappear when scroll down too low. She wants to navigate quickly. She suggest if fix floating navigation bar will be helpful.

Usability Lessons
----
<!--
- List at least 10 usability problems you discovered. Organize them by high-level task or theme, not by each participant or time. But mention which participant ran into the problem by referring to them as P1, P2, ... (e.g., search results did not show the price information (P1, P3)). For each problem, indicate how critical the problem is: high, medium, and low. Finally, show how you plan to address each of the problems.
- High-level reflections: What did you overall learn from the user testing experience? What would you do differently for better results and insights?
-->
### Usability Problems
|ID|By|Problem|Criticality|
|---|---|---|---|
|A|P1, P2, P3, P4|Food images on the main page does nothing when I click them. |high|
|B|P1|I want to add text to food diaries although I don't share them. |high|
|C|P3|Image in diary cannot remind him of what he ate|high|
|D|P1, P2|Header of feeds or Imagein hashtag feeds and single feed page is not aligned to center. |high|
|E|P1|"share your story" button is connected to social media page. I expected it would bring me a template for new feed. |medium|
|F|P1|Design of food diary might be better if it more looks like diary or calendar. |medium|
|G|P3|In the main page, recent diaries list is too long|medium|
|H|P3|Layout for single post is not big enough|meidum|
|I|P2|Image heights in feeds are too long so hard to scroll|medium|
|J|P1|In main page and food diary page, some dates such as "Web May 26 2021" occupies two lines. |low|
|K|P1|In single feed page, some people wouldn't realize that they should press enter key to upload a comment. There's no intuitive instruction to upload a comment. |low|
|L|P2|Upload Icon are not consists(photo icon/dish icon)|low|

Overall, most of the high priority problems are related with functionalities. We intended and gave meaning to functions in our own way, but we didn't consider how users might understood them.
Also, the medium and low prioritized problems about design choice and consistences. There were some detail design faults in some pages, and layouts for same content were not consistent because of lack of communications.

Studio Reflections
----
<!-- Summarize the feedback from the studio session, and mention how you addressed it or will address it later in the process. -->
After the studio session, we got helpful feedback from our classmates.
- Instruction is too detailed, so participants might depend on the instruction, rather than explore.
- We totally agree with this feedback. Our instruction is efficient to test our features, but restricts participants to do the fixed tasks.
- We would modify the instructions more generally. For example, we would replace instructions for task "React to a feed in Social Medias page" to "Do some reactions to the feed."
- If the participants don't find what to do or got lost, then we would use the detail instructions again.
- By reflecting the feedback, we rewrited the whole instruction.
- The first task (understanding the main page) would be too abstract.
- There was a task "understanding the main page", but some students and TA said the task is quite ambiguous.
- We agree with this, and removed the task.

Plan for Iteration
----
<!-- You'll have an additional week to finalize your overall design process. Discuss in your team how to use this time most effectively, and make a few concrete goals. Justify your goals. -->
- Refine user testing protocol(Resolved)
- We will eliminate preparing constraint about account, so that participant can login as variuos accounts.
- We will modify redundant tasks.
- We will make instructions more user-language.
- We will modify instructions to problem-driven, not feature-driven.
- Do another user testing with new participants(Resolved)
- We will perform user testing with new participants, who fit to our target users.
- Specify feedback
- We already listed and classified feedback from classmates in studio session, TAs, and user testing participants.
- Our team discussed how to resolve the problems and improve our service.
- We would improve the prototype before DP6 report submission.
- Improve prototype
- According to the solution, we will improve our prototype.
- We will add missing features that the participant expected.
- We will apply diary and calendar metaphor to food diary page.
- We will make feed design consistent.
- To test in various perspectives, we would implement login feature.