Botanical Gardens Volunteer page
Redesign and custom HTML (www.sabot.org/?nd=volunteer)
The Volunteer Director at the San Antonio Botanical Gardens had a dedicated page promoting her program and encouraging people to donate their time and skills. But that page had problems, both technical and design. Missing images, malformed links and a lack of information structure resulted in an unappealing invitation to volunteer.
My role
The director hired me to redesigned the page, starting with a content evaluation and finishing with custom HTML and graphics. I created a page style, edited and formatted text, invented call-to-action buttons and ensured the new page would work with the client’s CMS.
Above: By restricting text content to one side, the first layout didn’t allow for change.
Layout
I set up a test page based on the site’s working space, 737px with 18px horizontal margins. Sketches lead to a six-column layout, later simplified to three. But the design wasn’t modular enough to allow for future expansion.
Organization
After our first meeting, I audited the existing content. Even a single page deserves a few hours’ study, and I discovered two distinct sections. The introduction was a straightforward paragraph, but the job descriptions themselves could be organized into three categories of three to five jobs (412&8211;866 characters) each. The director also provided several photos of real volunteers at work.
The content manifest revealed a critical omission. There was no “call to action” that invited people to sign up. I filed that under TBD as I created a test file.
Visuals
How do we appeal to new volunteers without stepping too far from the site’s established look? I started with a color palette based on images found throughout the site. The colors drew attention to strategic information such as the titles and calls to action.
Effective calls to action are vital. More than eye-grabbing, they need to imply clickability and offer incentive to click. Three buttons using brand colors asked people to download the application form, learn more about the Gardens and sign up for the mailing list.
How do gardeners volunteer? Both actions use people’s hands. We photographed a raised hand wearing a gardening glove for the main application button.
The result
The new design allows for expansion, works with the CMS and visually fits with the overall site—but uses size, position, color and a deliberate top-to-bottom flow.
