H.E. Butt Foundation
Structurally, this was a challenging project for one big reason: we weren’t designing and building one website, we were responsible for creating all the necessary layouts and elements to power six different websites, one for each of their programs.
Digital Support
When the team heard we were working with the H.E. Butt Foundation, everyone geeked out for a minute. ‘We go to H-E-B all the time’, was a common refrain. However, some of us were not as aware of all the wonderful non-profit work the family does for people through the H.E. Butt Foundation. The online home for their various charity endeavors is what we were brought in to work on.
That said, we always knew there’d be a lot of overlap in styles, because an important goal of the project was to reduce the inconsistencies between sites so it would be easier to maintain. Our first priority was doing a thorough inventory of elements that were unique to each program, then deciding whether or not they needed to be. Once we had everything charted out in spreadsheet form, we got down to designing.
Many of their programs revolve around camps or retreats in serene Texas locations, so we used natural photography to set the tone. Additionally, each program has its own signature color that we worked into the layouts. Overall, the experience from site to site feels cohesive, yet differentiated.
On the UX front, a few playful rollover effects go a long way in capturing the upbeat spirit of their programs. The style is clean, for consistency sake, and bold in areas we wanted to stand out. Seeing it now, live, with all the content integrated (no easy task), we couldn’t be more pleased with the result.