Architecture, Design and Planning DESIGN BRIEF DECO1016: Web Design and Technologies Semester 2, 2019 | 6 credit points This document contains the detailed assessment guidelines for DECO1016 Web Design and Technologies. It is the official version of the assessment, describing the aims, tasks and deliverables for each assessment item, together with expected workload, due dates, submission instructions, assessment criteria and accompanying grade descriptors for standards-based assessment. Any clarifications to the assessment will be posted on the eLearning site (canvas.sydney.edu.au) during semester. 1. Design Brief Your brief this semester is to design an onboarding experience for an online service, you will need to propose and develop a prototype user flow through a sign up process for any of the common online services such as: banking, superannuation, rewards program or discuss with your tutors about any other ideas you have. At mimumum you’ll be required to create a: • Landing Page • Signup Page • Membership Endpoint Page The main focus of this brief is on the user journey of the form flow, placing emphasis on ease of use, keeping the onboarding experience intuitive for users. The user flow should have a clear affordance and should be easy to navigate. 2. Assessment Tasks Overview The subject is divided into three assessment tasks as described in the table below. The three assessment tasks represent your entire unit of study mark. Assessment Item Deliverables Weight Due Assessment Criteria A1: Creative Coding Challenge Create a challenge for CCC’s in creative coding challenge. 15% Wednesday August 21th, 23:59 Listed Below A2: In-Class Quiz This quiz will be taken in-class and is based on tutorials 1-6. 20% Tuesday September 17th, In-class Listed Below A3: Web Design Proposal Submit a design report outline your proposal through a series of designs, including wireframes and mockups. 15% Wednesday October 9th 23:59 Listed Below A4: Web Prototype Implement your interactive prototype using HTML, CSS and JavaScript. 50% Friday November 8th, 23:59 Listed Below NOTE: The weight represented here is proportional to the total assessment weight for this unit of study. For example, a weight of 30% means that this assessment component contributes 30% of the total mark for this unit of study. Architecture, Design and Planning Assessment Results and Feedback Assessment results and feedback will be provided within 2 weeks of the submission date. Assessment Policies and Procedures For assessment policies and procedures, including academic integrity, late submissions, and special consideration, see the unit of study outline. 3. Assessment Task Descriptions A1: Creative Coding Challenge (15%, individual, 7.5 hours) In this assessment, you will be designing an online learning exercise to be taught to Design Programming students. Your “creative coding challenge” should be a short, interactive tutorial on a JavaScript topic of your choosing. Your challenge should explore a topic that you felt would have been helpful in your learning during the course, while also considering the educational experience of future students. A template for your challenge will be provided, which you will populate with tutorial content and functional code snippets. Task Deliverable T1. Generate a challenge for the CCCs website on a topic that you feel could have been helpful during semester Submit a zipped folder with your submission Expected workload: Students are expected to spend approximately 7.5 hours working on this assignment. This is calculated by the percentage assessment weighting of the minimum hours of student effort outside of face- to-face classes. This is only provided as a guide; each individual student may spend more or less time, depending on their study preferences and learning ability. A2: In Class Quiz (20%, individual, 2 hours) The objective of the in-class quiz is to test your knowledge and understanding of topics related to Web Design and Technologies. Students will have two hours to complete a series of technical multiple choice and longform technical challenges which will be based on all learning material from tutorials 1-6. The quiz will be offline, but students will be able to access web reference guides (W3 Schools and Mozilla Developer Network) which contains example code and function descriptions. Task Deliverable T1. Answer a series of multiple choice and longform technical questions on canvas. Complete series of questions in class. Expected workload: Students are expected to spend approximately 21 hours preparing for this quiz. This is calculated by the percentage assessment weighting of the minimum hours of student effort outside of face-to- face classes. This is only provided as a guide; each individual student may spend more or less time, depending on their study preferences and learning ability. Architecture, Design and Planning A3: Web Design Proposal (15%, individual, 17.5 hours) In this assessment task you will develop a web design proposal, presenting a design solution to the given brief. The proposal should be a document displaying your concept through a series of wireframes and mockups, which have been created using appropriate prototyping tools. In the proposal document you should use annotations to highlight user flows and interactions with your solution, as well as your design research and design decisions. Possible structure for your design proposal report includes the following: User Research • Background Research • User profiles Ideation • Annotated Sketches Designs • Low Fidelity Wireframes • Basic Style guide (Color, Typography, etc) Proposed User Flow • Annotated mockups with user flow • Reflection on design decsions Report should be limited to 15 pages not including any appendix content Task Deliverable T1. Conduct background research on existing onboarding flows for other online services. Identify two key user profiles to base these design decisions on. Annotated screenshots with design critiques of cited examples and design patterns that demonstrate effective user experience backed up with intuitive user interfaces. T2. Generate sketches to show various ideas for stages of your proposed onboarding process. Multiple iterations of ideation should be shown via simple low fidelity sketches highlighting proposed user flow from landing to membership endpoint pages. T3. Refine sketches into wireframes with basic design, highlighting the structure of your layout. Exports of wireframes showing a clear user flow with minimal aesthetic design decisions made. T4. Create medium fidelity mockups with applied styles based on branding decisions (color, type, imagery) Present your medium fidelity mockups with an annotated userflow which shows the results of your design process with design decision justified. Expected workload: Students are expected to spend approximately 17.5 hours working on this assignment. This is calculated by the percentage assessment weighting of the minimum hours of student effort outside of face-to-face classes. This is only provided as a guide; each individual student may spend more or less time, depending on their study preferences and learning ability. Architecture, Design and Planning A4: Web Prototype (50%, individual, 35 hours) In the final assessment task, you will implement your proposal as an interactive web prototype using the techniques and technologies introduced in the tutorials. The prototype should take the form of a published website front end, i.e. it should demonstrate the entire user interface of your web application but does not have to be technically fully functional (for example you are not expected to write data into a database). You are also required to submit a design report that contains screenshots of your web prototype and further reflections on any design changes and iterations you have mad
e based on feedback. Project Scope You will design and develop a web-based onboarding that satisfies the following conditions: • It should be interactive. Simply presenting information as static pages full of words and pictures is not sufficient. Consider incorporating JavaScript functionality such as form validation and CSS styling such as animations and transitions. • It should consist of at least three substantial pages (possibly more), connected together to form an onboarding experience. • The website must be designed for both mobile and desktop devices. • You will be assessed on your technical competence of HTML, CSS and JavaScript, so while you may use other technologies they will not contribute to the technical component of your marks. Task Deliverable T1. Develop a prototype implementing the proposed design from the previous assessment. Should be developed using HTML, CSS, JavaScript and run on GitHub pages. A GitHub repository link and GitHub pages link. T2. Generate a design report highlighting the design patterns used in your web prototype and as well as any iterations made to the design beyond the proposal. The user flow should be outlined clearly in this report with annotations. A pdf report with screenshots and annotations of your website. Submission: You will be submitting a GitHub repository link on canvas and publishing your assignment on GitHub pages. You will be taught how to do this during semester. As well as a.PDF containing your design report with annotated screenshot outlining your user flow and design implementation. The .PDF should be named using the unit of study code, assessment number and your unikey, for example “DECO1016_A4_lbra1234.pdf”. Report should be limited to 10 pages not including any appendix content References: You need to cite any references used in your research, including images. Make use of one specific referencing style consistently throughout your report and list your references in a correctly formatted bibliography at the end of your document. We recommend using APA (American Psychological Association) referencing guidelines. Examples and guidelines can be found on http://www.citethisforme.com/guides/apa or http://libguides.library.usyd.edu.au/c.php?g=508212&p=3476096 Architecture, Design and Planning Expected workload: Students are expected to spend approximately 35 hours working on this assignment. This is calculated by the percentage assessment weighting of the minimum hours of student effort outside of face- to-face classes. This is only provided as a guide; each individual student may spend more or less time, depending on their study preferences and learning ability. Architecture, Design and Planning 4. Assessment Rubrics Task 1: Creative Coding Challenge The following criteria will be used for assessing your submissions for this component of the assessment. HD D CR P F Application of information architecture and design principles Content is extremely well presented, with excellent application of design principles and information architecture. Content is neatly presented, with appropriate application of design principles and information architecture. Content is presented, with consistent application of design principles and information architecture. Content is presented, with some application of design principles or information architecture. Content is illegible, or unrelated. No application of design principles or information architecture is evident. Clarity of educational content and relevance to the given design brief. Submission demonstrates an outstanding and complete understanding of the design brief, with a clear and enjoyable educational experience. Submission demonstrates a complex and proficient understanding of the design brief, with a clear educational experience. Submission demonstrates a reasonable understanding of the design brief, providing an interesting educational experience. Submission demonstrates some understanding of the design brief, with a coherent educational experience. Submission demonstrates no understanding of the design brief, with no educational experience provided. Quality of code implemented within the given template. Implemented code shows a complete understanding of the relevant JavaScript elements. Implemented code shows a proficient understanding of the relevant JavaScript elements. Implemented code shows a good understanding of the relevant JavaScript elements. Implemented code shows some understanding of the relevant JavaScript elements. Implemented code shows little to no understanding of the relevant JavaScript elements. Architecture, Design and Planning Task 3: Web Design Proposal The following criteria will be used for assessing your submissions for this component of the assessment. HD D CR P F Application of design principles for visual design, navigation design, layout, and interaction design Design Proposal shows a deep understanding of information architecture and design principles. Relevant and fitting design patterns are applied to the content. Design Proposal shows a strong understanding of information architecture and design principles. Appropriate design patterns are applied to the content. Design Proposal shows a solid understanding of information architecture and design principles. Some design patterns are applied to the content. Design Proposal shows a basic understanding of information architecture and design principles. Basic informational hierarchy is visible in the content. Design Proposal shows no understanding of information architecture and design principles. Appropriate use of graphics/prototyping tools to communicate your proposed design. Design Proposal shows deep exploration and iteration through multiple levels of fidelity, along with evidence of further self- reflection. Design Proposal shows exploration and iteration through multiple levels of fidelity. Design Proposal shows some exploration and iteration. Design Proposal shows minimal exploration or iteration. Design Proposal shows no exploration or iteration. Quality of Proposal submission, including design choices and evident of self-reflection. Beautifully presented report showing wireframes and mockups, along with explanations and evidence of how iteration was performed, as well as self-reflection. Well-presented report showing wireframes and mockups, along with explanations and evidence of how iteration was performed. Report showing wireframes and mockups, along with explanations. Basic report showing wireframes and mockups. Report does not clearly show wireframes or mockups. Architecture, Design and Planning Task 4: Web Design Proposal The following criteria will be used for assessing your submissions for this component of the assessment. HD D CR P F Appropriate and correct use of Web technologies Demonstrates complete and deep understanding of Web technologies that are appropriate for the solution. No superfluous, ‘flashy’ or unnecessary demonstrations of the technology. Demonstrates complete and deep understanding of Web technologies that are appropriate for the solution. No superfluous, ‘flashy’ or unnecessary demonstrations of the technology. Demonstrates complete and deep understanding of Web technologies that are appropriate for the solution. No superfluous, ‘flashy’ or unnecessary demonstrations of the technology. Demonstrates complete and deep understanding of Web technologies that are appropriate for the solution. No superfluous, ‘flashy’ or unnecessary demonstrations of the technology. Demonstrates complete and deep understanding of Web technologies that are appropriate for the solution. No superfluous, ‘flashy’ or unnecessary demonstrations of the technology. Quality of Implemented Code Outstanding and elegant codebase that fulfils the full functi
on of the prototype developed to a professional standard. Excellent quality code that fulfils the full function of the prototype in an interesting and solid implementation and a good demonstration of semantical correctness. Good quality code that fulfils the full function of the prototype with a basic understanding of semantical correctness. Poor quality and difficult to read code that fulfils the basic function of the prototype. Some parts of the prototype may not work. Poor, unreadable or plagiarised code. Breadth and clarity of onboarding experience and relevance to the given design brief Web Prototype expands on the proposed response to the design brief. All interactions and user flows implemented from design proposal, with added iteration and functionality. Web Prototype remains true to the proposed response to the design brief. All interactions and user flows implemented from design proposal. Web Prototype remains true to the proposed response to the design brief. Most interactions and user flows implemented from design proposal. Web prototype somewhat reflects the design proposal. Some interactions and user flows implemented from design proposal. Web prototype is completely different and in no way resembles the design proposal. Evidence of design iteration and exploration Web Prototype shows deep exploration and iteration through multiple levels of fidelity, along with evidence of further self- reflection and refinement. Design Proposal shows exploration and iteration through multiple levels of fidelity. Design Proposal shows some exploration and iteration. Design Proposal shows minimal exploration or iteration. Design Proposal shows no exploration or iteration. Quality of report submission to communicate design process Beautifully presented report showcasing web prototype, along with explanations and evidence of how iteration was performed, as well as self-reflection. Well-presented report showcasing web prototype, along with explanations and evidence of how iteration was performed. Report showcasing web prototype, along with explanations. Basic report showcasing web prototyping. Report does not clearly show web prototype. Architecture, Design and Planning 5. Learning and Teaching Policies The School of Architecture, Design and Planning’s Learning and Teaching policies (including plagiarism, late submission, special consideration etc) are available from the following websites: https://sydney.edu.au/handbooks/architecture/rules/faculty_resolutions.shtml http://sydney.edu.au/students/academic-dishonesty-and-plagiarism.html http://sydney.edu.au/students/special-consideration-and-arrangements.html It is your responsibility to familiarise yourself with these policies. The University of Sydney takes alleged cases of plagiarism very seriously. For further details please refer to the unit of study outline.
