Mockups for the Project CCMD

Below are the mockups for the Project CCMD. Please note that when present, the thick blue arrow is not a part of the mockups but is there to help the reader understand where the user clicked.

1. Searching for a topic

1.1. The user logs in and sees the home page.

1.2. The user uses the bar on the bottom to type a topic she/he is interested in and clicks the 'search' button to initiate the search.

1.3. The user is presented with the search results. The user selects the first search result.

1.4. The user is directed to the relevant topic.

2. Navigating between and within topics

2.1. The user is viewing a topic, the topic Women's Rights in the Workplace is in focus, some details regarding this topic is given. The user clicks on another topic, Feminisim.

2.2. Now the topic Feminisim is in focus. Details regarding this topic is given. The user clicks on the topic Women's Rights in the Workplace to go back to it.

2.3. The topic Women's Rights in the Workplace is back in focus. The user clicks on the topic again.

2.4. The user is directed to the discussion page of the topic Women's Rights in the Workplace. After reviewing the discussion, the user clicks the zoom out button.

2.5. The user is directed back to the global view, with the topic Women's Rights in the Workplace in focus.

3. Posting in a topic

3.1. The user is in the discussion page of the topic Women's Rights in the Workplace. The user clicks on the Post Under This Topic button.

3.2. The user fills in the opened window with the content she/he desires. The user clicks on Post.

3.3. The user's post is displayed at the bottom of the discussion.

4. Adding a relationship

4.1. Browsing on the web site, the user decides to add a relationship. She/he clicks on the Add a Relationship button on the top banner.

4.2. The user is directed to the page where she/he can add a relationship. The user is asked to fill the form where she/he has to specify the two topics and the type of the relationship between them. After she/he does so, she/he clicks submit.

4.3. The user is directed to the global view, where she/he can see the new relationship added, as well as the two relevant topics.

5. Visiting a user page

5.1. Browsing on the web site, the user decides to search for a user and see what she has been up to. So she clicks on the Advanced Search button on the bottom banner to search for this user.

5.2. The user specifies the name of the user as far as she/he remembers. The user also specifies that what she/he is searching for is a user from Artvin. She then clicks Search button to initiate the search.

5.3. The users closest to the user's query is listed. The user recognizes that the person on the top of the list is the one she/he is looking for. The user clicks on this name to see the Nahide

6. Creating a topic