COMPSCI 345 / SOFTENG 350
Assignment 2: Registration form for a book club website
Worth 30% of your final grade
This assignment will be completed individually
Each student should plan to spend 15 hours on this assignment
Upload your submission to Canvas and to Assignment Dropbox
Due by 11am on Monday 31 May
Aim
The aims of this assignment are to develop a hi-fi prototype design as a mockup Web
interface. The assignment allows you to practice skills in high fidelity design, Web
technology, HTML, CSS, and JavaScript. It will also require you to put the visual design
principles discussed in class into practice. Lastly, the assignment demands that you adopt
an inclusive design practice by taking web accessibility into consideration.
Figure 1 Screenshot taken from original homepage of the book club website
Figure 2 Example PDF-format Registration Form which was downloaded from the original
website BPD
Background
The login or registration form is usually one of the first elements we see on a website – the
first impression visitors get from the organization or service. The efficiency of the website
navigation and such online forms is what can make or break the relationship between the
brand and its audience. A combination of usability, visual appeal and accessibility will make
sure the visitors get the most out of your site, building the foundation for an exceptional user
experience.
Imagine that you’ve been asked to redesign a website“Book Program Discussion (BPD)
1
”
and registration form for a non-profit organisation that lends books and professional
discussion notes to participating book groups. BPD also wants a new logo, which they are
contracting out to a design firm. Please include a placeholder logo for a new logo which
matches the new colour scheme. Groups make their book selections from an extensive book
catalogue and receive enough copies of their selected book to allow everyone in the group
to read the same book at the same time. Each group meets on a regular basis to discuss the
book they’ve read.
The current website only has a PDF form that prospective members must fill out — it does
not have an online registration form for new book club members. The organisation would like
to have their website redesigned. It should include a registration form which will allow new
members to fill up their details and submit the form. The organisation will then connect the
new members to local groups.
For this assignment, you will have to prototype only 1) the homepage and 2) the online
registration form. The design should be suitable for a standard full desktop i.e., from 960 to
1140p. You are designing for a high-fidelity prototype therefore doesn’t need to be fully
functional (i.e., the prototype does not connect to a database nor does it actually submit the
form field input). Error checking for format of addresses, passwords, mobile number, is out of
scope.
1 The current website of the organization is shown anonymously in Figure 1 and 2. Please preserve
anonymity.
You can choose to build the redesign from scratch, i.e., from the ground up, or you can adapt
template(s) from the w3.css framework (see
https://www.w3schools.com/w3c…) and you must
a) reference the template in the HTML source code and in the report, and
b) you must adapt the template with a substantial amount of your own customization.
This assignment is meant to assess your design decisions. As such, you must make enough
design decisions and be clear which design decisions are your own versus taken from the
template.
High-fidelity Prototype
Part 1
Redesign the homepage for the book club by giving it better web styling and structure. There
are no restrictions to what you can include in the homepage but there should be a navigation
bar, an H1 header, a supporting image and a primary call-to-action, i.e., for this case, a
button or link for registration. Make use of the visual design principles discussed in class and
take into account the basic accessibility guidelines. Your screen should approximately match
the visual complexity of Figure 1.
A colour in hex format has been assigned to you which you will have to use in some parts of
your design. You should receive this via individual email to your UPI@aucklanduni.ac.nz
email address. You can use the assigned colour either as a foreground or as a background.
It doesn’t have to be applied to all elements, but it must be emphasised and present in
multiple html elements in the homepage. When using the assigned colour as a foreground
you must choose the appropriate background that meets the colour contrast accessibility
guidelines. The same applies when using it as a background. You can check your assigned
colour to pick a contrasting colour as a foreground or background by using online tools for
example https://htmlcolors.com/hex-co…
In HTML, colours are defined using the attributes‘color’typically for foreground elements,
such as text or borders on a background; and‘background-color’which is a colour used to
fill a background. Imagine that you are working with a design team that requires
standardised naming of HTML elements.
To apply the assigned colour to elements where the attributes‘color’or‘background-color’
are used, there are two steps. 1) You are required to define your css selectors in the exact
format below (with the example assigned colour #ffffff) and 2) you must reference the css
class selector in the element.
CSS class selector format in your css file:
.custom-color {(correct because correct css selector name)
color: #ffffff;
}
.custom-background-color {(correct because correct css selector name)
background-color: #ffffff;
}
.assigned-background-color {(incorrect because incorrect css selector name)
background-color: #ffffff;
}
Part 2
Design a registration form for a new book club member. The form should be in a modal
window that pops up as an overlay on top of the homepage. The modal window only
appears if you click the registration button or link from the homepage. The modal window
should also have a close button (usually a button labelled“x”) that closes itself and restores
the homepage. This can be achieved using a simple JavaScript code. The button or link that
you click to trigger the opening of the modal window must have an id of“trigger-modal”.
For example:
Register
For simplicity, your form should have exactly 3 sections with all of the 8 following fields (each
input field is only 1 input field):
· User Details
o Given name
o Surname
o Username
o Password
· Addresses
o Home Address (within exactly 1 input field)
o Work Address (within exactly 1 input field)
· Contacts
o Mobile Number (within exactly 1 input field)
o Email (within exactly 1 input field)
For the purposes of this assignment, do not add any additional sections or form fields to the
registration form which differ from the above specified sections and fields.
Imagine that your design team requires that the sections have the exact div ids:
· userDetails (For example: <div id=”userDetails”>)
· addresses
· contacts
Your design team also requires that you enclose the entire form with a div html element with
the id“bookclubrego”. For example <div id=”bookclubrego”><form>…</form></div>.
Submission instructions
You will need to submit in two places.
1) to Canvas all files including report, as a zip file
2) to assignment dropbox https://adb.auckland.ac.nz/ all files (except report) as
individual files (no folders, no zip)
Assignment dropbox requirements for submission
You must submit all files, except the report. Example included files are index.html, styles.css,
logo.jpg, script.js, all submitted as individual files. While folders are usual for web file
organisation, for the purposes of this assignment you must not submit any folders. All of
your files, such as your css and image files, should be in the same folder where your
index.html file is located. Do not put any files in folders or subfolders. Your directory
structure should be similar to the file structure below for example:
The examples below shows you how you call local files from your html:
<link rel=”stylesheet” href=”index.css”> (correct)
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”> (correct)
<link rel=”stylesheet” href=”css/index.css”> (incorrect because it’s in a subfolder)
<script src=”scripts.js”></script> (correct)
<script src=”js/scripts.js”></script> (incorrect because it’s in a subfolder)
Technical Requirements Checklist
● The css selector names“custom-color”and”custom-background-color”are used for
my assigned colour.
● The link or button for the modal uses the id“trigger-modal”.
● The form is enclosed with the div id“bookclubrego”.
● The form uses exactly three div id’s“userDetails”,“addresses”and“contacts”with
exactly 8 input fields, as specified.
● All files are in the same local folder and not in subfolders.
A2 Submission Marking Scheme
For evaluating the compliance of the submission, e.g., with accessibility guidelines, we will
use manual marking and we may use tools to check, e.g., colours. Please recall that only
W3 CSS is allowed.
Report
Quality, clarity of justifications for user experience, Gestalt principles, balance, emphasis,
unity, colour scheme for main page and form. (7 points)
Visual design
Overall quality of user experience, Gestalt principles, balance, emphasis, unity, colour
scheme for main page and form. Appropriate placeholder logo. (7 points)
Common Fate Form follows the Gestalt principle of Common Fate. (2 points)
Proximity Form follows the Gestalt principle of Proximity. (2 points)
Colour Assigned colour is emphasised and present in multiple screen elements. Colour
contrast meets accessibility guidelines. (5 points)
Functionality
Accessibility Submission follows accessibility guidelines presented in lecture. (6 points)
Functional correctness Form pops up as specified. No bugs. (1 point)
Q&A
Q: I understand that the assignment is testing prototyping and not the functionality, but would
some small functionalities be necessary? Specifically in cases like choosing a different item
combo box or applying filters to a list, would we be marked differently if we choose to
implement these small things as it helps to get a better overall feel of the prototype?
A: The purpose for the assignment is design rather than functionality. The assignment asks
students to implement 2 button clicks (i.e., the register button and the close button), and
leave the other buttons non functional.
Overall the answer to this question is No. For best marks, put effort into your design
decisions.
Q: What libraries, etc., can we use?
A: You have to use standard web browser technologies (HTML, CSS, Javascript).You are
not allowed to any libraries except JQuery and, if you wish, the w3.css framework (see
https://www.w3schools.com/w3c… ). You are not allowed to use
anything that generates code for you.
The reason for this approach is that downloading a template that sets the colour scheme, the
font scheme or has a creative layout isn’t your own work. Intrinsically, this assignment does
not require elaborate toolkits, given the super-limited functional requirements of the system.
The assignment focuses on making good design choices rather than implementing
maximum functionality.
Q: Could I submit my github repo?
A: No — you must follow every single submission instruction precisely as they’ve been laid
out. Each instruction is there for a reason. Please ask us in lecture if you are curious!
Q: How should I check the colour contrast of web elements?