CI 6310 User Experience Project

This document outlines the requirements for the CI 6310 User Experience project, which involves usability testing a desktop web application and redesigning it for mobile. The project is broken into several components, including a project definition, usability test report, design documentation, and a prototype. The document provides detailed instructions, assessment criteria, and guidance for each component, emphasizing a user-centered design approach. It also includes information on report writing, referencing, and feedback mechanisms. The project aims to develop students' skills in user experience design, research, analysis, prototyping, and evaluation.

2017-2018
Module: CI 6310 User Experience
Title of Assignment: Ux Project
Module weighting: 100% coursework
Submission details:
There are four reports, and two prototypes to hand-in. Hand-in of reports is covered here. Hand-in of the prototype is covered in
the prototype section.
Hand in of Reports, Cover Sheet & File Name Conventions
The maximum file size is 15MB (approx.), so please reduce the size of screenshots and other images, before you insert them into
your document. If you have problems uploading via Canvas, then please upload your files in a .zip to a shared folder on
www.box.com, e-mail me the link, and include a link to this folder in the Appendix of the report.
Please name your report file using the following convention - <FAMILY NAME_FIRST NAME_Knumber_ReportName_CIXXXX).
Your individual report will need to be identified using the title of the pdf, and titles such as ‘Ux coursework’ are very common!
Hand in of Prototypes
Please see the specific section for the Prototype(s)
Module Learning Outcomes assessed in this piece of coursework
The overall learning outcome for this module is to develop and explicit, structured and knowledge-based approach to user experience
design. You encountered the idea of ‘user-centered design’ earlier in the course.
The specific learning outcomes for this module are:

2017-2018
 Research user needs and the implications of technology for work practice
 Analyse users and their activities, and carry forward lessons learned
 Design input modalities, output media and interactive content to appeal to an audience
 Prototype interactions between humans and computers
 Evaluate the quality of users’ experience
 Reflect upon design practice and discuss the strengths and weaknesses of alternative techniques
The assessment on this module is a single, extended coursework project, broken down into a number of pieces, which, taken
together, assess all the above outcomes (see Summary Table), and give you the opportunity to develop as individuals.
Element Weight
(%)
Set
Date
Due Date Hand-in via Return
date
Feedback Via
Project Definition 10
All set on
first day of
TB1
Friday 26/10/17
Canvas
_
Assignments
Monday
20/11/17 Canvas
-
Speedy Grader
Usability Test 40 Friday 11/1/18 Monday
12/2/18
Design Doc Models
Process & Rationale
12.5 Friday 983/18 Monday
9/4/18
12.5 Friday 12/4/18 Monday
14/5/18
Prototype 25 Friday 12/4/18 Monday
14/5/18

2017-2018
Assignment Brief and assessment criteria (the coursework overall, and each individual piece, will be discussed within formally
timetabled classes)
A separate assignment brief and marking criteria is provided for each piece of the Ux project (see later).
Brief
The coursework project on this module is “usability test a desk-top web application of your choice, and then redesign and prototype
a mobile version that provides a better user experience. You should adopt a user-centered approach”.
The overall story for the coursework is as follows. First, you define and plan your project – what existing system are you going to
test, what users and tasks are you going to test, what kind of prototype are you going to develop. You then ‘usability test’ your
existing system, to identify some problems with it, and understand how it could be better. The usability test report is handed-in just
after Christmas. Then, you analyse your concerns, and redesign and otherwise innovate and augment your mobile version by well
before Easter. Driven by the usability problems you identified in the test, and your ‘new concepts’ you paper prototype your
improved experience. Hand in your user-centered models. Finally, you complete a hi-fidelity version of your redesign (either as
interactive wireframe or html/css or interactive wireframe) and explain, and reflect on your design process for just after Easter .
Within this general structure, every student’s Ux project will have unique features, so you will have many choices to make as you
complete your project :
You will be supported in your decisions as you go. Many options and variations are acceptable – so please discuss your project, its
on-going evolution, and get formative feedback on it, throughout the module with the module leader and workshop helpers.
Assessment Criteria
An individual marking scheme or ‘rubric’ for each coursework element is provided later, with that element. You can use these
marking schemes to assess your own work and revise it before you hand it in.
Criteria for Report Writing
The marking schemes under-emphasise general presentational expectations that ‘goes without saying’ at this level:
i. Headings and sub-headings clarify the structure and meaning of sections and paragraphs;
ii. Figures and tables have a title and a caption to clarify the point that is being made visually;
iii. Paragraphs open with a link to the previous paragraph, and close with a link to the next paragraph, to clarify the
flow of the argument

2017-2018
iv. Sentences are relatively short and simple, and make one point at a time.
v. Text has been proof read for spelling mistakes, grammatical errors and awkward/ambiguous words.
When you put a draft of your work aside for a few days and then return to it, it should be a pleasure to read – is it?
Vi Screenshots and other images, possibly with annotations, are appropriately used to convey information and your
design thinking – it is a design module after all!
General, Academic and Industry-Facing Criteria
These are my version of some general criteria, applicable to all kinds of academic work.
A: Increasing quality of presentation, originality/novelty, coherence, insightfulness and completeness, including extension
into application and into relevant theory. Correct analysis. Critique of own project. Innovative
B: Increasing quality of presentation, level of analysis and background. Increasing relevance and completeness of
arguments. Increasing consideration of scope of the subject matter and application of knowledge. Decreasing error,
both analytical and proof reading. Mention of future work.
C: Decreasing quality of presentation. Decreasing relevance to the subject matter. Decreasing adequacy of arguments
or of depth of treatment.
D: Erroneous conclusions. Substantial incompleteness.
Fail: Increasing number and severity of errors. Increasing area of substantial incompleteness.
Here are some more ‘industry-facing’ criteria that ‘reality check’ the academic criteria. It is useful to see ourselves as the real world
sees us, sometimes, especially in the final year, when the real world is the next step.
A band: we would be proud to post this on course web pages, and show to other students as ‘an example to learn from’. If
we were a design agency, we would send the work to the client, and expect to be paid. The work is innovative and insightful
– but it could always be more so!.
B band: we would show it to the public as ‘work in progress’, and class mates would be interested. If we were a design
agency, we would hold the work back – some more to do. The work is explicit and structured, and increasingly complete, but
essentially familiar. We need to find an angle, some uniqueness, some precision that makes an audience say ‘Wow!’ or
‘Eureka!’

2017-2018
C: band: there is no reason to show the work in public, or to show it to class mates really. If we were a design agency, we
would need to talk – so far so good, but some sections need to be reworked. The work is somewhat generic – we need to
bring everything we’ve learnt to bear on our work, if we are to stay in business.
D band: it is best we keep working on it together, and ask your class mates for help. A design agency might want to be clear
about what we are getting out of this – the good points will show the way forward.
Feedback (including details of how and where feedback will be provided)
To access feedback on all elements of coursework, please click through the original Turnitin link about 3 weeks after hand-in, and
follow ‘view/complete’ and you should be able to see an annotated pdf, plus overall comments and rubric-based checkmarks (grey
tabs bottom right).
Formative feedback will be given verbally during workshops, and is auditable when there are summary e-mails.
All marks are preliminary pending moderation and confirmation by an Exam Board. Marks may be moderated up and down.
Further Guidance
Frequently Asked Questions (FAQ) Documents
Prepared answers to common student questions are in the Assessment section of the module on StudySpace. Please refer to
them as you go.
Example Structures
An example structure is provided for each coursework element.
These example structures indicate the kind of report that is expected, and is a default starting point for your work. They reflect a
standard approach to the coursework, and encourage good coverage of the brief. Good students will master the standard
approach. However, there is no generally ‘best’ report structure, or ‘best’ user-centered design approach. Excellent students will
be able to adapt the basic, standard approach to the unique characteristics of the interaction issues at hand.

2017-2018
So, initially, aim to produce deliverables that follow the example structure, and then adapt the structure, as you better understand
your problem, and realise how to tailor your work to the issues.
For example, if you are redesigning the ‘Glastonbury Festival’ app (which helps groups of friends find each other), you may want to
analyse your issues (and diagram them) as work for a group, rather than as a task for an individual. If you are designing
Betfair.com for experienced sports traders, you may need an interview, rather than just one simple question, to positively
distinguish ‘sports traders’ from just ‘experienced betters’ – it is difficult to spot the differences. So you will want to include this
additional interview in the Method section of your report.
Target Maximum Word Length
The maximum length stated does not include tables, illustrations, and Appendices.
The purpose of maximum word length is to draw your attention from the start to the importance of responding to the brief,
clearly and concisely. Please use design ‘products’ and ‘representations’ (personas, scenarios, diagrams) appropriately. A
picture can say 1000 words. A concise report that answers the brief, demonstrates the competences being assessed, and ‘adds
value’ by providing insight into your problem and its solution, will score very highly, even though it is short.
If you have exceeded the maximum word length, even by many hundreds of words, there is no automatic penalty. There
may be good reasons in your case for a ‘high’ word count - e.g. the total may include annotations, or user quotes, or paragraphs
that could have been presented in a table, or Appendix. Or your tasks might be unusually complex, and so take longer to
explain; or your procedures might be unusually complex - perhaps you used special equipment, or tested multiple conditions; or,
finally, your report might raise complex issues that need deeper consideration of the literature.
So, write a full draft, leave it for a few days, and then revisit it with a critical eye. Does each word, each line, provide new, valuable
information and so deserve its place in your report? Or could you cut it, and get to the point sooner? or could you convey the point
more clearly another way? If in doubt, it is much better to include relevant material, and exceed the word limit, than to miss out part
of the coursework.
There is a penalty for verbosity, irrelevance, repetition of textbook material, or blandishments a member of the public could
have guessed. It is harmful to hide or bury information that adds value – bring it to the surface.
Referencing and Plagiarism
Please use Harvard style referencing http://libweb.anglia.ac.uk/referencing/harvard.htm

2017-2018

2017-2018
Faculty of Science, Engineering and Computing
Assessment Form
Module: CI 6310 User Experience
Title of Assignment: Project Definition Report Deadline: Friday 26 October 2017
Module weighting: 10%
Submission details: see Hand-in of Reports (p1)
Module Learning Outcomes assessed in this piece of coursework
The learning outcomes assessed in this piece of coursework are:
 Research user needs and the implications of technology for work practice
 Analyse users and their activities, and carry forward lessons learned
 Evaluate the quality of users’ experience
 Reflect upon design practice and discuss the strengths and weaknesses of alternative techniques
The coursework is also an opportunity for you to develop as individuals, and for employment (though this is not assessed)
 To act as independent, self-guided problem-solvers and learners
 To perceive opportunities for User Experience Design to achieve organisational objectives
Assignment Brief and assessment criteria (these will be discussed within a formally timetabled class)
This piece of coursework defines your Ux project, motivates the project, and sets the project in context. It states what you are
going to do, and why this would be important, and of general interest, in the real world. It also states how research literature will
help you in your endeavours.

2017-2018
Example Structure : Target Max Word Length 1,500 words
1. Introduction and Background
1.1. Recent Developments and Trends
What real world changes in business or society make your system important?
Why is user experience important to this business sector?
Why is it timely to evaluate and redesign the user experience now?
1.2. The Existing User Interface
Describe the current interaction - walk through a task and illustrate the flow of interaction with linked
screen shots annotated with user actions.
What *kinds* of usability issue do you expect users will encounter with this interface? Give examples.
1.3. Relevance to the Field/Literature Review
Find some studies, evaluation reports about similar systems – How are you going to apply this
existing work ? Are you going to extend it? What implications does it have for your current
Why would a UX professional from another industry sector be interested in your project ? Does it raise
common problems and issues (it is typical)? does your project go beyond existing knowledge (it is novel)?
2. Aims
In the context of the above, what needs to be done to improve the user experience ?
All you may need to say is that you are evaluating the current website from a desktop, and then designing an
equivalent responsive site. But, depending upon your choice of scope and strategy, you may have more to
say…..
What should be done to improve the user experience?
There are three important decisions to make:
i. What system will I evaluate and redesign?
ii. What user scope, what task scope etc. should I set?
iii. What is my project strategy? What are you exact objectives and phases (given the constraints of the coursework).

2017-2018
There is one important task to highlight – finding relevant research literature to help you.
A good Project Definition is complete, coherent, well-structured argument that persuades a Ux professional to support and follow
your work.
Feedback (including details of how and where feedback will be provided) As standard see p4
Further Guidance
Choice of System
The existing system you choose to evaluate and redesign should be an application or website, accessed from the desktop.
Options include:
I. Any application, system or site that that you are familiar with, either in the work-place or in everyday life, such as
fantasy football league, PC back-up in the cloud, workflow applications, online maps
II. web sites for e-commerce, search, learning, booking, networking are often popular
III. systems available to students on the KU network, such as web design and development tools, image editors,
drawing applications, spreadsheets, project management tools, citation and reference management tools, diagramming
applications.
IV. or computer games, communication tools, and media channels, linkedin, twitter, you tube etc.
Whatever system you choose, it should raise a variety of user experience issues - usability, learnability, engagement and persuasion -
and include significant amounts of data and content – most contemporary systems do.
Examples include: www.asos.com; www.agoogleaday.com; www.prezi.com; Gimp2.0; www.basecamp.com;
www.mindmeister.com. www.aptana.com
Criteria to Consider:
The application, system or website that your choose should be:
a. Of interest to you. You will spend the rest of the year working on it, so pick sites and applications that are interesting
to you. What software do you use to pursue your interests or hobbies?

2017-2018
b. Add to your track record. What do you want a future employer to see on your CV? Mobile phone retail, banking,
education, games, data analysis, science, programming, charities?
c. Requires resources you have. Where will you find participants for your usability test? (friends and family, other
students, work colleagues?), Can you take screen shots and/or record the existing interface? How will you give
usability test participants access to it? Do you have sufficient domain expertise?
d. Technically challenging. Often this might mean:
i. Innovative, leading edge systems, that have not been perfected by anyone yet
ii. Data intensive systems. Conveying large amounts of information clearly and intuitively, through a
small screen is difficult
iii. Non-core features. Developers typically spend most time perfecting the frequently used, business critical
features (such as checkout pages, editing tables), and have no time left to fix mistakes with less frequently
used, non-critical features (such as terms and conditions pages, organising references)
iv. Open source software, that need volunteers to finish it
v. Fit into a multi-channel and multi-touchpoint world. To be up to date, your topic will ideally concern user
experience on many types of device – smartphones, tablets, laptops, and desktops PCs – at many points in the
customer journey. For an e-commerce site, for example, this journey might include inspiration to go shopping via
e-mail, browsing for clothes on mobile, selection and payment for purchase on PC, sharing information about
purchase on iPad, arrange a return via telephone.
Choice of User and Task Scope
What part of the system do you want to focus on? you may focus your coursework on a sub-set of tasks. You do need not to
evaluate the entire product
You are encouraged to consider all dimensions of user experience as appropriate i.e. for web shops, consider engagement and
persuasion as well as ease of use. If you do need to consider ‘softer’ qualities of interaction and experience, such as
‘luxuriousness’ or ‘excitement’, please make ensure that user experience is usefully measurable to some extent.
Choice of Strategy
What needs to be done to most enhance the multi-channel, multi-touchpoint user experience of your system? (assuming your
desktop system is part of a constellation of interations and platforms). There are many possible answers, including:

2017-2018
a) improve and optimise the primary channel i.e. evaluate desk-top user experience, and optimise desk-top user
experience by redesigning it. For example, check-out processes, expert users performing high frequency tasks. This
can be too easy, especially if your usability test reveals there is nothing to fix! So, you might consider
comparing your system with a competitor - this raises the bar, for your system and for you. You might also consider
adding a significant new feature to the existing system and designing it using the lessons learned from the evaluation,
rather than just redesigning the given functionality – this increases the opportunity for innovation and novelty
b) complement existing desk-top access with tablet access i.e. evaluate the desk-top user experience, learn what is
important and why, apply the lessons learned to the design of an equivalent tablet app, or responsive website. For
example, create a responsive design to your favourite web shop (one that automatically adapts the display to the
width of the display). This is the kind of contribution I would suggest, by default. It is up to date and widely
applicable.
c) Expand an existing mobile app with desk-top enhancements i.e. a mobile app has outgrown its mobile home, and
needs desktop enhancements. Mobile first is an up to date approach, but you might learn more by evaluating a
relevant desktop application, than the existing mobile app. Capturing data from mobile devices is also more
difficult than from laptops, though it is getting easier. Please talk to the module leader!
Major mistakes
Simple, narrow problems with self-evident solutions that any person in the street could design, such as a 3-page photo kiosk, or a
10 button TV remote control are too easy – the overall challenge and level of difficulty of your topic will have a general impact on
your mark. SET YOURSELF A CHALLENGE.
Failing to include any literature in your Project Definition, and not working out how previous work relates to your topic.
Even more further guidance
Even more guidance is available in the FAQ documents in the Assessment section of study space for more details.

2017-2018
Marking scheme
Section (max) A
Excellent
B
Sound
C
Satisfactory
D
Weak
F
Fail
Development
s and Trends
Relation to Organisational
Objectives?
Widespread?
Timely?
High Impact?
Coherent Argument?
Evidence? Citations? /33
Existing User
Interface
Complete?
Concise?
Task-based?
Includes general *kinds* of
issue AND examples
Complexity and Novelty of
issues /33
Relevance to
the Field
References?
Audience Identified?
Clear extension or
application of knowledge?
/33
Total /100
Strengths : Areas to Improve:

2017-2018
Faculty of Science, Engineering and Computing
Assessment Form
Module: CI 6310 User Experience
Title of Assignment: Usability Test Report Deadline: Friday 11th January 2018
Module weighting: 40%
Submission details: see Hand-in of Reports (p1)
Module Learning Outcomes assessed in this piece of coursework
The learning outcomes for this piece of coursework are:
 Research user needs and the implications of technology for work practice
 Analyse users and their activities, and carry forward lessons learned
 Design input modalities, output media and interactive content to appeal to an audience
 Evaluate the quality of users’ experience
 Reflect upon design practice and discuss the strengths and weaknesses of alternative techniques
The coursework is also an opportunity for you to develop as individuals, and for employment (though this is not assessed)
 Communicate and collaborate in a professional manner
 To work in an ethical, social and security –conscious manner
Assignment Brief and assessment criteria (these will be discussed within a formally timetabled class)
This piece of coursework is to conduct and report a usability test of an existing system. The usability test should be based on the
CIF standard method and reporting format described in the lectures. Typically, students ask their friends and family to participate in

2017-2018
usability test, or play ‘participant’ for each other – no need to approach strangers! A handful of participants is usually sufficient to
cover a range of user personas and identify a range of usability issues. I know you do not have enough time to test a
representative sample adequate for statistical analysis, but go about your work and analyse the results as if you were going to test
many participants eventually.
Example Structure : Target Max Word Length 3,500 words
2 Aims
The aims of this evaluation. Will be different to the aims of the whole project, and may have evolved
since the project definition. The overall aim may be broken down into a number of evaluation objectives (the
‘big questions’ for your study to answer – see Problem Statements in workshop), and explained
3 Study Method (include rationale for decisions made)
3.1 Experimental Design (e.g. one-shot, comparison, or repeated measures (for learnability))
3.2 Participants
3.3 Tasks
3.4 Metrics
3.5 Materials Identify and give reasons for form. Include blank copy in Appendix.
3.6 Procedure
3.7 Expected Results
4. Evaluation Results
4.1 Written summary of overall findings
4.2 Performance Data (including Tables of Quantitative Data – mean times, ratings etc)
4.3 Usability Issues (including Table)
4.4 Redesign Recommendations
Identify and outline roughly the changes that will resolve the issues identified May be included as
a column in the Table used for 4.3
5. Evaluation Discussion
(Including consideration of, for example, unrepresentative samples of users/tasks/contexts, confounding
variables and biases, inaccurate or unreliable indicators). Further, and related evaluation studies.
Appendices
Materials (Invitation to Participate, Participant Information Sheet, Screener, Task Instruction Sheets,
Observation sheets, Post-Test Questionnaire, any custom questions, protocols as required by any adaptation

2017-2018
of CIF.). An Optimal path, Screening script, Moderator-Participant protocol and List of Possible Errors are not
requested, as they just ‘sensitise’ your observation – they are typically not included in research reports.)
Illustrations
Follow the evaluation lectures carefully, and try to work systematically – a usability test is a little bit of science!. A good usability
test report is complete, and follows the standard format. More advanced students will be able to adapt the standard method to
accommodate the unique features of their project and the problem at hand – for example, to evaluate user experience, not just
usability. It is important for usability test reports to be clear – human - computer interaction and user experiences can be difficult to
describe fully and unambiguously, and we need to all understand the issues first, before we can think about how to resolve them.
Viva
You are asked to give a demo/viva of raw data files (signed consent forms, completed questionnaires, observation sheets,
video/audio recordings) to verify you have indeed performed the usability test you claim to have done. The viva will occur during
any timetabled workshop during January and February i.e. immediately following the hand-in of the usability test report. Please
bring along your raw data files to any one of these workshops, and we can talk about how well your ‘test sessions’ ran. The
marking scheme awards a few marks for a complete, well organised and rich set of data. When a viva is requested, attendance
and evidence is absolutely essential.
Feedback (including details of how and where feedback will be provided) As standard see p4
Further Guidance
Raw Data is Private, Keep a BackUp
Please keep your raw evaluation data (completed questionnaires, task instruction sheets, video recordings etc) as hard copy for
use in the viva. Do not include raw data sets, or any software you may have created in your report. To ensure participants’
privacy, please do not include personal information in online submissions, as these are copied to servers and plagiarism databases
etc. all over the Internet. You may, however, include anonymised data extracts for illustration – quotes, video-clips and
screenshots with faces blurred out etc. Where possible, please place these figures next to the relevant paragraph in the report,
though this may not always be possible.
Major mistakes
Conducting heuristic evaluation, or some kind of analytic inspection, rather than an empirical study.

2017-2018
Marking scheme

2017-2018
Section
(max)
Mar
k
A (>35) B (30-34) C (25-29) D (20-24) F (<20)
Method
(50)
Standard, metrics, materials and/or
procedures have been successfully
adapted to gather the information
needed to answer the evaluation
questions. Experiment and method
design rationalised and technically
convincing. Replicable - . clearly and
completely documented. Evidence of
systematic conduct, and highest
scientific and ethical standards.
Coherently and systematically applies
standard methods in classic
combinations to gather evidence to
obtain actual ease of use. Objective
and ethical approach to assessment
using quantitative and qualitative
information. Some ambiguous,
unrationalised or undocumented steps
in procedure. Works with the
technical implications of practical
constraints.
Ethical approach to data
collection is ethical, but may rely
too heavily on either quantitative
or qualitative information.
Increasingly partial or ambiguous
report of procedure. Standard
metrics not applied for no
apparent reason.
Description rather than
application of evaluation
methods, some
misunderstandings of
procedures, and standard
reporting. Steps not carried
out.
Missing materials,
unplanned
approach, erroneous
and insufficient data
collected.
Results &
Discussion
(50)
Concise summary of major findings.
Presentation of performance data,
and usability problems is complete
and coherent with method.
Qualitative data augments clear
explanations for performance.
Appropriate emphasis and
certainty/caution. Clear, prioritised
redesign suggestions, carried through
to UI snippets and screenshots when
appropriate Critical insight into
methodological limitations.
Useful summary of performance,
usability problems, and qualitative
comments. The empirical basis for
findings is not always clear. The
quantity of data begins to overwhelm
the reader. Implications for redesign
are clearly identified, but may not be
carried through to detailed design, or
explained to be convincing.
Some relevant and correct
findings, support redesign
suggestions. But omitted results
are increasingly noticeable.
Interpretation of data may be
unbalanced, and implications for
redesign sometimes unclear.
Analysis of raw data is
sometimes incomplete and full
of errors. Interpretation is
sometimes faulty or
misleading.
Contrived, spurious,
or speculative data
provided..
Presentati
on and
Scholarshi
p
These criteria are
reflected in the
Method and
Results sections
Concisely written report, with a
smooth, flowing argument, even when
issues are abstract and complex.
Illustrations and diagrams are
attractive, clearly enhance the text
and support search and reference, as
well as reading. Has critical insight.
Complete, well-organised and rich set
of audio video recordings, Overcomes
obstacles to access participantsPlenty
of data
Clearly and correctly expressed both
in writing and visually. Content is not
always summarised as well as could
be, nor does it always emphasise the
most important points appropriately.
Readable. Some errors in citation and
referencing. Awareness of important
strengths and weaknesses.
Increasing omission of recordings and
documentation due to slips or
technical obstacles rather than
participant consent. AUfficient
participants and data
Comprehension is assured, but
the report may be difficult to follow
at times. Illustrations and
diagrams sometimes fail to
convey relevant information.
Plausible suggestions may
appear flawed when challenged.
Citations and references present
but incorrect. Limitations and
alternatives sometimes not
considered.
Tends not to collect some data –
time on task, surveys. Convenient
participants. More data would
benefit project
he fragmented report includes
mistakes in written English.
Some diagrams and
illustrations are missing or
illegible. Bloated with
unnecessary or repeated
information Occasionally
lacking in coherence, and
does not consider relevant
factors. Missing references
and poor citation.
Confabulated data. Too little
data collected. Opinion used
for data
ritten work is often
unclear, confused or
irrelevant.
Significant
omissions from
figures and
Appendices.
Lacking in
coherence, and
does not consider
relevant factors.
Did not attend viva.
Missing data
Total
Strengths : Areas to Improve:

2017-2018
Faculty of Science, Engineering and Computing
Assessment Form
Module: CI 6310 User Experience
Title of Assignment: Design Documentation Reports Deadline: Models Friday 8th March 2018
Design Process & Rationale Friday 12th April 2018
Module weighting: 25%
Submission details: see Hand-in of Reports (p1)
Module Learning Outcomes assessed in this piece of coursework
The learning outcomes for this piece of coursework are:
 Research user needs and the implications of technology for work practice
 Analyse users and their activities, and carry forward lessons learned
 Design input modalities, output media and interactive content to appeal to an audience
 Reflect upon design practice and discuss the strengths and weaknesses of alternative techniques
Assignment Brief and assessment criteria (these will be discussed within a formally timetabled class)
This piece of coursework has two halves – the Design Rationale convinces the reader than the prototype ought to achieve a great
user experience. The second half documents what you have learned about the users, tasks and contexts of use at hand, and
represents these learnings as a number of models. These models will support continued, iterative design of the interaction.
Design Rationale
The design rationale should emphasise your choice of solution (with reference to the evident user need). The motivation for the
redesign, and the desired qualities of experience that are sought (ease of use, engagement etc.) were established in the usability
test and problem definition, so there is no need to repeat that again. The new information is the choice of solution – a Tree
component rather than a menu structure, a link rather than a button.

2017-2018
Also, try to support your design decisions with references to specific design guidelines, and findings. Everyone has an opinion
about UI design, and everyone believes their opinion is right – to win the argument you need to quote authoritative sources that
persuade others that your decision is the correct one .e.g styleguides, textbooks, practitioner websites.
You will also need to select the most important issues to explain and emphasise. Like writing a summary,
Models
See the relevant slides on Analysis. These models should be useful summaries that support future work, and that reveal new
information and learnings about the design concerns.
For the task and object models I would suggest a relatively high level of analysis state the intended outcomes, and attributes, but
omit system specific details, such as particular modes of data entry, or individual user actions – see slides.
Example Structure Models Target Max Word Length 1,000words
1. Models
The contents of this section will reflect what you have learnt about your problem, and the nature of
your problem. So, you need to choose the kinds of model to produce. Most topics will need models 3.1 –
3.4), but please talk to the module leader if you are uncertain.
2.1 Personas
2.2 User Journey
2.3. Hierarchical Tasks Analysis (how users conceive and sequence their goals)
2.4. Object Analysis (how users want to organise and view the information they work with)
2.5. Discussion. reflection on the selection and effectiveness of modelling and data gathering
techniques, and tools
2. Discussion: limitations of tools and technologies, future work,
Example Structure Design Report Target Max Word Length 2,500words
1. Design Process

2017-2018
Outline the stages of your design process, and the activities your carried out to advance your thinking. 500
words
2. Rationale
Select the most important changes you made. For each issue you address, explain why you solved
the problem this particular way –the questions posed, the alternative design options considered, and the
criteria used to select a preferred option. Support your argument with links back to evidence in your usability
test report, and with references to design guidelines and findings from the literature.
It is often necessary to explain a set of small changes together, rather than individually – problems and
constraints may be inter-related.
2.1 Issue A
2.2 Issue B
2.3 Issue C
3. Discussion reflection on areas of uncertainty, innovation and the unresolved/outstanding issues.
Relevance of literature and sources applied.
Feedback (including details of how and where feedback will be provided) As standard see p4
Further Guidance

2017-2018
Marking scheme
Section (max) Marks A (>35) B (30-34) C (25-29) D (20-
24)
F (<20)
Design Process
and Rationale
(50)
Convincing. Novel resolution.
Creative and imaginative.
Gives appropriate emphasis
to key issues. Clearly
identifies design questions,
alternative design options,
and criteria. Separates out
related issues, and weighs
factors and balances
considerations appropriately.
Supported by evidence and
references to guidelines.
Discussion of areas of
uncertainty/ outstanding
issues. Clear and Concise
Explicit and structured,
correctly applies best practice
solutions. Mostly supported by
design guidelines, models and
findings. Mostly robust and
reassuring. Some detailed
issues suggest loss of
balance and proportion.
Critical appraisal of prototype
could have been greater.
Increasing apparent simplicity
of complex issues. Soundly
expressed
The design is worked through
on paper, but somewhat
vaguely. Tends towards
variants of known solutions.
Tends to only describe how
interaction is carried out, and
why the change is needed and
not alternative design options).
Some issues are somewhat
convoluted and unnecessarily
intertwined. Focus and
perspective is lost at times. A
little wordy and unclear at times
Does not consider
relevant factors.
Reasoning is not fully
implicit. Tendency to be
unclear. Uninformed by
guidelines or existing
solutions. English
language errors obstruct
comprehension
Does not consider
relevant factors.
Increasingly
implausible. Does not
apply a user-centered
perspective.
In appropriate
simplification
Models (50) Appropriate selection, use
and and discussion of
alternative typesof model. Has
insights into users and their
behaviour as uniquely
involved in this problem.
Supported by evidence,
references and wider
reading, Excellent
presentation
Documents potentially
valuable, specific information
about users. Some empirical
details are included. The
typical range of models have
been used as suggested .
Good presentation
Information about users is
represented, but is not that
surprising. Awareness of
purpose of modelling is lacking.
Some necessary models
absent. Little empirical basis
Information about users
tends to be generic and
bland. Basis for
expectations is unclear
– tends towards pre-
judgement, rather than
integration of evidence
Contentious
assumptions and
speculation
Total
Strengths : Areas to Improve:

2017-2018
Faculty of Science, Engineering and Computing
Assessment Form
Module: CI 6310 User Experience
Title of Assignment: Prototype + Instructions Deadline: Friday 12th April 2018
Module weighting: 25%
Submission details:
Please include in the .zip:
I. a video (mp4) showing a user interacting with your final prototype. This shows how the UI should be used.
AND
II. a folder containing all the files needed for your prototype to function - this is a version that I can interact with when I mark it.
. Please use the following common formats .pdf, or .html, .css and images, or .ppt. – check that your prototyping tool will
export to these format – most do.
III. the task instructions file for the final prototype. This tells your user participant (me in this case) how to access your prototype,
and the goals they should attempt to achieve with it.
IV. a second folder that includes your paper prototype as a series of scanned A4 sheets. The paper prototype evidences your
design process. I do not try to interact with it.
The video recording of the prototype is the definitive deliverable. The additional files are a very useful reference for clarification and
confirmation, and greatly reduce the need for VIVAs, so please include them.
A Task Instructions.pdf .
Module Learning Outcomes assessed in this piece of coursework
The learning outcomes for this piece of coursework are:
 Design input modalities, output media and interactive content to appeal to an audience

2017-2018
 Prototype interactions between humans and computers
The coursework is also an opportunity for you to develop as individuals, and for employment (though this is not assessed)
 To develop one part of a portfolio of creative work
Assignment Brief and assessment criteria (these will be discussed within a formally timetabled class)
This piece of coursework is to mock-up a new version of the existing system, which has a great user experience.
You need to create the kind of mock-up that best responds to your project so far – given the business goals and state of the art you
described in the Project Definition, and the Usability / user experience issues you identified in the Usability Test Report, what kind
of prototype will move the design forward the greatest distance, in the desired direction?
There are three important decisions to make:
i. What technology to use – wireframer or html/css?
ii. What user tasks will the prototype support? – it may not be possible to mock-up everything
iii. What direction will redesign take? – at the start of the year, I suggested creating a mobile version of a desktop application,
but we may have discovered new information by now. Is it better to fix the usability problems identified at the desktop, or
add a new feature?
Define your Ux prototoype in terms of the tasks that it supports, and then work out the screens that your prototype must comprise in
order to that.
Task A
A series of screens that apparently support the completion of one task
Task B
A series of screens that apparently support the completion of another task
Task …N
Depending upon your topic, your prototype may need to support more, or fewer tasks, and many or a few
screens – it depends upon their complexity. A number I have used in ‘10 screens’, but that can be very
misleading.

2017-2018
A Ux prototype should serve three purposes well:
I. to specify the solution. The prototype *is* the specification. The prototype should clearly and unambiguously specify the
intended behaviour of the application. All relevant parameters should be defined, if required by the scope, including
secondary dialogs (errors messages, progress indicators etc). Give the prototype to a programmer, and he or she should be
clear about what you want them to build.
II. to get feedback from users about the quality of your redesign – have the problems identified really been fixed? Are there
any issues which remain ? It follows that the prototype should fully support the apparent completion of meaningful tasks.
This will typically require hi-fidelity presentation of both the visual appearance and interactive behaviour of
selected interface elements. The prototype should allow a participant to become immersed in interaction, free from
annoying distractions and jarring discontinuities – such as ‘meaningless latin text, empty image placeholders, abrupt dead
ends, bugs, skipping over intermediate steps etc. ;
III. to support discussion and collaboration. The prototype should be easy to share, examine and comment on.
Your prototype should not break design rules, or be inconsistent – check the styleguide for your platform.
Some prototypes are easier to build than others, so there are marks for technical difficulty. To a certain extent, html/css is more
difficult than using programming constructs in wireframers (conditions, variables and rules), but Ux prototyping is also about re-
purposing technology – using media for prototyping, which was not created with prototyping in mind.
The purpose of the Instructions .doc is so that I attempt to use your prototype in the way you intend – to achieve the intended task
goals, and in the intended feedback session context.
The Instructions.pdf comprises:
i. a cover sheet with your name, module name and code. If applicable, a single side of A4 that provides access details to your
work in the cloud (URL, password etc.) to the prototype.
ii. task instructions. Pages exactly as you would give them to a participant in a feedback session based on your prototype -
‘experimental materials’ if you like.
iii. Moderator’s instructions. Pages that describe any set up or context in which the prototype should be used to experience it in
the intended way.
Task instructions should be clear, and avoid bias. Moderator instructions should be clear and easy to follow. In particular, the aims
of any feedback session – the issues that you remain uncertain about/need to study – are important.
Feedback (including details of how and where feedback will be provided) As standard see p4

2017-2018
I will give feedback about the prototype on the TaskInstructions file, so please remember to upload one to studyspace.
Further Guidance
Choice of Technology and Tools
All prototyping tools have their limits – so go as far you can, and discuss those limitations in the Design Documentation.
You may use the tool of your choice, either from the KU network or hosted in the cloud – a wireframer, or a web User Interface
framework, for PC or Mac. However, please make sure that you can generate an acceptable file format. The ease of distribution
and ‘viewability’ of your prototype is an assessment criterion, and is a genuine issue in real world practice too – stakeholders and
users need to access your prototype to collaborate in the design process!).
You can produce the video that captures your interactive design using Cam Studio or other screen recording software. The video
shows how you expect a user to interact with your prototype. If you walk through the user’s tasks using your prototype, giving
a commentary as you go, the overall effect can be very positive. A well-rehearsed single take is often sufficient to give useful
insight into the intended user experience. You can also use video editing software such as Final Cut Pro to cut together and
annotate separate sequences e.g for distinct tasks, or distinct platforms, but high video production values (background music,
special effects etc.) are not expected (see marking scheme) and ‘hype’ can distort collaboration and feedback.
Wireframers
www.axure.com, particularly http://www.axure.com/edu and http://www.axure.com/learn.
This interactive wireframing tool is as easy to use as a UML diagramming tool and Powerpoint, and is useful for working through
interface architecture, page flow and layout issues. Available on the KU network
This supplier have a free download and an educational programme for students - sign up and it is free to use. Axure also provide
numerous tutorials about advanced wireframing techniques (see URL above), such as dynamic panels, and conditional variables,
for branching prototypes, plus other resources, such as component and template libraries for various platforms and application
domains. Please generate html pages from your wireframe and hand-in a zip folder of html, css and image – rather than the
URL in the axshare cloud.
 For mobiles, Invision is a similar wireframing tool. They also have a similar educational programme is
http://www.invisionapp.com/education. The validation code is 56-73-13-19
 www.justinmind.com have a 'free forever' version of their wireframer.

2017-2018
Responsive Web Frameworks
ii. www.getbootstrap.com
This responsive front-end framework provides html, css and javascript resources for creating web pages that automatically
adapt web content and layout to the width of the screen of the accessing device i.e. the same web page looks nice on a narrow
mobile phone, as well as on a wider tablet, and desktop. If you need to work through the details of look and feel of a website on a
variety of access channels, this framework might be appropriate. A workshop for exploring the bootstrap framework is in the
workshop folder 'Responsive Design'. Webflow.com provides a wisiwig / visual editor for a responsive web framework.
Other Alternatives:
 For desktop applications, try Microsoft Visio (available as part of Office productivity package) or the Graphical User Interface
builders within NetBeans or Visual Studio.
 For minor revisions of existing systems, screen shots of the original site edited within Photoshop, can create hi-fidelity
prototypes with flexible interaction and example content quite easily. Images can also be used within wireframing to tools to
achieve both interactivity and a realistic look and feel, for example, by adding a transparent button on top of the image.
 For hi-fidelity, aesthetically pleasing look and feel, Graphics tools, such as photoshop, GIMP, are probably best. Consider
using Photoshop in conjunction with wireframes (using image components with click through animation), and dare I say,
powerpoint, to add interactivity.
Choice of Scope
The prototype should support meaningful tasks, but you may not have time to create a prototype for all the problems you identified.
So prioritise the solution – which task is most important? Which task demonstrates the novelty and insight – and define your scope
accordingly. Take care, however, to retain sufficient complexity. Some tasks, such as ‘signing on’ and ‘check current temperature’
can be very simple, especially on mobile devices.
Major mistakes

2017-2018
Sketching a couple of clunky-looking powerpoint slides.
Developing a fully-functional prototype that demonstrates the feasibility of a full implementation and achieves partial delivery of the
full system. (That is good software engineering. Ux design focusses on user experience and that typically requires different kinds
of prototype.)
Describing the elements on each page one by one – remember to walkthrough a meaningful task from a user’s perspective.
Marking scheme
Section (max) Marks A (>18) B (15-17) C (13-
14)
D (10-12) F (<10)
Technical and
Collaboration
(25)
(robust, elegant,
sharable, supports
orientation and
comment)
leading edge technologies and
tools have been used in an
innovative way,
elegant solution using
advanced scripting and
structures, encourages
comment and iteration
suitable technologies and
tools ; easy to distribute,
loads and runs quickly and
smoothly; clear viewing
instructions;
Technologies and tools could
have been used more
appropriately; distribution and
viewing is somewhat
constrained, but collaboration is
clearly sought and supported. ;
somewhat slow to load and run;
viewing and commenting is not
easy. Some elements are not
named
technologies and tools selected
for convenience of creator;
distribution and loading poses
obstacles; slow to load and run;
viewing is confusing; uses
unusual, proprietory formats
and tools
Technology and tools
lack power, or add
complication;
distribution and
viewing requires
repeated explanations
and support from
creator. Missing , or
contradictory
elements
As
Specification
intended behaviour of the user
interface defined completely
and in detail, accommodates for
In some respects, a
reasonable person might
misinterpret details of the
the design responds to the
brief, some information is
obviously absent. Absence of
The design is ‘off message’ in
some respects, increasingly
omits key steps and on-screen
The design is not a
relevant response to
the brief. Unfinished