C773 User Interface Design Project Final (2 Parts)

Final Project for Western Governors University class “User Interface Design”

Task (Part 1):

You were recently hired as a UI/UX Designer for Synesthor, an IT services company that offers on-site consultation for small businesses without an IT department. Synesthor recently contracted with Paradigm Pet Professionals, a company that specializes in providing virtual consultations to pet owners with state-of-the-art, evidence-based health and well-being information. Its website was designed by a part-time intern 10 years ago. Most people who visit the website are prospective and new pet owners located in the United States who seek information about basic pet care and are interested in speaking with a consultant. Paradigm Pet Professionals contracted with Synesthor’s UI/UX department to develop a responsive website to meet the needs of its company and the needs of users.

Your first task is to evaluate the existing website and user design specifications provided by Paradigm Pet Professionals (see Web Links and Supporting Documents sections). You will also develop a sitemap, wireframe, and maintenance plan for the redeveloped website.

Requirements (Part 1):

A. Using the attached “Paradigm Pet Professional UI Design Specifications” and existing “Paradigm Pet Professionals Website” from the Web Links section, compare the content, functionality, and navigation of the current website to user specifications and evaluate audience and stakeholders needs by doing the following:

1. Describe how the current website content fails to meet audience and stakeholder needs.
2. Describe how the current website functionality fails to meet audience and stakeholder needs.
3. Describe how the current navigation system fails to meet audience and stakeholder needs.

B. Determine the information architecture for the new website based on the attached “Paradigm Pet Professional UI Design Specifications” by doing the following:

1. Explain the necessary website functionality and micro interactions needed to meet audience and stakeholder needs.
2. Describe the type of content that will be used for one new page based on one of the new user personas, including how the elements of the content align directly to the chosen user persona.
3. Identify existing content from the website that will be removed or redeveloped and explain how that content fails to meet the proposed audience and stakeholder needs.
4. Create a visual sitemap to determine the structure and the hierarchy of the site content, including the following:
   • a home page
   • a page for each existing pet page
   • a new page for the new user persona you identified in part B2

Note: You can use any tool to create the sitemap, such as graphic creation or manipulation software, presentation software, word processing software, or another tool of your choice. The sitemap must be submitted as an image embedded within your document.

5. Explain how your information architecture meets audience and stakeholder needs.
6. Explain the primary and secondary navigational elements required to support the information architecture.a. Explain how these primary and secondary navigational elements each align with audience and stakeholder needs.

C. Determine page layout by creating a mid-fidelity wireframe for the home page that is sized for a desktop website that includes each of the following:

• site header, including the branding elements
• site footer
• primary and secondary navigational elements
• placeholder text and placeholder images
• specific components needed to support the information architecture (e.g., buttons, links, form fields, search bar)

Note: You can use any tool to create the wireframe, such as graphic creation or manipulation software, presentation software, word processing software, or another tool of your choice. The wireframe must be submitted as an image embedded within your document.

D. Develop a detailed maintenance plan for the responsive website that aligns with stakeholder needs outlined in the attached “Paradigm Pet Professional UI Design Specifications,” include one maintenance task for each of the following:

• efforts to ensure universal accessibility to all site content
• the relationship between written content and SEO
• tasks required to properly maintain the website
• plan for rendering the website on desktop and mobile devices
• SEO strategies for mobile devices

E. Demonstrate professional communication in the content and presentation of your submission.

Task (Part 2):

You were recently hired as a UI/UX Designer for Synesthor, an IT services company that offers on-site consultation for small businesses without an IT department. Synesthor recently contracted with Paradigm Pet Professionals, a company that specializes in providing virtual consultations with pet owners based on state-of-the-art, evidence-based health and well-being information. Its website was designed by a part-time intern 10 years ago. Most people who visit the website are prospective and new pet owners located in the United States who seek information about basic pet care and are interested in speaking with a consultant. Paradigm Pet Professionals contracted with Synesthor’s UI/UX department to develop a responsive website to meet the needs of its company and its existing and potential users.

Having completed your evaluation of the existing “Paradigm Pet Professionals Website” in Task 1, you will now create an interactive desktop prototype of the redeveloped website according to the design specifications provided by Paradigm Pet Professionals.

Requirements (Part 2):

A. Create an interactive desktop prototype based on the audience and stakeholder needs using the attached “Paradigm Pet Professional UI Design Specifications” by doing the following:

1. Include each of the redeveloped “Home,” “Dog Owners,” and “Cat Owners” design prototypes, using content for each corresponding persona from the attached “Paradigm Pet Professionals UI Design Specifications.”
2. Include one new design prototype based on one of the new user personas, including the content provided and the format specified in the attached “Paradigm Pet Professionals UI Design Specifications.”
3. Include a contact form that users can complete to request a virtual consultation with a pet professional that includes all the required fields specified in the attached “Paradigm Pet Professionals UI Design Specifications.”

Note: Your prototype should show the fields that will appear on your contact form, but the contact form does not need to be functional.

4. Include primary and secondary navigation elements as well as positional awareness techniques that provide the ability to clearly identify where each page is located within the overall information architecture and that allow users to navigate and interact between all sections of the website.

B. Provide a .pptx file or compressed .html file of your interactive desktop prototype, including the following:

• the updated “Home,” “Dog Owners,” and “Cat Owners” design prototypes
• the new design prototype
• the virtual consultation form

Note: You can use any tool to create the design prototypes, such as a graphic creation/manipulation software, webpage creation software, presentation software or another tool of your choice.

C. Demonstrate professional communication in the content and presentation of your submission.

Overall Course Competencies:

User Interface Design Projects

• The graduate describes user interface design project constructs.

User Interface Design Process

• The graduate describes the user interface design process.

User Centered Web Design

• The graduate explains the relationship between the user and the site design.

User Interface Design Principles

• The graduate explains user interface design principles.

Color, Typography, Layout, Wireframing

• The graduate builds a web page wireframe.

Designing a Basic Web Page User Interface

• The graduate creates multiple web pages, using best practices in design technique.

Website Navigation Concepts

• The graduate creates a navigation hierarchy for a website.

Designing an Interactive Web Page User Interface

• The graduate analyzes best practices in designing interactive elements of User Interfaces.

Website Maintenance and Search Engine Optimization Strategies

• The graduate explains the best practice strategies for maintaining websites, including Search Engine Optimization.