Janell Carpenter

For my last school project, I will be redesigning the website – Point of Grace Church of the Nazarene.

After looking over the current site I discovered these key design issues:

• Has no branding (Logo)
• The template being used is table based.
• Images are warped and misshapen on larger screen resolutions.
• Does not pass W3C validation.
• Uses some deprecated features.
• Does not contain meta tags.
• Images do not contain alt text.
• Some embedded styles.
• Does not pass Section 508 or WAI validation.

Goals for redesign:

• Separate presentation from design using CSS.
• Create a Logo.
• Optimize images.
• Design for usability and accessibility.
• Use W3C standards.
• Pass Section 508 and WAI standards.

First, I developed a wireframe, site diagram,  a few personas, and a prototype, then I began the redesign process. Click to view my Workflow process.

Next, I performed a usability test with classmate, Angela Laboda. She liked the redesign and felt it had good navigation and was easy to use. She suggested one change with a background image I was using for the sidebar and together we came up with a better look.

My last task was to pitch my project, and sell my idea to my client – aka Mrs.Sooter. I felt pretty confident and prepared, but this was a brand new thing to me. My strategy was to try and relate to her, be myself, and simply explain the process. “Websites are like hairdo’s and clothes”, I said. “They get old, outdated and need to get a makeover now and then!” My weakness, however, was that I failed to mention how much this would cost her. This will probably be first and foremost in the mind of a client, “How hard is this going to hit my pocketbook?” All in all, the pitch went well.

I checked the website for compatibility in Opera, Firefox, Chrome, Safari, and IE 7, 8, 9, 10. It passes WCAG , Section 508, and WAI for accessibility. HTML, and CSS also validates and passes W3C standards!

This is Before!

Current Design

 This is After!

The Project at hand:

• Take a .pdf version (hairy version) of Francis Tuttle’s enrollment form for High School students, and turn it into a usable, and accessible Web-Form!

Strategies used:

• Markup the HTML in a semantic, meaningful way.
• Use alt attributes on all images (there are only two).
• Use label tags with the “for” attribute for every input type.
• Use the “title” attribute on input fields for added information.
• Size inputs to match the amount of information that will be typed into them.
• Keep it clean and simple.
• Use radio buttons for one of two choices
• Use check-boxes for choosing more than one item
• Use contrast (dark text on white).
• A clear path to completion!
• Validate user input.

Lets get to work! First, I typed out  the entire form in a text editor using the HTML5 DOCTYPE. Making sure to put things in a logical order, with appropriate tags, with an appropriate ID or class. There were two images, so I gave them “alt” text. I made sure to use label tags with a “for” attribute for each input type. That way if someone clicks the text beside a field, the cursor will jump right in the input field desired.  I decided to give each field a “title”, so when you hover over an input field with your mouse,  you see a clue tip to what needs to be typed into that field. Several fields needed a “maxlength” and “size” attribute so they would look like a user expects it to look. For Example: the “State” field only allows for two letters like, “OK” – for Oklahoma.

I wanted a clean and simple design without any background noise. So I chose a simple light colored gradient for the background with black text for the body. This makes good use of contrast for those who may have vision problems. Where you need to choose one of two options, I used radio buttons (gender). Where you can choose several items, I used check-boxes(class choices). I laid out the form in a way that is common. Read from left to right, and the eye tracks down the left side giving you a clear path to completion. The submit button is nice and large, so you can’t miss it.

I had to think about required fields quite a lot! Especially in the parent/guardian section. Not every student lives with their parents. Not every student lives with two guardians, maybe just one. Will both parents work or just one? If only one works then the other will not have a business phone and maybe not even a cell phone. I decided only to require one parent/guardian – name, home phone, place of employment, and occupation. Surely if you live with only one parent or guardian they will have at least one phone number and work somewhere to support you going to FT.

The form will be sent successfully if you fill out all the required fields. If you don’t, you will see a clue to where you need to fill something in and resubmit.
I think my web form is way less hairy!