Calvert Foundation

UI/UX, Responsive Web Design & Template Development

The Problem.

Calvert Foundation empowers investors to empower communities. Through the Community Investment Note, Calvert connects individual investors with organizations working around the globe, developing affordable housing, creating jobs, protecting the environment, and working in numerous other ways for the social good.

Calvert’s previous site was an information nightmare. Site users found it hard to navigate and find the information they needed. Calvert was also looking to create a Donations page that would tie in with Salesforce and be mobile friendly. Hiring PICnet was the obvious choice since our platform seamlessly integrates with Salesforce.

The Solution.

A complete responsive website redesign, built on top of the Non-Profit Soapbox and Soapbox Engage platforms. I took the design questionnaire and static wireframes, created by the project managent team, and came up with a fresh new skin for the site. The new design features a really clean navigation, bold headlines and great attention to typography. Separate mockups where done for desktop, tablet, mini-tablet and mobile resolutions to map out how the design would transform. The Photoshop mockups where then cut into HTML/CSS and the Joomla! template was created. I then styled any additional compnents and content in the browser.

My Role.

  • Art Direction
  • UI/UX Design
  • Web Design
  • Responsive Web Design
  • Interaction Design
  • Front-End Development
  • Joomla! Template Development
  • HTML / CSS / Javascript
  • Joomla! CMS

Home Page, Content Page (Desktop)

calvert-homepage-desktop.png calvert-article-desktop.png calvert-articlehover-desktop.png

Home Page & Content Page (Tablet)

calvert-homepage-tablet.png calvert-article-tablet.png

Home Page & Content Page (Mini Tablet)


Home Page & Content Page (Mobile)

Interested in working together or just want to say hello?

Let's Talk! I don't bite, but I throw killer combos.