Assignment Prompt & Instructions
## **Assignment Overview**
In this assignment, you will use the work you completed thus far in Weeks 1 through 4 to create a prototype with mock-ups of what the pages will look like and create connections between them to illustrate user task flow. You will not be doing any coding.
## **Assignment Preparation**
– Reference the use case diagram and ERD from Week 3 for this assignment.
– Consider and select colors and fonts, as well as other images or graphic resources you may need for your prototype.
– Research and apply best practices to adhere to the user's cultural and diverse factors.
## **Assignment Instructions**
Once you have completed your preparation, you will create your prototype and design justification per the instructions below.
### **Prototype**
Build a prototype that suits the goals and expectations of its users. This should be an adaptation of the wireframe that you submitted in Week 3. Your prototype should provide the look and feel of your user experience, with all of the following demonstrated:
– Incorporate accessibility factors into the design of your interface.
– Develop a flow that allows users to achieve their goals efficiently.
– Build navigation and controls that users would find intuitive.
– Adhere to best design principles for layout and style.
Your prototype should provide the look and feel of your user experience, with all of the following illustrated:
– Color.
– Font styles and sizes.
– User controls.
– Use of text or instructions.
– Navigation controls.
– The actual design layout of each page.
### **Design Strategies**
Review your ideas about your project through the lens of human brain operations and the weekly readings.
– Consider design strategies that address human recognition and recall, support user activities, and facilitate learning.
– How are you designing your system user interface based on these human factors?
– What design strategies and features will you implement in your final prototype as a result of the readings and discussion?
– Include how you would modify the design of this interface for a mobile device such as a smartphone or tablet.
**Choosing a Tool to Create Web Pages**
– You may use any tool available to you to build the prototype web pages as long as it will allow you to create one web page per file in one of the following formats: .sketch, .psd, .pdf, .png, .jpg, .gif, or .png. Note that this means you could also draw your screen or page by hand, and take a clear photo of it to generate a .jpg file. However, it will be difficult for you to add color, fonts, images, et cetera, if you use this approach. Possible tools include Paint, PowerPoint, Word, Adobe Illustrator, Visual Studio, Visio, et cetera. You may also use other prototyping tools that are available as open source or via free trial downloads. The only requirement is that you copy and paste the images of the wireframes in Section 4, User Interface Design, of the [Software Development Plan (SDP) Template [DOCX]](https://courseroom.capella.edu/courses/68375/files/13491101?wrap=1 "cf_sdp_template.docx") [Download Software Development Plan (SDP) Template [DOCX]](https://courseroom.capella.edu/courses/68375/files/13491101/download?download_frd=1).
**Using Moqups to Build Your Prototype**
– It is recommended for you to use [Moqups](https://capella.alma.exlibrisgroup.com/leganto/public/01CAPELLA_INST/citation/3155330610006731?auth=SAML) to build your prototype in this assignment. Moqups offers a free account that will allow you to upload your screen or page files and link them together to mimic user tasks. Visit Moqups.com and sign up for a free account. However, there are many other great design tools that you may choose to make use of instead for mock up purposes. If you choose to use another tool, the tool must have a share link to your prototype available.
– **Please note: Moqups may ask for an email address or a phone number.** Promotional emails from Moqups representatives are likely to arrive in the email account you provide. You may wish to choose carefully what you share with Moqups, if you would like to avoid being contacted by their representatives.
– View any tutorial materials from Moqups and ask your instructor any questions. Create the hotspots as well as the links between screens. Then test your prototype by beginning with the start screen and going through the user tasks involved in the processes for your system.
– After you have completed your prototype and reviewed it carefully, from the Prototype view in Moqups, click the green Share icon and then click **Public Share Link** that appears in the gray bar at the bottom of the dialog box that opens. Copy and paste the URL to your prototype in a document that will contain your design justification (see Section 4 of the [Software Development Plan (SDP) Template [DOCX]](https://courseroom.capella.edu/courses/68375/files/13491101?wrap=1 "cf_sdp_template.docx") [Download Software Development Plan (SDP) Template [DOCX]](https://courseroom.capella.edu/courses/68375/files/13491101/download?download_frd=1)).
Within Moqups, create a public share link to your prototype and paste that in the SDP template as well as screen shots of all screens in your model. Detailed directions are in Section 4: User Interface Design.
### **Wireframe and Flow Between Wireframes**
Design a series of wireframes to support your users in their tasks as they navigate this system. Include a simple skeletal sketch of each screen or page, with the location of the following items clearly labeled:
– Navigation controls and links.
– Images.
– Text areas.
– Headings and subheadings, as applicable.
– Headers and footers that will appear on each page, as applicable.
– Other information display areas, as applicable.
Please note that you will not be including content—the wireframe is just the layout or skeletal view of a screen or page. You will need to consider how each screen or page will support the completion of user tasks in the task flow you have created and ensure that the wireframe contains the needed elements.
You should have one wireframe that serves as a template for all the other wireframes. It is a common system design practice to create one master page and then base all the other pages or screens on it. You may have more, depending on how you design your task flow.
After you have created the master template, copy and paste it into Section 4: User Interface Design along with the five screens created in the second part of this assignment.
Refer to the Design the User Interface Rubric to ensure that you meet the grading criteria for this assignment.
## **Submission Requirements**
– **Deliverables:** Submit the SDP with Section 4.2 System Prototype completed.
– **Writing:** Write with few spelling, grammatical, or mechanical errors.
– **Number of Sources:** Include at least two references from articles, books, or websites to support your claims and decision.
– **Reference Format:** Follow APA style and formatting guidelines for resources and citations. Refer to [Evidence and APA](https://lat.strategiced.com/redirect?linkid=1540) for guidance.
## **Competencies Measured**
By successfully completing this assignment, you will demonstrate your proficiency in the following course competencies and rubric criteria:
– Competency 1: Analyze the human factors of a system that impact a robust user experience.
– Incorporate accessibility factors into the design of an interface prototype.
– Develop a flow that allows users to achieve their goal efficiently.
– Build an interface prototype with navigation and controls that users would find intuitive.
– Competency 2: Apply design strategies for effectively increasing user engagement.
– Build an interface prototype that adheres to best design principles for layout and style.
– Competency 6: Communicate effectively using professional standards embracing diversity, equity, and inclusion.
– Communicate according to assigned requirements for format and clarity.