Objective

AEC Cares organizes a “blitz build” once a year on the day before the national AIA conference for a homeless shelter or other needs based organization. This group needed a website to provide information on upcoming projects and list previous projects to earn sponsorship donations and gather volunteer sign ups.

Challenges

• Advertise upcoming annual project

• Inform sponsors of donation opportunities

• Allow volunteers to sign up online

• Build credibility for the organization by showcasing previous sponsors and projects performed. 

Achievements

The website was built with a bootstrap theme and since the site was new, and only required a single page layout, a static build sufficed. It’s easy to maintain and the CSS stylesheet could be incorporated into a more dynamic build in the future if the need arises. 

SKETCHES

After an initial stakeholder meeting to understand the goals of this project, I began with a simple sketch to help outline the layout of the page. This gave me an opportunity to think through the navigation and how to present CTAs at a high level without worrying about the design. Additionally, this worked well to collaborate with the project owner and make sure that we were on the same page before starting any design or development.

SITE MAP

Reviewing the sketches with the stakeholders helped discover additional content that needed to be captured in the site. I outlined a site map for the site to showcase the scale of the site and also to map out the navigation. We later decided to incorporate many of the pages as sections within the homepage and produce a longer scrolling site. Normally, I’m against long scrolling pages with different content areas because it can have a negative impact on SEO ranking, but for this application it wasn’t a problem as the traffic to the site was not dependent on SEO results.

HI-FIDELITY MOCKS

Moving this project forward, the next step involved graphic work for the hero image of the homepage and designing the navigation and content areas. The organization uses visuals to make an emotional impact and the project they were supporting was a homeless shelter in Florida. It was directed to bring the issue of homelessness front and center and I also wanted to tie in elements of the brand into the visuals. I manipulated the photograph of the child to color her dress in the same blue that AEC uses for its brand color and then contrasting a shadowy background with the bright typography.

The navigation was kept simple with anchors that would jump down to relative sections on the page and a strong call to action for the donate button. We needed to support a secondary call to action for volunteers and decided to utilize a ghost button approach to avoid a visual conflict with the primary CTA.

These mocks directly translated to the layout and CSS styles of the final coded site.