CO2104: User Interface (UI) Design and Evaluation

Coursework 3: High-Fidelity Design Portfolio, Heuristic Evaluation and Assessment Criteria

Topic:

Present a Design Portfolio on producing a high-fidelity prototype (HTML/JavaScript) for a desktop Web-based Task Manager and demonstrate a user based Heuristic Evaluation for it.

Submission Deadline: Friday 27th March. 2020, 16:59

Coursework weight: 40%

This CW3 addresses the following Intended Learning Outcomes (ILOs):

·        Design and develop interactive, responsive user interfaces

·        Demonstrate visualisation techniques for user interfaces

·        Assess accessibility in user interfaces

·        Demonstrate user interface design and prototyping following a user-centered design process

·        Evaluate usability of user interfaces with direct/indirect heuristics

The submission will take place via the Blackboard site – please submit in time and not the last minute

(please see the end of the document for information on late submission penalties)

What is a High Fidelity Design Portfolio?

A High Fidelity Design Portfolio is a reflective document that supports a functional prototype. It also charts the development and testing of a functional interface application/piece of technology/service/concept. User Interface (UI) Interaction, and User Experience (UX) designers utilise this development to work with end-users/clients/stakeholders to assess suitability and functionality of the proposed solution.

Alongside the portfolio is a functional development that demonstrates elements of the prosed product, which allows the end-users/clients/stakeholders to test the ideas of the development team. This will not be a complete system, but could be seen as either a “Horizontal”, “Vertical”, or “T” shaped prototype, where a “slice” of the final product will be created to allow for testing of the key requirements, accessibility, usability, and to carry out a feasibility studies for the final development.

What is the high-fidelity Design Portfolio, functional prototype, and Heuristic Evaluation that I need to produce for CW3?

For CW3 you are expected to submit TWO elements. The first is a portfolio of evidence for a typical Web-based desktop (not mobile-based) Task Manager. This document needs to show where elements of the design have met the needs of the end-user, and perform a user based Heuristic Evaluation (HE) and Usability testing involving theoretical users to your system.

The second element of submission is to supply a functional prototype, which has been created using HTML (with CSS), and JavaScript. This prototype can be created in a package of your choosing, as long as it allows for you to code your own HTML, CSS, JavaScript (such as Notepad ++).

Your portfolio must include the following (these are the requirements of your design portfolio):

·       Clear, well-structured and presented Introductory (1-2 paragraphs), where you explain the topic of application/technology (in this case the web-based Task Manager), explaining the motivation behind designing such a system and its key user requirements. The latter part of this section can be similar/almost the same to your CW2 first paragraph, as is present in this assignment to remind you of your focus for the design. This will also form part of your evaluation, when you reflect on how the design/focus might have changed due to technical issues, or because of testing (as examples).

·       A development list of the functions/features, which you will be developed, to fulfil the development of a “T” shaped / “vertical” prototype. The choice of each element proposed should be justified.

·       A series of annotated screenshots (one page of your site per A4 page) that highlights…

·       a short page description (the function of the page)

·       the functionality/features of all element found within each page of your web-based product.

·       where functionality has been simplified for the prototype, but could be expanded in the final product (i.e. additional database interactivity).

·       elements that meet the requirements of the client/end-user.

·       where accessibility has been considered in your implementation (functionality, features and design choices).

·       Clear, separate section within your portfolio where you present your designs for your Heuristic evaluation and Usability testing, justifying why you have chosen what you have for testing.

·       Clear, separate section within your portfolio where you present the results of your Heuristic evaluation and Usability testing. You should be looking to have had at least FIVE individuals test your product. These can be class peer but you are encouraged to test with other individual who could benefit from your product. The more suitable individual testing your prototype the better the evaluation.

·       Clear, well-written Discussion section on your evaluation findings where you provide clear review of the feedback. This review should then be used to document influence of change to your design, or justification to why your design will not change even when feedback identifies potential issues with end-users.