Created a flexible layout built on a grid to organize and optimize the placement of text and images.

Incorporated open space when possible to let the content breath.

Redesigned forms to be more space-efficient and easier to fill out.

Focus on the flow of text so that it isn’t chopped up too much with photos or other design elements.

Keep text columns to a comfortable height so that the reader’s eyes do not have to make big leaps from the bottom of one column to the top of the next.

Apply stylish touches including drop caps, bird silhouettes, and decorative lines and borders.

When possible, orient the photos so that the birds face into the content to guide the reader’s eyes, or toward the page edge to be free to fly off the page, rather than “trapping” them against a column of text or the inside fold.

A fresh teal green replaced the olive green on the original site. Text areas were placed on a white background to make them easier to read.

To bring in the warmth of the people at Wellspring Gardens, a lemony yellow and peachy orange were added to the color palette.

Fonts were chosen for readability on a screen. Web fonts were used to ensure the text was presented consistently across devices.

As a community of homes, the set up of Wellspring Gardens may not be familiar to people new to the organization. To depict this concept, I designed an illustration (modified from stock imagery) for the header showing multiple homes intersperse with gardens. The illustration almost looks as if it was drawn by a child, evoking the casual, family atmosphere of Wellspring Gardens.

The flowers appear in small ways elsewhere on the site, including the favicon and alongside the rotating quote in the footer.

The header illustration only appears on the home page, so that the main content is raised further above the fold on inner pages of the site.

The family that runs Wellspring Gardens frequently sends out emails sharing the recent activities and inspirational moments that have occurred at WGs. Since these stories are the substance of the organization, it made sense to bring these to the front of the site. These update posts also help keep the home page fresh, so that return visitors to the site are rewarded with new content.

Several posts are available on each page to showcase the activity and progress made at Wellspring Gardens.

A sticky post provides a welcome so that new visitors are introduced to the organization.

In the original site, the majority of photos were relegated to a flash gallery in the corner of the header. Photos are a great way to convey the atmosphere of Wellspring Gardens, so we gave them more prominence by having them stretch full width across the top of each post on the home page.

More photos were also included on the inner pages, such as Activities and Services page (external link).

The original website used a long, inspirational quote to express the spirit behind Wellspring Gardens. I moved the inspirational quote from the left side of the home page, thus freeing up that prime screen real estate. The quote now appears in the footer, where it can add to the design without being the primary focus.

I also expanded the quote feature, making it a selection of several quotes which rotate randomly when the page is refreshed or a new page visited, so there is always something new to engage the visitor’s attention.

Sticky, responsive navigation bar.

Nested menu hierarchy reduced from 3 to 2. (No more sub-submenus!)

Added a section to the home page to introduce the first-time visitor to TMRU.

Removed the home page sidebar and followed a grid-based layout. This reduced the crowded and cluttered appearance of the original home page and made it easier to scan the page.

Improved the presentation of News and Job postings sections to the home page by giving them more real estate on the page, surrounding them with more whitespace, and adding photos and clear indications of links. By showing recently published and updated content, these sections help keep the home page fresh and relevant. Since a primary goal of the website is recruitment, it was especially important to make the Job postings stand out and easy to access.

Employed jQuery tabs to display content that originally was on sub-subpages on its parent page. Tabs in this context have many benefits:

• The content categories are immediately visible and of equal priority.
• Because the bundles of content are in essence “stacked” rather than flowing one after another down the page, the content takes up less screen real estate and requires less scrolling by the user.
• The content is no longer buried beneath nested pages and is therefore easier to find and access.
• Interactive tabs are more professional, modern, and better meet the expectations of the “techy” audience.
• On the back end, this content is more intuitive to find for the purposes of editing and updating. Editing is done all on one page, not across several different posts buried beneath dozens of other posts.

For an example, see the TMRU Clinical applications page (external link).

Sidebars are customized according to the page. For example, pages with subpages (such as the TMRU Innovations page (External link)) include a sidebar showing the subpages, so the user doesn’t have to go back up to the main menu to navigate.

Having sidebars relevant to the current page’s content provides a better user experience and can help SEO.

Varied sidebars can reduce “sidebar fatigue,” where the user begins to ignore the sidebar when it is the same on every page; instead, the sidebar is more useful and the user can be more engaged.

Images are optimized for faster load times and to take up less room on the server.

Created header images for parent pages.

Added photos to Social Responsibility page. Photos are a great way to show TMRU’s investment in the community.

Created a more panoramic slideshow of images on the Work Environment page, bringing the text further up the page so that website visitors do not have to scroll as far to reach the main content.

New fonts were chosen to be easier to read and more reflective of the website’s target audience of scientists and engineers. “ALL CAPS” were replaced with “Sentence case” in the menu items and home page slider, again for the purpose of increasing readability and making the best use of available space.

The arrows from Toshiba’s logo ››› are incorporated in several ways, including in the favicon, in buttons and “Read more” links, and as breadcrumb separators.

The Search form in the header is highlighted in red when clicked on.

Email and RSS subscriptions to new job postings are available in the sidebar on the Opportunities page.

The site is registered with Google Analytics and Google Webmaster Tools to gather site data that can be used in SEO and redesign decisions.

Posts are separated into custom post types for easier adding, updating, and organization of News, Opportunities, Leadership, and Innovators.

The Opportunities “edit post” screen has customized content entry boxes so that job information is predictable and uniform.

Formatting for Opportunities is handled in the code, rather than depending on the user knowing style tags. There is a box for custom additions as well, so that the format of the job posting doesn’t have to be rigid./p>

Designed a new masthead showing FVWC’s fox logo walking off the page to represent the center’s work of rehabilitating and releasing wildlife temporarily in its care.

The fox leaves behind tracks, of course, alluding to the name of the newsletter.

The new editorial bar, inside on page 3, used more space and could therefore include temporary staff (such as interns) and the educational animals.

Designed a new flexible layout built on a grid to organize and optimize the placement of text and images.

Articles typically spanned 2–3 columns to make the lines a comfortable length for reading.

New fonts were to chosen to be readable and look professional.

Used a new color scheme of burnt orange and forest green. Because the newsletter is printed in grayscale on newsprint, the colors were used in small ways, such as in the masthead, folios, drop caps, and recurring sidebar boxes. Using colors as meaningful accents, rather than depending on color for the layout or visual appeal of the newsletter, also means that less ink is needed for printing, which is both environmentally and economically beneficial.

Focused the reader’s attention on the main content by setting aside info that recurred in each issue in orange sidebar boxes. When located on the outer edges, these sidebars allowed readers to hold the newsletter and not cover up the main content.

When it comes to sharing the triumphs and challenges encountered daily at a wildlife rehabilitation center, nothing is more effective than close-up photos of the wildlife being cared for. Photos were used to enhance and balance article text.

Feature stories featured large photos that stretched across multiple columns or the full width of the page, overlaid with the title and byline for an eye-catching effect.

Rebuilt the donation form included in every issue, aligning content and providing more space for filling in information. I love optimizing forms by removing barriers that could discourage users from completing them (such as spacing that is too tight or confusing lines and labels).

Created an original illustration featuring multiple animal silhouettes (representing the different sponsorship levels) to draw renewed attention to the donation form.

Each issue of the newsletter had a separate table of contents for the print and digital versions. The print table of contents was opposite the mailing panel and therefore was visible on the outside of the folded newsletter for immediate reference. The digital table of contents featured clickable links to take readers to specific pages and sections of the newsletter.

All urls and email addresses within the digital newsletter were also clickable links.