COMP 3008A: Human-Computer Interaction

School of Computer Science

Carleton University, Ottawa, Canada
Design and Prototyping Project
Assigned: September 27, 2023
Group Formation Due: Oct 7, 2023
Topic Approval Due: Oct 13, 2023
Project Due: October 27, 2023

In the first half of the course, we have covered topics relating to the design of software
with consideration of its human users. In this project, you will undertake the first three
activities of the user-centred design cycle: gathering requirements, designing alternatives,
and prototyping.
This will be a group project, done in groups of 3–4 people. The goal of your project will
be to show creativity in the design process, and insightful consideration of the factors
affecting users of your system.

Project Description
1. Requirements Gathering
To understand the requirements of your system, you will need to perform some data
gathering and analysis. Since we have not yet covered data-gathering techniques
with real users, you will rely on gathering requirements from existing literature.

(a) Decide on the general idea for your project. Do not make assumptions or de-
cisions about exactly how it will unfold yet – you need to research what your
users really want and need rather than simply assuming that you know which
direction to take.

Report: Overview of your project idea. What is the idea? Why is this needed?
What problem or opportunity is it addressing? (1 page)
(b) Identify your target users. Using online documentation, including web pages,
personal accounts, identify the characteristics of typical users of your system.

Report: Cite five sources of information that you used to gather information
for the personas, scenarios, and use cases. Non-academic sources such as media
articles, blog posts, forum posts, and similar are acceptable. For each source,
give a brief (1-2 sentence) description of what information was found, and a
properly formatted academic citation (including the URL) in ACM format.

1
 (c) Report: Create three personas for typical users of your system. These three
personas should characterize different users of the systems, and express the
diversity of people who might use your system. They should embody distinct
characteristics, be described in detail, and avoid stereotypes. Each persona
should include a name and a photograph.
(d) Report: Write two scenarios describing typical situations in which your in-
terface would be needed. These should have a narrative format, and contain
a detailed description of how and why the interface would be used or needed.
The two scenarios should be distinct and characterize different uses of the
interface.

2. Initial Design Prototypes

Design two alternative low-fidelity prototypes based on what you learned in the
first step. Consider interface styles, patterns, theoretical design frameworks. You
should try to come up with two distinct designs, based on different design rationales.
Complete the following steps for each design.

(a) Describe:
• a name for your design identifying its key characteristics
• your design rationale referencing what you learned in the previous step
• your design approach
• why you think this design will have advantages relating to the requirements
Report: Design name and rationale, approach, anticipated advantages (1-2
pages per design)
(b) Create (e.g. sketch using Balsamiq or similar) low-fidelity prototypes of the
main visual elements.
Create a storyboard for one of your typical use scenarios from the previous part,
using your sketches. Include captions and markup annotations explaining the
interaction.
Report: Sketches of main elements and your storyboard (3-5 pages per design)

3. Prototype Evaluation and Iteration

Following on the creation of your two prototypes, you will evaluate them and further
iterate on the “winning” design.

(a) To select with which of your two prototypes you will proceed with, conduct a
Cognitive Walkthrough of each, using your low-fidelity prototypes. All mem-
bers of your team should be involved in the two Cognitive Walkthroughs.
Compare results of both walkthroughs and decide which design is better.

2
 Report: A summary of the results of each walkthrough, including how well
each design supports learnability and overall usability (1-2 pages per walk-
through).
State which prototype you select to proceed and the rationale for your decision
(approx 1/2 - 1 page)
(b) Using the results of your cognitive walkthroughs, create a new iteration of
one of your designs, integrating feedback obtained during the cognitive walk-
through process.

Report: Explain the changes you made to improve your design and show the
new visual elements (approx. 1-3 pages)

4. High Fidelity Prototype

Implement a high-fidelity prototype of your design. If your proposed system is very
large, you may implement a subset of the features (enough for the user to complete
5 tasks) or you may improvise the back-end of the system to reduce the complexity
of the implementation (e.g., by populating a database with fake data, or pretending
that payments were processed appropriately and showing a static payment page).
However, your prototype needs to be functional to a point where it can be tested
in a heuristic evaluation. Your focus is on the user interaction with the system and
user experience.

You may choose to implement using any programming language and environment
you wish.

(a) Based on your experience with the low-fidelity prototypes, describe your choices
for your high fidelity prototype. Describe:
• your overall design/vision for the system, justifying your design decisions
• which aspects/features are being implemented as part of this high-fidelity
prototype
• which aspects/features are being left out or improvised
• the technology used and a justification for your choice
(b) Implement your high-fidelity prototype.

Report: Within your PDF document, explain the overall architecture and
include sufficient detail for someone else to compile or run the code themselves.
This should include:
• Well-documented source code, submitted as a zip file, separate from the
PDF
• Documentation explaining your code structure and how to run the code
(approx. 1 page)

3
 • Create a short video (<5 minutes) showing a group member interacting
with your prototype and demonstrating its use.
A random selection of groups will be contacted to provide a live demonstration
of their software. If your group is selected, a TA will contact you to schedule
this.
(c) Report: Write help documentation (user manual) describing the implemented
functionality from the user’s perspective. You should include screenshots illus-
trating the various features. (approx. 5 pages)

5. Usability Inspection Evaluation

Conduct a Heuristic Evaluation of your final prototype design from Step 4. Use
Nielsen’s general usability heuristics and follow the defined procedure. Each team
member should conduct an individual evaluation before you proceed to the consol-
idation phase.
Report: A summary of the results of the Heuristic Evaluation, showing indepen-
dent results and consolidated results. For each identified issue, include its priority
and severity.
(approx. 1 page per evaluator + 1 page for consolidation)
6. Workload Distribution Summary
Describe the contributions of each team member. This may take the form of an
itemized list, but include enough detail to convey the amount of effort and value
of the contribution towards the overall milestone goals. In general, teams will earn
the same grade. However, significant variability in the perceived effort and value of
contributions will result in adjusted grades for individual team members.

Deliverables
Group Formation: October 7

Groups should be submitted to Brightspace by October 7, and anyone not signed up for
a group by then will be assigned to a group.

Topic Approval: October 13

The type of interface is up to you. Choose something that seems interesting to you.
Topics should address an existing need, be non-trivial to design (e.g., a desktop calculator
or calendar is too simple), and not simply replicate an existing system.
Your choice should be discussed and approved by a Teaching Assistant before you invest
too much time and effort into it. You may be asked to refine or change your topic from
your initial proposal.
Questions to consider:
• What general area are you interested in (e.g., desktop, web, mobile, alternate input
mechanisms)?

4
 • What is the existing need?

• Who are the target users?

• Is this feasible within the timeframe of the class?

Submit a single-page document including the names of your group members, and a de-
scription of your intended interface to Brightspace by the due date (October 13). Be sure
to address the questions above, and specifically justify why this interface fits the criteria.
If you would like to obtain earlier topic approval, please feel free to submit this earlier
than the deadline.

Written Report: October 27

Prepare a written report including all of the information listed above under the “report”
headings. Submit the written report together with your source code and video demonstra-
tion of the high fidelity prototype and submit it via Brightspace by the due date (October
27, 2023). If for some reason the project cannot be submitted through Brightspace, please
email it to elizabeth.stobert@carleton.ca by the due date.
The report should be written in LaTeX using the ACM Master Article Template, which
is posted to Brightspace. References must be formatted in ACM format (https://www.
acm.org/publications/authors/reference-formatting), and the use of BibTeX is
strongly encouraged.

Grading
The project will be graded with the following point breakdown:

1. Requirements gathering (15%)

2. Initial design prototypes (15%)

3. Prototype evaluation and iteration (15%)

4. High fidelity prototype (20%)

5. Heuristic evaluation (15%)

6. Writing and presentation (20%)

Late assignments will be accepted, with a penalty of 10% per day (e.g. an assignment one
day late will earn a maximum grade of 90%). If an extension is needed, please contact
the instructor.