Oesterlen Services for Youth

Built in 2014  ·  Visit website

Developed while working for Liquifusion Studios.

Oesterlen’s previous 7-year-old website design needed a major refresh, particularly in cleaning up content, optimizing for conversions, telling a better story with authentic photos, sorting out navigation menus, and making it responsive to mobile devices.

First was a content audit of the current site to figure out how to best present information and organize the navigation. I was excited to apply some lessons learned recently from reading Content Strategy for the Web.

Next was a website design mockup in Adobe Fireworks. One area that I’m particularly proud of is the new home page. Instead of trying to do too much, it simply tells the visitor a little about the organization, rotates through some photos of the campus, and sends them on a journey to explore the agency’s programs. I’ve found that this is a great way to “slide” through some extra visual information without interrupting the visitor, who may be trying to read the content.

Key pages on the site now have clearer calls to action, helping the visitor know what to do next if they want to inquire with Oesterlen or donate to the organization.

Next, I developed a Rails application for collecting and managing incoming referral requests. This process allows customers to submit inquiries via a secure web form. The process also watches the intake email account and imports all data from each email (including file attachments) into the referrals database so that staff has a central system for managing incoming business.

We also discovered opportunities to improve PCI DSS compliance for the online donation form by integrating it with Braintree Payments.

Project contributions

  • End-to-end solution
  • Content audit and analysis
  • Design prototyped in Adobe Fireworks
  • Managed photography project with professional photographer
  • Responsive website design implementation
  • Copywriting
  • Clear calls to action on key pages
  • Integration with Alchemy CMS
  • Back-end Ruby on Rails programming
  • Automated testing using RSpec and Capybara
  • Donation form integration with Braintree payment processor
  • Docker hosting setup on Cloud 66

Tools used

Ruby on Rails
Ruby on Rails
Alchemy CMS
Alchemy CMS
Docker
Docker
Foundation for Sites
Foundation for Sites
Sass
Sass
Fireworks
Adobe Fireworks
Braintree
Braintree
Photoshop
Adobe Photoshop
PostgreSQL
PostgreSQL
Cloud 66
Cloud 66
AWS
Amazon Web Services
jQuery
jQuery