Square Cat Creative

Go Daddy

Project: Support site

Details

Responsibilites:

  • User Experience Architect

TriWest Healthcare Alliance

Project: Modal Media Center

Details

Built nearly pixel-for-pixel from Photoshop comps it uses rapid, efficient initial delivery of content from server-side code while maintaining elegant client-side interactions. Ongoing styling and development benefit from highly-flexible HTML/CSS-based UI, utilizing callbacks and event listeners to communicate with the Flash-based video player.

Additional details:

  • .NET: XML transform of library and video list on page/modal load
  • jQuery: XML transform after page load, modal/lightbox via Thickbox plugin, click event and DOM manipulation on UI for video controls (slider is jQuery UI)
  • Longtail Video, JWPlayer: flash video (FLV) playback, Javascript callbacks
  • If the modal fails to instantiate, failover is a standard page with the video player

Project: Medal of Honor - Speak Out!

web page image

Details

A third-party agency delivered a website built on Drupal for an initiative, in partnership with Congressional Medal of Honor recipients, imploring service members to seek help for their behavioral health. The homepage used an "off-the-shelf" Drupal module for YouTube videos, but immediately prior to launch senior leadership decided they did not want to utilize YouTube. So, using jQuery, I was able to quickly recreate the behavior of the module, including the back-end administration, to serve up videos from Brightcove, communicating requests and events via the Javascript API.
(As of August 9, 2011 the site is still live and using my solution, as confirmed be the source code.)

Project: SharePoint Intranet



Details

My role for the launch phase of this large, complex project was "branding", meaning I translated the Photoshop mockups, created by my (then) supervisor, into the appropriate HTML, CSS, and images for the Master Pages, Page Layouts, and various Web Parts. Post-launch, I was the primary resource for all ongoing design and front-end development tasks, working with communications specialists on daily features and various promotional campaigns for corporate initiatives, which would involve custom page designs that worked well within the constraints of the site-wide template and would often incoroprate fun and engaging interactive elements, such as a movable TV remote that contolled a Flash video player through Javascript callbacks, or simply pencils and erasers that could be dragged and dropped.

Due to the confidential nature of the site, there is very little I can show aside from some simple animations, driven purely by jQuery and promoting participation in an employee survey. (The screen capture does not present the animation as smooth, though it was in practice. Audio was used in production.)

Experiments

SCTV (video player)

Details

A personal code playground.

Browser "dimmer switch" in minutes with jQuery

Details

Simple proof of concept demo
Code: http://pastebin.com/ui4fZbes

Radiant Church

Project: Main Site with Custom Content Management

web page image

Details

Responsibilities:

  • Ongoing front- and back-end development, most notably modernizing the HTML and CSS
  • Deployment of enhanced and expanded multimedia features (video, audio, podcasts, photo slideshows)
  • While I refined many specific elements of the UI over time, the overall design was completed prior to my arrival

Project: Youth Building Campaign website

web page image

Details

Responsibilities:

  • All design and developement, including a custom-coded donation calculator
  • The contribution total was driven by a Twitter account, that allowed the amount to be remotely updated via SMS

Project: RKZ Preschool website

web page image

Details

Responsibilities:

  • Informational website with custom content management system designed for non-technical users
  • Design was guided by existing print collateral

As of Sept. 21, 2013 the site is still live (though unmaintained) at: http://www.rkzpreschool.com.

Vineyard Christian Fellowship of North Phoenix

Capital Fundraising Campaign

logo, brochure cover, and web page

Details

Responsibilities:

  • Campaign identity
  • Website (entirely rebuilt from scratch to coordinate with campaign collateral)
  • 4-color brochure with custom die-cut and embossing

As of Sept. 21, 2013 a historical snapshot of the site is available.