The YMCA is an incredible international organization supporting youth in more ways than you may think. Growing up, I used to use the YMCA gym for a measly $8/month — that was some 12 years ago. My dad, when he first came to the U.S., bounced from YMCA hostel to hostel at $2 dollars a day as he sought full employment. Talk about a slick deal!

Beyond the “deals,” the YMCA has been a great resource to support, empower and develop our youth. We developed the YMCA Gymnastics Nationals site – and for kicks decided to make some wireframes and do a bit of UX analysis for the YMCA DC website.

Let’s start with the good stuff – the before and after

Here is a closer look at our wireframe

We reviewed website from usability point of view and the following are our observations:  
 

Here are a few things we liked

Nice Design and Color Scheme
Website has a fresh color scheme and a nice choice of imagery 
 

Clear, Clean and Consistent Layout
The website has two main page types – home and inner. The inner page has left navigation to quickly provide access to the sub pages and actual content.

Good Content Architecture
The user experience was thought out as content is in logically organized sections.

Some room for improvement

Home Page Layout / Content Area Placement
We moved around the layout of some of the items on the home page to better highlight the perceived goals of their website.

Mega-Menu type Navigation
We thought the main menu could better direct a user to their desired content.

Informational Page Layout
When we get to the page we are looking for, we don’t really need that left menu any more. Perhaps we could have created another way of going back to the related pages — but without the emphasis of a full left hand menu. We moved these to the bottom in our wireframe and we did shift the content around a bit.

These companies are often at the cutting edge of innovation and global cultural reach, yet they can’t seem to invest the time to learn how visitors may be digesting their website.

For this article we took a look at Caterpillar’s website Cat.com.  At first look the website is quite nice, however digging beyond the aesthetics reveals a chasm for improvement.

The following are the areas of improvement / deficiencies we discovered:

• Website does not follow the web 2.0 guidelines like central layout.
• The navigational design can be improved to a more intuitive layout and structure
• Website usability can be improved using various like top-navigation, bottom navigation and left navigation techniques
• Website lacks informative text on home page and the inner pages

We have put-together our thoughts in form of wireframes on how we can improve the usability of www.cat.com. Below are the key points:

Home Page

Header
This screen shows a web 2.0 central home page layout. All the major sections of the website are organized logically in top and bottom navigation. The header part of the home page shows company logo, search control and quick links (top-right corner). Header also contains main navigation menu.

Footer
The footer will contain the link to important pages like privacy policy, legal notice etc. Apart from this the footer will contain copyright information. The header and footer will be repeated consistently on all website pages.

Main Body
The main body will contain a flash banner at the top to show highlights. Below the banner there is a little space for latest news. The bottom area of the website shows navigation-panel for major sections and subsections in an intuitive manner improving usability of the website.

Home Page (Products and Applications)

This wireframe shows how a user can navigate through various major sections of the website.

Home Page – Top Navigation

This wireframe shows the structure and layout of the main menu. This structure will help improving the usability of the website.

‘About Us’ Sections

This page shows how the ‘About Us’ section will look like. A small banner at the top beautifying page, the section explained at the right part and the various sections and sub-sections in the left navigation in an intuitive manner. Page also shows ‘breadcrumb’ navigation.

‘Products and Applications’ Sections

This wireframe shows how the ‘Products and Applications’ section will look like. A small banner at the top beautifying page, the section explained at the right part and the various sections and sub-sections in the left navigation in an intuitive manner. The main body depicts how the various products can be listed in more informative way. Page also shows ‘breadcrumb’ navigation.

vOfficeware, Inc. was asked to rescue this content management system.  Using a series of open source PHP based web services, we were able to centralize all important data and produce enough reports for the organization’s personnel to take charge of their day to day needs.

So – for the summer at least, we decided to dress down – the catch of course is that corporate demands casual attire be branded with vO’s insignia. Our first order came in from a Florida based custom embroidered apparel company: Logo Up. I’m sure it is clear from the writing of this blog post that we are more than happy with our wears. The shirt sizes run a bit big which is good for us hefty developers but not so great for those on our team who are more, how we say, fit!

We have a few extra hats, t-shirts, and … even jogging pants. Come on by our offices to grab something for yourself – if you stop by on a hot DC summer day we’ll even treat you to a yogurt!

Using WordPress or another content management system is a great first step towards allowing for compliance with Section 508 rules. Because WordPress and other CMS have pages assembled via “themes” and “templates” it allows for most of the compliance testing and validation to be centralized. For example if the main look and feel is compliant it is likely that every inner page will be compliant or mostly compliant.

When adding content however, there are some points to note that an automated testing system may not be able to uncover. In addition to ensuring all images have alternate text and all media (Flash, MP3s, Videos) have accessible versions try and think in the shoes of the disabled visitor.

• Does the page have proper color contrast or does everything simply blend together?
• Are you marking items in a color “Warnings appear in Red” as opposed to “Warnings are indicated with an asterisks”
• Is everything spelled correctly? A text-to-speech engine as it is has a hard enough time discerning intonations in text, I can only imagine what a poor spelling would lead to

The idea is to build a site that has a compliant structure. We at vOfficeware recommend and generally build sites on WordPress. However larger enterprise customers may use SiteFinity or Umbraco. Once the main theme is built however, a style guide should be developed for future content entry. It is hard for any system to provide the feedback needed to make a website truly accessible. However thinking along the lines of these tips will go a long way towards creating a welcoming web presence.

vOfficeware, however recognizes the other side of the nonprofit spectrum. About 90% of these 30,000 nonprofits have just a few members and are mostly volunteer run with budgets of less than $100,000. Our nonprofit website design service: NonprofitCMS.org was developed to be an affordable platform for these types of organizations.

NonprofitCMS is a branded version of WordPress that combines several open source or cost effective plugins to be an easy to use and easy to manage platform for small nonprofits. Event registration, donation management, newsletter management, and outreach are its core focus areas. Prices run from $1199 to a few grand depending on the level of customization needed.

For the tiny nonprofits with absolutely no spare change, we have licensed a few clean templates that we can offer free of charge. These templates allow nonprofits to collect donations, manage a newsletter, and run a blog for outreach for just the cost of hosting. To get started visit our Free Nonprofit Website page at NonprofitCMS.

I came across Stokefire’s website after being inspired watching Art & Copy. While the “Madmen” and big shots may scorn at this film, I was exhilarated at learning invention process of iconic catch phrases. This documentary made me feel like I was part of the creative process as it occurred. As I watched, I wanted to tear down the walls of negativity and banish the naysayers who felt “Got Milk?” sounded stupid because of grammatical error and “Just Do It” seemed uninspiring.

It is rare for me to read through every page and every word on a website that is neither a competitor, nor a partner nor a prospective customer. However, each and every syllable on Stokefire’s site seems to drive the reader towards their goal. They have framed themselves as the perfect branders: Say enough to make your point and say it well. Or as they have written, “Just say it.”

If you only have time for one page then I recommend reviewing their “thinking.” As the great recession has robbed Wall St of its prestige, I believe Stokefire has taken a few corner stones off of Madison Avenue.

Disclaimer: vOfficeware has not (yet) worked with Stokefire. This blog post should be considered as the opinion of Kunal Johar, President of vOfficeware, and should not be taken as an explicit recommendation.

Both technologies produced an unpleasant user experience as they sized and displayed fonts in real-time to the user. Especially on slower machines, users would see the font drawn and redrawn at several decreasing sizes until the process was “just right.”

Google, in coordination with TypeKit, has released an elegant solution to this problem. The WebFont loader allows us to leverage custom fonts to be rendered natively by the web browser. That’s right your CSS file could say font-face:”Your font name” just as easily as “Arial.” In other words, there is no learning curve to being able to apply this technology.

This is done without Javascript and without Flash or SVG technology. All modern web browsers and their mobile counterparts support @font-face technology within the CSS specification. Since we are describing fonts in CSS we do not have to worry about upsetting search engines.

So while all fonts are not yet web-safe, this technology makes some 550 (and growing) fonts available for use.

Some free fonts: http://code.google.com/webfonts
500+ affordable fonts: http://typekit.com/libraries/full

Apptorney:IP went from design brief to the App Store in under 60 days and was accepted by the App Store on the first submission.