The aim of the overall practical project is to design and develop a responsive website, incorporating the best practice elements of human-computer interaction principles. You have the freedom of choosing your own topic from a list of available topics for the project. You will work on the same topic throughout the term for the Assessments 1 and 3. The end result is to demonstrate the viability and user acceptance of the specific user interface employed by the website.

The overall practical Project is divided into two phases: Project A and Project B. The following description should be read as a whole for both Project A and Project B.

Project A: Assessment 1 (Practical Assessment 1)

Carry out user and task analysis to gather user and system requirements.

Based on the initial findings and the technical specification, develop a preliminary design (i.e. low-fidelity 'paper' prototype) of the specified user interface.

The prototype will be used to test your initial design concepts and ideas.

Submit a report documenting the prototype, design process, initial user feedback, and recommendations on how to improve the design.

Check the Moodle site of the unit for the updated marking criteria.

Assessment 1 (Practical Assessment 1) Marking Criteria (total marks as shown below will  be converted into marks out of 30):

Report: Introduction and Motivation (10%):

• Introduction provides relevant background information and highlights the advantages of the proposed solution.
• Previous solutions or existing websites/apps are analysed and findings are discussed.

User research and Personas (20%):

• Research identifies potential users of the website/app based on demographic and psychographic information.
• Two personas are created that represent different types of users.
• Each persona has a name, a photograph (optional), and a brief description of their background, goals, and challenges related to the topic.

Scenario Design (20%):

• Three interaction scenarios within the chosen topic are identified and described.
• Each scenario is based on a specific feature of the system.
• Clear description of each scenario is provided, including the user's goal or objective, the specific feature of the system being used, the steps involved in completing the task, and any potential challenges or obstacles the user might encounter.
• Each scenario is showcased using one of the following techniques: UML use cases, storyboards, or task analysis.

Paper Wireframe (20%):

• Low-fidelity prototype is designed using paper wireframes for the scenarios described in section 3.
• Prototype demonstrates the initial concept of the interface design, showing the possible layout of webpages or app screens using hand-drawn sketches.
• Screenshots or photos/scans of paper wireframes are included.

Digital Wireframe (20%):

• Digital wireframe is developed using a prototyping tool of the student's choice for the home page of the website/app or for one of the scenarios described in section 3.
• The wireframe demonstrates the initial design concept and showcases important features and functionality of the interface.
• Screenshots of the digital wireframe are included.

Overall Presentation (10%):

• Report is well-structured, clearly written, and easy to follow.
• Proper formatting and citation are used.
• PDF report is submitted with the student's name and ID clearly indicated.
• Optional zipped folder containing prototyping is submitted.

You will be required to critically analyze a specific website in light of the principles of responsive web design. Your evaluation should address specific questions related to the website.

Check the Moodle site of the unit for the updated marking criteria.

Assessment 2 (Written Assessment) Marking Criteria (total marks as shown below will be converted into marks out of 30):

Research and Analysis (40%)

Evaluation of Website Design and Layout (30%)

Recommendations for Improvement (20%)

Writing and Presentation (10%)

Check the Moodle site of the unit for the updated marking criteria.

Project B: Assessment 3 (Practical Assessment 2)

Based on the low-fidelity prototype that you developed in the previous phase (Project A: Practical Assessment 1), develop a high-fidelity prototype as a proof-of-concept.

Evaluate the prototype and carry out a user test.

Submit a report documenting the prototype, design and development process, user test, and any further work required.

Note that these are not programming projects in themselves. The primary purpose of both projects is to ensure that students adopt best practices and adhere closely to HCI principles during the process of designing and developing interactive user interfaces for a responsive website. As the prototyping requirements suggest, a fully functional system is not expected from the overall project (Project A and Project B); however, the overall project is required to meet the specification. Inevitably, some limited functionality (such as dummy output) is expected in order to demonstrate the capability of the system. Knowledge of database backends is not required in this unit.

Check the Moodle site of the unit for the updated marking criteria.

Assessment 3 (Practical Assessment 2) Marking Criteria (total marks as shown below will be converted into marks out of 40)

Recap of Your Idea (10%)

Prototype (40%)

Usability Study Results (20%)

JavaScript (10%)

Limitations (10%)

Overall Presentation (10%)

Details of the marking schedule will be available on the Moodle unit website.