Assignment 1 involves the application of User eXperience, usability and design principles discussed in class, for the creation of a proposed Lo-Fidelity prototype of your group project’s application, illustrating your ideas for the the overall look-and-feel of a web application’s UI, i.e., your group project. Though you are encouraged to meet with your group members, keep in mind that this assignment is not a group assignment. Instead, meet with your group to discuss project ideas (e.g., purpose, features, target users) that you may use to develop your own prototype of your group’s application.

The goal of this assignment is to help you draft a proposed set of requirements for your application, as well as assess the suitability of Front-End APIs for your project, given those proposed requirements, while allowing your group to take part in a parallel design exercise where each of your project group’s members will be submitting their UI vision for the group’s web application. This approach is commonly used in start-ups and design/development firms, as it often results in better team collaboration and more efficient development and integration. Remember, each group member is expected to submit a different prototype.

As part of this assignment, you will also have to provide justifications for the design choices you have made, e.g., APIs, Front-End Frameworks, colour scheme, typography. Finally, it goes without saying that any instance of academic dishonesty will be reported.

If you decide to use and modify any existing code, e.g., code found on online or printed sources, or code used during in-class/tutorial examples, you are expected to provide author attribution in your README.txt file providing an explanation of why the piece of code is necessary for your work, where, how and why the code or section of code was modified. You are encouraged to use the README template available on Brightspace, as this is an annotated template meant to guide you in this process. Keep in mind that simply stating “code was modified” does not provide sufficient information required in your programming assignments, the

amount of detail expected in your README file is illustrated in the README template.

Learning Objectives:

1. Judge and apply UI and UX design techniques discussed in class (e.g., use cases, task flow diagrams), while considering the usability of the device used to access your website.
2. Assess the suitability of Front-End APIs and Frameworks for the purpose of developing a high-fidelity prototype application, given a set of proposed guidelines (e.g., wireframes, devices, expected functionality).
3. Become familiar with your group’s Front-End Framework(s) of choice for the purpose of developing a semi-functioning high-fidelity prototype, given a set of proposed guidelines.
4. Learn to collaborate with group members to define your project’s purpose, potential features, user personas, scenarios and sitemaps in order to compile a set of potential guidelines and requirements for your group project.

Requirements:

Part of your Assignment 1 will require for you to work with your group, and part of it will involve individual work done on your own.

For the group work portion of your Assignment 1, you must do the following:

A1.1. Project’s Purpose, Goals and Intended Features

Meet with your group and define your project’s proposed requirements, such as purpose, goals, its intended features (e.g., Profile Management, Permission Management, File Transfer System, Recommender System, Shopping Cart, File Management System), and your target user base.

Note: Think of this assignment as a working draft, a brainstorming opportunity. As
a general guideline, we expect the number of defined features for your project to be equal to ‘Group Members x 2’ (i.e., if your group is made up of 5 members, you are expected to have 10 features). You will be expected to have ~70% of these features
developed by your final report.

A1.2. User Personas and Intended Scenarios

Meet with your group and identify/define the user persona(s) for which you are developing your application. For each user persona, describe their characteristics, and your intended scenario(s). Finally, define the scenarios in which you envision your application being used, ensure your scenarios describe all of the required components usually found in a scenario.

Note: You are expected to provide a full description of your user personas, simply
stating “students” or “professionals” will not meet this requirement. You are encouraged to refer to the corresponding lecture materials (e.g., lecture videos and
slides) for guidance in defining user personas and scenarios.

A1.3. Sitemapping

Meet with your group to create a complete proposed sitemap for your idealized application.

Note: Your sitemap is meant to be developed as a group. Your sitemap must
illustrate the complete information structure of your application, as well as areas were authentication is required. Your sitemap must be properly created using a
sitemaping tool. All images in your assignment must be properly captioned and referenced within the text. You must include the site mapping tool in your
References Section.

A1.4. Use Cases

Work with your group and, have each member of your group, choose at least ONE (1) of the features you defined in A1.1. Define the use cases for each task within the feature(s) you have chosen. Your use cases must clearly define the normal and alternate flow of events, you may use any of the scenarios defined in A1.2 to help you define your use case sequence.

Note: For example, if your scenario is “it is 2am, you are in downtown Halifax and need to call a cab using our application in order to get home”, then your use case would detail the steps required (from a user and system perspective) to call a cab for this particular purpose with the environmental factors expected in that scenario. You may use bullet-point form for this item. It may be wise to draft a list of features with your group mates and assign two features to each member.

For the individual work portion of your Assignment 1, you must do the following:

A1.5. User Experience and Task Flow

Work alone and choose ONE (1) of the features you defined in A1.1, along with their corresponding use cases from A1.4, to create a task flow diagram for each of the tasks in the feature defined in A1.1.

Note: Your task flow diagrams must must be properly created using a diagramming
tool, you must properly reference this tool in your deliverable. All images in your
assignment must be properly captioned and referenced within the text.

A1.6. Lo-Fidelity Prototype

Work alone to create a lo-fidelity prototype, i.e., a wireframe, of ONE (1) of the pages in your proposed application, taking into consideration the specifications you have identified in A1.1, A1.2, A1.3, A1.4 and A1.5. EACH member of your group is expected to submit a different prototype and/or design.

Note: Your lo-fidelity prototype must be properly created using a prototyping or
wireframming tool, you must properly reference this tool in your deliverable. All images you may use in your assignment must also be properly captioned and referenced within the text. You must create a lo-fidelity prototype that reflects the structure and layout (at minimum) of the task and/or feature a given user persona
is able to complete through your chosen page. Ensure you properly caption your
wireframes (e.g., Figure 2. Wireframe applicable to Sign Up page).

A1.7. Semi-Functional Prototype

Work alone to create a semi-functional prototype of the page you chose in A1.6. You may use any front-end framework or languages of your choosing, but do make sure you document your work on your README.txt or README.md file. Your prototype is only meant to be semifunctional is regard to its front-end, therefore, feel free to hard-code or use dummy data were you see fit to simulate any back-end processes.

Note: You may discuss with group members your plans for your A1 submission, but you are
asked NOT to show your actual work in order to ensure that your design does not influence other designs in your group. Keep in mind that EVERY member of your group is expected to submit an entirely different design than yours, though some
commonalities may be OK.
You are encouraged to consider the use of front-end APIs where you see fit.
Further, if you choose to develop a page that includes web forms, you are expected to implement front-end validation techniques that improve the usability of your
prototype.
Finally, though you are tasked with creating ONE (1) page, you are encouraged to
create some or all of the pages involved in a particular task, e.g., if you were to choose the registration page, then your assignment will be expected to include all pages and/or modal boxes needed to allow a new user to complete the registration process. As such, it is possible that your assignment may include more than one
page.

A1.8. The pages you develop must reflect the requirements specified by you in 1.1 through 1.6.

A1.9. You may use Lorem Ipsum text for the content of your pages. Additionally, any forms you include your design must use meaningful labels and messages (e.g., ‘Your message was successfully submitted’).

Note: Though you may use Lorem Ipsum text to help you define the content hierarchy of your submission, it is recommended for you to include meaningful text where possible as it will help you see how your design may compliment the message you are looking to communicate (e.g., headings, navigation links).

A1.10.Your assignment MUST be responsive. However, it is up to you to define the level of responsiveness your assignment should reflect, based on the requirements you specified in this assignment.

A1.11.Your assignment MUST be W3C compliant, i.e., it must pass W3C front-end validations tests (e.g., HTML and CSS).

Note: Failure to submit valid code will result it a possible maximum grade of 50%. If your assignment does not validate due to framework-specific tags or code, these errors will be overlooked (e.g., Angular’s ng-app HTML attribute) and WILL NOT affect your grade. As well, any validation warnings WILL NOT affect your grade.

A1.12.Your assignment MUST apply usable front-end validation and user feedback tech-

niques to validate form fields, and provide proper error recovery messages in case a field does not validate.

Note: Proper user feedback in forms may include the use of AJAX confirmation or success messages, as well as failure messages to the user. Your messages should also take into consideration the security of your application. Of course, what you implement is based on your vision for your project.

A1.13.In regards to the look-and-feel of your assignment, you have complete creative freedom for this assignment. You are encouraged to work towards an aesthetically pleasing website that applies the design and development principles discussed in class. You may use Creative Commons images and/or logos with proper author attribution (provided through code comments, and/or README.txt file).

Note: Do keep in mind that as part of this assignment, you are expected to work individually on a specific design. You may, if agreed by your group, use the same HTML structure for your A1 submission. However, you CANNOT ‘share’ any CSS code.

A1.14.Make sure to include in your README.txt file, the URL from which your assignment can be accessed. All pages you develop for this assignment will need to be accessible through that link, otherwise, you may include the links to all individual pages.

Note: If you decide to use and modify any existing code, e.g., code found on online or printed sources or code used during in-class/tutorial examples, you are expected to provide author attribution in your code comments, along with a README.txt file providing an explanation of why the piece of code is necessary for your work, where, how and why the code or section of code was modified. Keep in mind that simply stating “code was modified” does not provide sufficient information required in your pro-

gramming assignments.