5. System Design and Mockups

5.1 Mockups

5.1.1 Login page

5.1.2 Homepage after login

5.1.3 User profile page

5.1.4 Memory page

5.1.5 Memory annotation

5.2 User Scenarios with Persona

5.2.1 Scenario-1

Jan is a traveller. He is searching for effective application which will help to keep his memories in detail. He wants to add his memories city by city with the photos he took, and add annotations on the photo to describe the moment.

1. Jan opens the website.

2. He logins to the website with his username and password.

3. He clicks to "create a memory" for his last trip to Indonesia.

4. He writes a description about the trip and adds to photo which was taken in Bali near by the sea.

5. He adds annotations to the photo by selecting a specific point on the photo.

6. He adds location, time information to his memory.

7. He adds hashtags as #traveller, #bali, #indonesia for this memory, and submits his memory.

5.2.2 Scenario-2

Selin is a software developer. She has recently moved to Netherlands / Amsterdam from her hometown for work. She is very curious about the Dutch culture, so she wants to learn local people's lifestyle and memories.

1. Selin opens the website.

2. She logins to the website with her username and password.

3. She writes hashtags as #Amsterdam, #DutchCulture, #DamSquare to search bar.

4. The application gives the various memories of different public profiles which include desired hashtags.

5. She chooses one of the memory to check out.

6. She adds a comment to one of the annotation on the photo which was taken in Dam Square.

7. She likes that profile, and clicks follow.

5.2.3 Scenario-3

Ada is an archaeologist, and addicted to the Italian history. She visits Italy very frequently for her research study. She is also wondering the memories of people who live in Italy.

1. Ada opens the website.

2. She signs up to the website first time with her e-mail, username and password.

3. She selects her interests from the given categories by website.

4. She logins to the website with her username and password for the first time.

5. She sees recommended memories according to her interests such as related with #history, #Italy, #collesium in her timeline page.

6. She clicks one of the recommended memories, and checks it out.

7. She likes the profile and follows it.

5.2.4 Scenario-4

Güneş is a music lover. She always goes to the jazz concerts near by her city. She has recently went to Chicago, and looks for a place that she can listen good jazz music.

1. Güneş opens the website.

2. She writes hashtags such as #jazz, #Chicago into the search bar without login.

3. She finds some public memories related with the hashtags.

4. She checks out one of the memory and reads the comments for that jazz place.

5. She selects the one of the jazz place to go concert.

5.3 Sequence Diagrams

5.3.1 Singup

5.3.2 Authentication

5.3.3 Creating a Memory

5.3.4 Creating an annotation

5.4 ERD Diagram