Team Foodstory DP3 Report
====
2021.05.06

Point of View(PoV)
----
- We met a young sns lover that taking picture for every meal.
- We were amazed to realize that she takes and upload pictures of the food on her “food only” account because she wants to make them as private memories, and share some good of them with people without messing original account (such as Facebook, Instagram, etc.).
- It’d be a game changing to help her have some food diary to manage her eating history privately and food only SNS to share her diaries and communicate with others via likes, comments, and direct messages.

Tasks
----
1. Upload a private food diary, and filter diary by location and origin
- Precondition
- The user already posted some private food diary.
- The user has a food picture in her device.
- Task
1. The user wants to add a food picture, so she enter food diary page.
2. She clicks a blank icon next to the last diary
3. She selects the food picture from her device.
4. She use filter option to list her diary in Daejeon with Italian food.
- Relation to PoV
- Persona wants to have a place to save some food diaries private.
- Insight includes letting her to manage her food diary using filters.
2. View detail of a private feed, and share it as a public feed
- Precondition
- The user already posted a private feed.
- The feed already has hashtags, food origin, restaurant (location), and companions information.
- Task
1. The user enter feeds page.
2. She sees the details of a private feed with a chicken picture.
3. She clicks a "Make Public" button on the feed to share it public.
4. She sees added details such as likes and comments of the feed.
- Relation to PoV
- Persona wants to save some food diary is private, but wants to share some of them and communicate with others.
3. Display shared pictures and feeds by others who also visited the same restaurant
- Precondition
- The user has feeds (of her or her friends) in "ABC Restaurant".
- Other people also visited "ABC Restaurant" and posted some feeds.
- Task
1. The user clicks the restaurant name "ABC Restaurant".
2. She sees information about the restaurant.
3. She clicks "Others ate the same" button to see other feeds in the restaurant.
4. She sees list of feeds about the restaurant by others.
5. She pick one of the feeds, and read the feed.
6. She gives feedback via like or comment.
- Relation to PoV
- Persona wants to communicate with others, and interacting with who also visited where she visited will make commons between them. Finally, it will encourge consistent communications.

Prototype
----
[Prototype link](https://www.figma.com/proto/vHtfsgu6IzbEcdFXeUnEnY/Food-delivery-app-Ui-kit-Community?node-id=4%3A43&scaling=min-zoom)
You can access to our prototype via this link.
### Tool
We used Figma as a prototyping tool. The reason of choosing Figma is that all of our team members are familiar to the tool. Furthermore, we thought Figma can be used to implement to build our low-fidelity prototype which needs css styling, screen navigations, and overlays.

### Design Choices
While building our low-fidelity prototype, we considered following factors to choose design of our prototype.
- Learnability: In main page, there are summary of the user's posts and her friends' posts represented by a food picture. User can easily realize they are food diaries. Furthermore, feed screen layout is similar to existing SNS so that users can easily learn the contents by their experiences.
- Minimal design: We tried to remove unnecessary text except cases that needs special acts from users such as dragging to keep simplicity layout.
- Dropped Features: We choose to not implement these below feature as a lofi version:
- The actual page where user write the private diary, since it is similar with online post that users upload in feeds.
- Automatically categorize the foods pictures. It would be work in backend, without explit UI.
- Direct share link on main page

### Task Flow
- Main page
On the top of the screen, there are Foodstory logo, two menus (Food diary and Feeds), and profile image. Below the menu bar, there are recent feeds by the user herself and her friends.
When the mouse enter a specific feed, then overlay appears and display details about the experience. (See the initial screen of task 3) If the user click the first blank circle, then she can upload new private diary. (See task 1) Finally, if the user drags a feed from upper group to the first circle of the below group, then the feed will be shared to others. (See task 2)

- Task 1
In food diary page, food diaries of the month will be represented with a food picture. If the user wants to upload a new private diary, she can click the blank circles at the tail.
Then, the user can select a food picture among pictures in her local computer. Let's assume that the user selected the third picture.
Then, a new diary with the selected picture will be added to the tail.
The user can get filtered list of diaries using filter option at the right-upside of the screen. Let's assume the user wants to filter by location in Daejeon and origin from Italian.
As a result, diaries those are about experiences in Daejeon with Italian foods will be shown as above.

- Task 2
In feeds page, the user can see feeds as shown above. The feed includes author id, uploaded time, hashtags, restaurant, companions, and whether it's private or public. If the user wants to share it with others, then she can click the orange "Make Public" button.
Then, the feed is rendered as a public feed, and likes and comments are shown because others can leave likes and comments. If the user click the orange "Make Private" button, then the feed becomes like the previous screenshot. We would delete likes and comments in this case, but not decided yet how to treat these data.

- Task 3
If the user's mouse enters a picture, overlay about the experience appears as shown above. If she wants to know who else visited the restaurant, then she can click "See Others" button.
Then, restaurant information is rendered like above. The user can click "Others ate the same" button to see other feeds in the restaurant.
Then user can see list of feeds at the restaurant. The feeds are summarized with author id, score, number of likes, and number of comments.
If the user choose one feed, then she can see a feed about experience in the restaurant. In this screen, she can give feedback to the feed via like or comment. Below screenshot is screen after she clicks like button.

User Test
----
Interviewee Information
- P1: KAIST CS student, use SNS oftenly, No experience in HCI
- P2: KAIST CS student who always explore and figure out functinality of the app by his/herself. Familiar using and working with user interface.
- P3: Female Office worker, likes using SNS to share her experiences and communicate with friends, 20 years old, No experience in HCI
- P4: College Student, who usually posts pictures of food in Facebook Story. Little experience in HCI

Overall, our users usually confused by the same profile icons in all parts of our prototype. This can be easily solved in hi-fi prototype.
Aabout the higher level of our prototype usability problems listed below, we divide them into groups by the task they belong to and sort them in the level from high to low:
- In the main page:
- [High][P1, P3] Some users initially didn't know where to upload the new images.
- [High][P2] One user couldn't distinguish between feeds section and dairy section
- [Medium][P3] Dragging function didn't work
- [Medium][P4] Don't know why to drag from my diary to friends' diary
- For task 1:
- [High][P3] Some users cannot guess the meaning of icons in our prototype
- [High][P1, P3] Users didn't know where to add text to their new diary pictures
- [High][P3, P4] Users didn't know how the diary was organized (by which criteria, such as date or food origin)
- [Medium][P1, P3] The filters of prototype couldn't be reverted
- For task 2:
- [High][P3] One user wanted to select multi-pictures to make them public or private at once but didn't know how
- [High][P2, P3] Some users confused because they didn't know the feeds, where directed to after they published their photos, contains anyone public photos or just only users' public photos.
- [Medium][P3] One user couldn't know whether the hastags were automatically or manually added
- For task 3:
- [High][P3] Users didn't know which posts are from their friends which are from other users
- [Medium][P3] Lack of sort options for users

After considering our usability problems, we observed that there are two main problems in our prototype: Lack of features that restricted users performance and lack of information that make users confused during the testing.
- For the shortage of features, apart from fixing the old ones, we have considered and decided to add those missing features that users pointed out for us
- For the shortage of information, we are having some solutions:
- We intend to add some simple icons and text to the product so that it will be more clear for users
- About the confusion in feeds section, we are considering between some options:
- Making two seperated sections for users' feeds and other feeds
- Making a common section for both users and others and add the filter so that users can choose between User Only, Others Only, or All options

Studio Reflection
----
The most common feedback was that the relationship between the PoV and the task is not clear. Accordingly, we re-writed them more intuitively.

There are some suggestion for our protype. In next design project, we would reflect the below points:
- Make the access depth of feed lower
- Make the icons and contents more clear
- Add icon to show the food diary is private
- Reduce the access depth of restraunt reviews

Also, someone suggested that indicate how to improve the problems from user tests. We pleasely accomodate the feedback.

Finally, there is a feedback that our prototype seems too focused on keeping private diary and simply share some of them, instead of seeing others' posts and communicate with them via like, comments, and direct messages. We tried to show our own tasks about private/public feeds, and people who visited the same restaurants. However, we seriously consider the feedback, and will implement also communication parts in high-fidelity prototype.