Code4Sac site (redesign)

Code4Sac site (redesign)

 

The Goal

Redesign the Code for Sacramento website to be more approachable and appealing to non-technical community members. The brigade wanted to increase the diversity of its volunteers, both in terms of skills and expertise, as well as demographics.

 

The Approach

The site had to be warm and inviting, but also extremely easy to use. The redesign needed to make it easier to navigate and find information.


old-new-landing-page

Old

New

 

The Process

 

Understand the business goals.

I worked with core team members to understand the goals for the site.

 

Identify the primary use cases.

Together with core team members, we identified the three primary users: active volunteers, new volunteers, and community members interested in either our projects or in becoming a volunteer. I then documented the use cases and informational needs for each.

 

Site maps

Once the available resources were gathered, I drew site maps to organize the content and navigation, and iterated with feedback from the core team.

c4s-Site Map

Wireframes

I designed wireframes to play with ideas and elicit feedback from the core team, web developer, and volunteers.

c4s-WF-Home
c4s-WF-About
c4s-WF-Projects-Support
c4s-WF-Events

 
 

Mock ups

After the wires were agreed upon, I provided mocks to help communicate the overall feel and visual design language.

c4s-Comp-Home-3

The landing page was redesigned with a carousel of warm, inviting photos featuring diverse people. When users hover on a photo, they see basic information about the goals of the organization, who the volunteers are, and what sorts of projects they can work on. Sponsors are given front page exposure, and the footer contains quick links to social media and upcoming events.

 
 

c4s-Comp-About

The ‘About us’ page introduces users to the people who make up the organization: the volunteers, leaders, and sponsors. It also answers frequently asked questions, and provides a contact form.

 
 

c4s-Comp-Projects-Support

The projects page is a gallery of current and past projects, and provides direct links to each project’s web site. The ‘Support us’ page lets folks know about all the different ways they can support Code for Sacramento.

 
 

c4s-Comp-Events-3

The ‘News and events’ page has an events calendar, as well as links and information for related events and organizations.