Description
Overview
In this assignment you will design and build a user interface to demonstrate your skills with both the iterative design
process (including personas, task descriptions, sketch-based prototypes, screen design, and task walkthroughs) and basic
JavaFX development (including widgets, events, and layout). Part 1 covers the design elements, and Part 2 covers the
coding of the interface.
Your job is to build a GUI for a stand-alone picture frame display (called SlideShow) that presents slide shows using
photos that have been uploaded to the device. The picture frame has a 12-inch 1920×1080 high-res touchscreen that is
used both for displaying the photos and showing the UI when necessary.
Part 1: Design of the SlideShow GUI
1.A Personas
Based on your own experience and discussions with friends and family, develop a persona for a representative user of
SlideShow. One persona is provided below. Your persona description should have the same headings as the provided
persona, but should be substantially different in terms of content (i.e., the two personas should lead to different tasks
and different interface design ideas).
Your persona should include the following headings:
Name
Demographics and Background
Goals and Needs
Motivations
Experience with Technology
All information in your persona should be relevant to the design problem.
Name: Lilian
Demographics and Background: Lilian is 75 and lives by herself in a seniors’ apartment building. She has three children
and six grandchildren (the grandchildren range in age from 5 to 25). Lilian’s family is very important to her – they visit
regularly, and she is very interested in the activities of her grandchildren. Lilian has arthritis in her hands, making tasks
that require fine motor control slightly difficult.
Goals and Needs: Lilian wants to keep up with what her children and grandchildren are doing and loves seeing pictures
of them. She needs to be able to set up and view photos easily and without a lot of detailed finger work.
Motivations: Feeling connected to family; seeing recent activities; finding out about family information to talk about
when her family visits.
Experience with Technology: Lilian has a mobile phone and a tablet, and is comfortable with touchscreen interfaces, but
would not consider herself to be an expert on how the devices work.
Following the format used for Lilian’s persona, create a different persona who represents a different type of user for the
SlideShow device. The persona should be substantially different from Lilian, and should lead to different kinds of tasks
and UI design ideas.
The product of your work in part 1A will be a written persona in a PDF document.
1.B Task Descriptions
Devise four task descriptions for the SlideShow interface – two for Lilian, and two for the persona you create. Refer to
the lecture notes for information on what goes into a task description, and include the following headings:
Task Name
Persona
Importance and frequency (including justification for your ratings of these two factors)
Description (one paragraph)
Specific data that will be used in the task
Specific constraints and goals relevant to the task
Write four task descriptions (maximum 0.5 pages each). The tasks should be substantively different (although you may
re-use one task if it is critical for both personas).
The product of your work in part 1B will be four written task descriptions in a PDF document.
1.C Interface Sketches
Based on the information in your personas and task descriptions, sketch interface ideas for SlideShow that correspond
to your four task descriptions. You will hand in three sketches for each task (so, 12 sketches in total). The sketches
should be complete enough that you can carry out task walkthroughs with your tasks, and should cover a wide range of
approaches (that is, don’t sketch three variations on a single idea). Refer to the lecture notes about what you should try
to achieve in your sketches, and remember that your ideas don’t all have to be good ones. Your artistic ability will not be
evaluated.
Take photos of your 12 sketches. In most cases, your sketches will involve a single screen – but if they have multiple
parts, label the pictures to clearly indicate what is shown (e.g., write the label on paper and put it on the sketch before
you take the picture).
The product of your work in part 1C will be digital photos of your 12 sketches
1.D Task-based Walkthrough Results
For each of your 12 sketches, carry out a task-based walkthrough using the corresponding task description. Make notes
about what worked well and what caused problems. Create a report that shows a picture of each sketch and a summary
of the walkthrough results, with an overall assessment of the main strengths and weaknesses of each design. Clearly
indicate which of your three alternatives for each task is the top choice. Organize the document as a table, with the
sketch shown at left and the walkthrough results and assessment on the right.
The product of your work in part 1D will be written walkthrough results and assessments in a PDF document
Part 2: Building the GUI
Choose one of your UI designs for implementing in JavaFX. Choose a design for a task that is critical to the system, and
that is reasonably complex (i.e., the design should have several widgets and at least some user interaction). Your UI
must be built programmatically in JavaFX (as shown in lectures and labs), not using FXML. You should create the widgets
needed for your design and lay them out using basic container widgets (e.g., VBox and HBox), and attach basic events to
your widgets to demonstrate the operation of the interface. You may use placeholders for images.
Create an archive of your project to hand in: in IDEA, choose File Export Project to Zip file…
The product of your work in part 2 will be a JavaFX project that runs in the IntelliJ IDEA IDE.
What to hand in
Note that this assignment is to be done individually – each student will hand in an assignment.
Part 1: a zip file of your design documents and pictures (named something like abc123-cmpt381-assn1-
design.zip)
Part 2: a zip file of your IDEA project (File Export Project to Zip file…) and a readme.txt file that indicates
exactly what the marker needs to do to run your code. (Note that systems for 381 should never require the
marker to install external libraries, other than JavaFX).
Where to hand in
Hand in your three files (two zipfiles and one readme.txt) to the link on the Assignments page of the course Moodle.
Evaluation
Marks will be given for: carrying out a valid design process that is clearly reported in the documents described above;
and for producing a working GUI that correctly uses JavaFX widgets, events, and layout, and that corresponds to your
design. Note that no late assignments will be allowed, and no extensions will be given, without medical reasons.
