Human Computer Interaction Assessment 2

(revised Feb 2024)

Due date: Week 7 

Submission: Individual submission online via Moodle

Objective

The goal of the project is to design a website or app for a topic of your choice. You have the freedom of choosing your own topic for the project. You will work on the same topic throughout the term for Assessments 2 and 3. 

Choosing your topic

Choose a topic to work on, either by selecting one from the list provided below or by coming up with your own website/app idea. When deciding on a new idea, approach it from an entrepreneurial perspective and consider questions like: "Has this website or app been done before?" and "How can I add novelty to the existing websites/apps in use?” 

Ensure you identify the problem that your idea aims to solve. For example, you might choose to create a website that helps users find affordable housing by researching existing websites that offer similar services. Once you have identified such websites, you can then analyse their features, user experience, and shortcomings. This will help you understand what works well and what doesn't in such websites. Based on this analysis, you can then propose solutions to improve the user experience and address the shortcomings of existing websites.

For instance, you may find that existing housing websites lack user-friendly search filters, which can make it difficult for users to find the right housing options. In this case, you can propose to add more search filters, such as location, price range, and number of bedrooms, to help users quickly narrows down their options.

Alternatively, you may find that existing housing websites lack transparency in their pricing, which can be frustrating for users. In this case, you can propose to include pricing information upfront and make it clear to users how pricing is determined.

Sample Topics for Inspiration

1. An interactive educational platform to teach English to young children whose first language is not English.
2. A 3D visualisation tool to simulate buying furniture at IKEA
3. A website for price comparisons
4. A single student app that integrates all CQU student apps/systems in one
5. An interface that tracks energy usage at home and provides alerts and suggestions
6. An interface that tracks the medicine intake of patients at home
7. A community auction website
8. A booking site for accommodations to be used during disasters such as floods, bushfires, and domestic violence.
9. Land sales for Metaverse - real estate agent in the Metaverse
10. Pet adoption website - pet sitting for when owners go on holiday and need to find a temporary home for their pet
11. A job-finding website - a career hub for CQU students
12. A website/interface for your sports club/community club/students club
13. A donation website for not only monetary donations but also clothes, medicine, or food, allowing people to post what they want and others to match the donation.
14. A web/mobile app for tracking email subscriptions and controlling them (updating/cancelling)
15. A crypto currency consultancy app/website (Crypto 101)
16. A web/mobile app or website like MyFitnessPal (calorie tracking app) with a suggested meal plan
17. A student forum categorized by courses (staff and students can participate)
18. A website for supporting students' mental health (resources about mental health, activities, sports clubs, reading clubs, and getting in touch with a counsellor)
19. A UI for exchanging students' items, such as books and clothes (categorized by item type)

Report:

Required subsections:

1. Introduction and Motivation: 

Introduce your topic and provide relevant background information. Highlight the advantages of your proposed solution. If you have analysed previous solutions or existing websites/apps, briefly discuss your findings, and explain how they influenced the design of your proposed solution (Word count guide ~ 250-500 words).

1. User research and Personas

Conduct research to identify potential users of your website/app. Consider demographic information, such as age, gender, education level, and location, as well as psychographic information, such as personality traits, values, and interests. Create two personas that represent different types of users. Each persona should have a name, a photograph (optional), and a brief description of their background, goals, and challenges related to the topic.(Word count guide: User research no more than 250 words, plus the two personas.)

1. Scenario Design

In this section, you will need to identify and describe three interaction scenarios within your chosen topic. Each scenario should be based on a specific feature of your system. You should showcase each scenario using one of the following techniques: use cases, storyboards, or task analysis. Be sure to provide a clear description of each scenario, including the following details:

• The user's goal or objective
• The specific feature of your system that is being used.
• The steps involved in completing the task.
• Any potential challenges or obstacles that the user might encounter.

You can use different methods to showcase your scenarios, depending on what works best for your topic. For example, you might choose to create a use case diagram to outline the steps involved in a particular scenario. Alternatively, you could create a storyboard that illustrates the user's journey through your system, highlighting the key features and interactions along the way. Whatever approach you choose, be sure to provide clear and concise descriptions of each scenario to help your reader understand how your system will work in practice. (Word count guide about 100-250 words for each scenario plus the diagram or figure)

1. Paper wireframe

For the scenarios described in section 3, design a low-fidelity prototype using paper wireframes. This prototype serves as a medium to support your initial concepts and ideas. Your prototype need not be fully functional but should show the initial concept of your interface designs. For example, you may want to demonstrate the possible layout of your webpages or app screens using hand-drawn sketches. Includes screenshots or photos/scans of your paper wireframes.

1. Digital wire frame:

Develop a digital wire frame using a prototyping tool of your choice such as Visiofor the home page of your website/app or for one of the scenarios described in section 3. The wireframe should demonstrate your initial design concept and showcase important features and functionality of your interface. Keep in mind that assessment 3 requires you to develop a website using HTML5 and CSS3. In this assessment no coding is required. However, you are free to develop the initial digital wire frame using HTML5. Includes screenshots of your digital wire frames.

What to submit?

1. A DOC/DOCX report containing the above sections with your name and student ID clearly indicated.
2. Optionally, you may also submit any prototyping you did in a zipped folder (both paper and digital ones).

Marking Criteria:

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 (30%):

• 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: 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.