Refreshed Peace Corps Website Launches

After overcoming some epic server-related obstacles, the refreshed Peace Corps has finally launched. Over the next few days I’ll describe the design, development and marketing phases for this project, but in the meantime, check out the new site at www.peacecorps.gov.

Peace Corps home page

Peace Corps interior page

Posted in Portfolio | Tagged | Leave a comment

New Peace Corps Website Textures

I’m still dying to see the Peace Corps’ website refresh go live (there are still a few hang ups), but I thought I’d throw out a little teaser in the meantime. In addition to updated XHTML and CSS, the new site design will be more in line with the agency’s overall design direction. By eschewing the Peace Corps’ familiar palette, I was able to introduce warmer patterns that bring an international flavor to the site. Below are a few of the images that will be used as the site’s background.

Peace Corps Background Texture 1

Peace Corps Background Texture 2

Peace Corps Background Texture 3

Posted in Portfolio | Tagged | 1 Comment

Rapid Prototyping for Better Interaction Design

Don’t invest your resources in unproven ideas. Prototype the idea first, make it live, and make adjustments as necessary based on user feedback. This idea was reinforced on a recent project that I directed. The scope of the project was to redesign an online donation application with a goal of increasing donations. The redesigned page was originally a list of 50 funds available to donors. The initial enhancement made the list searchable by keyword, location, sponsor, and type of fund. For the most part it was a quick solution that would have marked results.

prototype example

Shortly before the enhancement launched, additional features were requested by the project’s stakeholders. They suggested that the search form was not “visual” or “emotionally compelling” enough to increase donations. Their desired solution was the typical request for something interactive, engaging, and of course included Flash. Such a request would require resources beyond the scope of the project, so instead I suggested using an image map as a quick and easy prototype to roughly accomplished the desired effect.

prototype example

The project was launched with both the form and map interface. After the redesigned page spent a few months in the wild I installed Crazy Egg, which provided a visual representation of the page’s click density. Crazy Egg allowed me to observe how each interface was performing in real-time.

prototype example

Outcome

I can’t say I expected to see such a drastic difference, but users overwhelmingly preferred the form over the map. The feedback will now inform how I tweak the both the map and the form. If I don’t eliminate the map entirely, I will definitely modify the instructions; both “roll over” and “Partnership Projects” are not user-friendly terms. I’m very happy with the form, but will likely reorder the fields based on their usage.

Posted in Accessibility, Design | Tagged | Leave a comment

Peace Corps Video Player

After years of struggling with client-side support for video formats, I finally have a clear favorite. With over 98% penetration on users’ computer systems, Adobe Flash ensures that visitors to the Peace Corps website see our videos. The video player is an adaptation of Jeroen Wijering’s FLV Media Player, which was chosen for it’s playlist, skinning, and plugin capabilities. Out of the box the player includes basic controls and functionality, but with a bit of tweaking, becomes a magnificent tool for any website.

Main Player Screen

main player screen

Closed Caption Screen

Before the video player was upgraded, maintaining the Peace Corps video library was an absolute headache. In addition to supporting multiple file formats in varying bitrates (we still had measurable dial-up traffic), transcripts for each video had to be displayed for Section 508 compliance. With the FLV player, closed captioning could be imported from a TimedText XML file. Sweet!

closed caption screen

Additional Option Screens

In lieu of adding icons to the player’s main toolbar, an expanded view shows user options in a more descriptive manner. Once the main video is complete, additional videos are recommended.

additional tools screen

additional videos screen

Draft Video Players

Here are a few drafts that led me to the final design.

additional videos screen

additional videos screen

additional videos screen

additional videos screen

Posted in Portfolio | Tagged | Leave a comment

Peace Corps Kids Website

The Peace Corps Challenge is an interactive game aimed at sparking interest in volunteering among youth. The game gives children the opportunity to work in the fictional village of Wanzuzu as a Peace Corps Volunteer. Kids must work with local villagers and Peace Corps members to solve eight different challenges facing Wanzuzu.

Work Performed: information architecture, user flows, interaction design

Play the game

Peace Corps Kids

Posted in Portfolio | Tagged | Leave a comment

Peace Corps Kenyan Sign Language Website

The Kenyan Sign Language Minisite was developed to showcase one of the innovative projects Peace Corps volunteers are developing around the world. In Kenya, volunteers working with hearing impaired youth needed a way to help their communities learn sign language. To maximize their efforts—and to make the process more enjoyable—volunteers developed CD-ROMs with games and activities that helped deaf children and their families learn Kenyan Sign Language (KSL). In addition to featuring the original sign language games developed by the volunteers, the KSL website provides an overview of the project and introduces users to the volunteers.

In 2006 the site was named one of Adobe’s Best of 2006 Site of the Day.

Work Performed: information architecture, user flows, wireframes, art direction

View the Kenyan Sign Language Website

KSL Home Page

Posted in Portfolio | Tagged | Leave a comment

Peace Corps Website

The Peace Corps’ mission is to provide assistance to developing nations. To meet these needs, the agency recruits 4,000 highly-skilled volunteers each year. The Peace Corps’ website plays a critical role in educating the public about the volunteer experience and in recruiting volunteers. Recent projects include an online donation system, audience-targeted minisites, and interactive volunteer maps.

Work performed: user experience and user interface design, information architecture, art direction, website lifecycle strategy, technical project management, XHTML, CSS, ColdFusion, JavaScript, content development, graphics production

Peace Corps home page

Peace Corps volunteer map

Peace Corps minisite

Posted in Portfolio | Tagged | Leave a comment