Design

Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).

Our final main page

:

Our computer-prototype main page

Decisions we made after paper/computer prototyping and heuristic evaluation:

1) We decided from the paper prototype that we should allow the user to search based on a particular search type instead of searching for a general term. Some users were confused when presented with one search box as to what kind of term to input.

2) We combined the four search boxes on the sidebar in our computer-prototype design into one search box and a drop down list to select the type of search in the final design. In the computer prototype, users find that the four boxes and the four buttons accompanying it are confusing; it is not clear whether the users can search using more than one type of search at a time. With the drop-down, it is clear that the user is only searching using one search type at a time, and that only one query is possible. We also changed the "Go" button to "Search", so that the user knows exactly what he/she is doing.

3) We removed the sidebar from all pages. This is as a result of the search box modification. We were about to fit the modified search box in the top bar, and so we decided to save space on the left

4) From the paper prototyping, users were curious about how they could find related photos when they're at a certain photo. So we decided to implement photo tags as links, as can be seen in the following screenshot.

The links go to a search results of photos related to that tag.

5) We added CRUD functionalities, including deleting photos, editing photo information, and deleting comments.

(The [X] in the following photo is the "delete photo" button)
Delete comments/edit photo information:

Implementation

Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.

Evaluation

Describe how you conducted your user test. Describe how you found your users and how representative they are of your target user population (but don't identify your users by name). Describe how the users were briefed and what tasks they performed; if you did a demo for them as part of your briefing, justify that decision. List the usability problems you found, and discuss how you might solve them.

Reflection

Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your observations.