Project 3

Project 3 is an individual project which contains the following two items.

One redesigned website containing three pages.
Self-evaluation of your work.

Digital Badge

Web Accessibility Fundamentals Badge

Remember, you can earn the Web Accessibility Fundamentals digital badge in this unit.
This will look great on everyone's resume!

Project Overview

You're Hired!

You have been hired as a web developer and UX/UI designer to build a website for Westfield, a small township in Wisconsin. They need a website for a community garden project called Willow Gardens.

Westfield has extra land and a desire to share it with the entire community. So, they have decided to it to build a community garden. Anybody in the township can rent a small plot of land for gardening during the summer months.

Westfield needs a website for the community to learn about Willow Gardens, rent a garden plot, and learn about gardening. They tried building the website on their own but quickly realized they needed help!

Your Job

Take what you've learned from each unit and redesign and code a website for Willow Gardens. You must create the HTML and CSS (no JavaScript or back-end coding required) for at least three web pages.

Westfield has provided you with the code they created, but they would like a new look. They are open to any design direction, but they want it to be easy to use and accessible to all members of their community. Westfield has already identified two user personas to guide your design process.

The current text on the website can be re-written or moved to different pages. Westfield has started three pages but is open to more pages if you feel it's necessary.

Downloads

Willow Gardens Website

Patrcia Tamm Persona

Marco Reyes Persona

The following three pages must be redesigned and coded in HTML and CSS. More web pages can be added if you deem it necessary, but it's not required. Current text can be moved, changed, or removed if appropriate for your design.

Homepage
Buy a Plot page
Gardening Tips page

No pages need to be responsive.

No JavaScript or back-end coding required.

5 Tips for Success

Start immediately on this project. Work on it a little bit each week.
Create a weekly plan to tackle this project. I provided weekly checklists for Project 1 and 2. If those were helpful, I suggest creating one for Project 3. Share your weekly plans with me during the Blackboard check-ins.
Make sure to keep your design choices within your coding ability! I will be grading you based on conformity to the below specifications and your ability to make sound decisions that improve the usability and accessibility of the website. It's in your best interest to keep things simple!
Although wireframes are not required for this project, I suggest creating rough sketches first. Perhaps a mood board? It's an excellent way to brainstorm ideas and quickly make changes without worrying about fixing coding issues.
Ask for feedback! I provide opportunities each week in Blackboard where you can ask me for feedback.

Website Criteria

Potential User Satisfaction

The website reduces user frustrations identified in the provided user personas.
The website considers the user’s mental model by using language, imagery, and standards for that user group.
The website creates a clear and understandable process for the user to meet their goal(s).

Code Validation

Coded pages must pass the HTML validator.
Coded pages must pass the Axe validator.

General Accessibility

Each page title is unique and meaningful.
The page language is specified.
Landmarks, links, and buttons are used appropriately.
Headings are used correctly.
The title element and meta description element are all unique.

The main navigation is accessible by keyboard and uses ARIA attributes where and if appropriate.
The current page is indicated visually and to a screen reader in the main navigation.
A skip to main content link is on each HTML document.
The tab order is logical.

HTML Form

Labels and form fields are explicitly coded, accessible, and descriptive.
Required fields are visible and coded within the HTML markup.
Form information and help text is located appropriately and accessible for screen readers.
Radio buttons, checkboxes, and select lists are grouped with HTML.
ARIA attributes are used correctly when appropriate.

Aesthetics

Only important or relevant information is presented on each page.
A clear call-to-action is available on the homepage.
Design conventions are used when appropriate.
A clean, visually scannable, and organized layout is employed on each page.

Color

All text and background pass AA ratios. Text on gradients or images must be manually tested for AA contrast ratios.
Color choices enforce website brand and mood.
Color communicates interaction.
Color is used consistently.

Typography

Text is used to communicate the hierarchy of content.
Font size, width, and line-height are appropriate and legible.
- For checking line width: Use the Character Count plugin for the browser!
Text size, width, and line-height is consistent.
Links are self-evident.

Imagery & Icons

All images serve a purpose.
Imagery (including backgrounds) do not distract from the content or main purpose of the page.
Alternative text is descriptive or left empty when appropriate.
Icons are universally recognizable or have labels, and are accessible to screen readers if required for usability.

Self Evaluation

You will be evaluating your compliance with each of the above website criteria in Figma. A new Figma file called Project 3 Evaluation will be shared with you. Thoughtful and honest reflection is required.

Submission

Compress (zip) the entire Project 3 website and upload it to the Blackboard submission link.
In the comments box, paste the link to your PROJECT 3 - Self Evaluation.
Click Submit.

Grading Criteria

Points Possible: 40