Assignment Information 5/25/24, 9:54 AM GRA 470 Milestone Two Guidelines and Rubric Overview This second milestone assignment builds on the problem statement and competitive research that you completed in Module Two. In this assignment, you will again review the scenario below and complete the next deliverable for instructor feedback. Be sure to incorporate any feedback that you receive into your project (due in Module Seven). Scenario You work as a lead designer at a website design agency called User Centrix Services. Your manager has asked you to come to the aid of a novice designer who is facing challenges with their first website design project. The project is in its third week of development, and the designer is struggling to meet the client's expectations. The novice designer has tested the initial wireframes and received negative feedback, but they are unsure about how to remediate the issues. You have already evaluated the novice designer's work and defined the problem, as well as conducted competitive research. Based on your previous work, you will now create your own proposals for addressing the problem. Specifically, you will create two high-fidelity mock-ups of the website landing page-one for desktop and one for mobile-using Adobe XD. Directions In this assignment, you will create two high-fidelity mock-ups (desktop and mobile) using Adobe XD and submit each as PNG files. These should be polished in their design but do not need to be interactive. Be sure to apply what you have learned about creating a coherent and seamless user experience across the devices. Note that the instructions below apply to both designs except for step #4. Step #4 specifies how the mobile design should be different from the desktop design. See the Supporting Materials section below to review the full package of existing project materials, including a client brief, wireframes, and feedback from users. Specifically, you must address the following rubric criteria: 1. Create desktop and mobile mock-ups of the website landing page that include all the features stipulated in the client brief, including: A. Service Offerings B. Financial calculator C. Appointment scheduler D. Recent blog posts E. Testimonials 2. Include the following visual design elements and principles in your designs: line, shape, space, emphasis, balance, alignment, contrast, repetition, hierarchy, scale, proximity, and Gestalt. 3. Apply at least five of the following user experience principles in your designs: A. User-centricity: Is the design user-centered? Does it solve the user problems and put user needs first? B. Consistency: Does the design maintain consistency? Does it keep the look, function, and interaction consistent across the experience? C. Hierarchy: Does the design utilize hierarchy? Is the content organized and presented in order of importance? D. Context: Does the design fit well within the context of its environment? Does it take into consideration who the users are, what they know, where they are in the experience, and how they are accessing the experience? E. Efficient: Is the design efficient? Is it "keeping it super simple" (KISS)? F. Cognitive Load: Does the design have a low cognitive load? Is the amount of information users need to process too much? 4. Differentiate your mock-ups to be appropriate for desktop and mobile user experiences. Be sure to address at least five of the following mobile usability standards in your mobile design: A. Increased size of touch targets (Fitt's law) B. Increased size of the spacing between elements to prevent errors C. Designing for an ecosystem (if users move from desktop to mobile, can they still accomplish the intended goal?) D. Designing for a coherent experience (if users move between devices, is there a major learning curve?) E. Organizing and prioritizing content by key tasks first F. Cutting any filler content ("when in doubt, leave it out") 5. Apply at least eight of the accessibility standards from the provided checklist to both of your mock-ups. See the Supporting Materials for the accessibility checklist. https://learn.snhu.edu/content/enforced/1611266-GRA-470-13456.202...lestone_Two_Guidelines_and_Rubric.html?ou=1611266&d21_body_type=3 Page 1 of 3 Assignment Information What to Submit Submit your desktop and mobile mock-ups as PNG files for grading. See the Supporting Materials for a tutorial on exporting PNG files in Adobe XD. Supporting Materials The following resources support your work on this assignment: Resource: GRA 470 Project Client Files This zip file includes all of the existing project materials that you need to evaluate for the novice designer. Download and unzip the following folder and files: • GRA 470 FutureFunds Logos GRA 470 FutureFunds Client Brief • GRA 470 FutureFunds User Feedback GRA 470 FutureFunds Wireframes 5/25/24, 9:54 AM Resource: GRA 470 Project Accessibility Checklist This checklist lists the accessibility standards that should be applied to your desktop and mobile mock-ups. Note that the 11 standards are identified by check boxes for the purposes of this assignment. Tutorial: Export Design Assets This resource from Adobe explains how to export your mock-ups into PNG files. Criteria Client Brief Features Exemplary (100%) Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner Visual Design Elements and Principles Exceeds proficiency in an User Experience Principles Differentiate for Desktop and Mobile exceptionally clear, insightful, sophisticated, or creative manner Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner Milestone Two Rubric Proficient (85%) Creates desktop and mobile mock-ups of the website landing page that include all the features stipulated in the client brief Includes all the listed visual design elements and principles in the designs Applies at least five of the listed user experience principles in the designs Differentiates the mock-ups to be appropriate for desktop and mobile user experiences by addressing at least five of the listed standards in the mobile design Needs Improvement (55%) Not Evident (0%) Value Does not attempt criterion 15 Shows progress toward proficiency, but with errors or omissions; areas for improvement may include adding service offerings, a financial calculator, an appointment scheduler, recent blog posts, or testimonials Shows progress toward proficiency, but with errors or omissions; areas for improvement may include line, shape, space, emphasis, balance, alignment, contrast, repetition, hierarchy, scale, proximity, or Gestalt Shows progress toward proficiency, but with errors or omissions; areas for improvement may include user- centricity, consistency, hierarchy, context, efficiency, or cognitive load Shows progress toward proficiency, but with errors or omissions; areas for improvement may include increasing touch size or spacing, designing for an ecosystem or a coherent experience, prioritizing content by key tasks first, or cutting filler Does not attempt criterion 10 Does not attempt criterion 35 Does not attempt criterion 20 https://learn.snhu.edu/content/enforced/1611266-GRA-470-13456.202...lestone_Two_Guidelines_and_Rubric.html?ou=1611266&d21_body_type=3 Page 2 of 3 Assignment Information Accessibility Standards Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner Applies at least eight of the accessibility standards in the provided checklist to the designs Shows progress toward proficiency, but with errors or omissions; areas for improvement may include addressing at least eight of the elements of the checklist Does not attempt criterion 5/25/24, 9:54 AM 20 Total: 100% https://learn.snhu.edu/content/enforced/1611266-GRA-470-13456.202...lestone_Two_Guidelines_and_Rubric.html?ou=1611266&d21_body_type=3 Page 3 of 3