Featured Image

The existing Marywood homepage featured a large image focusing on the “Lead On…” marketing campaign. These images linked to profiles of students and alumni, and most were simply a head-shot of the student with a blurred background.

The Problem

Although the content within the profiles is very robust, the marketing and web development teams felt that the Lead On profiles were a poor use of the prime real estate of the homepage, because:

• The profile images didn’t change on a regular or consistent basis.
• The layout and formatting of all of the profile images were very similar, and the similarities, when tested on users, caused banner blindness (meaning most of the frequent homepage visitors didn’t even look at or click on the profiles).
• The featured image was loading using Adobe Flash, which needed to be eliminated because of security concerns and its incompatibility with mobile devices such as smart phones and iPads.

Goals

The focus of the homepage redesign was to make a strong visual impact with professional photography, and to use the large feature area to draw attention to important news and events on campus. In addition, the large feature area would also guide users deeper into the website, allowing the web development team to bring attention to the vast amount of creative, interesting, and dynamic information that could be found within the department pages.

The Solution

After much research, testing, and revision, I developed an eye-catching solution. When appropriate, images would “pop” out of the the standard feature image frame, creating an energetic, 3-D effect that would draw the homepage visitors deeper within the site.

Examples:

This image was used to target new students by demonstrating the “college experience” as it would appeal to a high school student looking for the right college. The image linked to a robust Residence Life webpage that I created in conjunction with our programmer. The site highlights the features of all of the residence halls in a fun, dynamically driven database ‘cork-board’.

The baseball photo was used to promote the newly redesigned Athletics department website and announce the opening of the Men’s Baseball season. The photo of the ball player feels as those he’s actually floating on top of the homepage, and created an enormous amount of click-through traffic to the Men’s Baseball season schedule on mupacers.com.

The student and professor in this photo were used to promote the new graduate program offered by the School of Architecture. The dynamic appeal of the one-on-one student/teacher relationship shows off Marywood’s personal attention while sending homepage visitors to a content-rich School of Architecture site, which also had been recently designed by our team.

Once completed, it was decided that the homepage image would change at least weekly. Over the past several months, this has proven true, and there are often weeks that the large homepage feature image changes up to four time!

The feedback we’ve received on the homepage images across campus has be extremely positive, and our target audience of frequent homepage users as well as new users have reacted favorably to the update and get excited to see what’s next.

News Stories

The bottom half of the Marywood homepage is dedicated to news and events. In the old design, the bottom-half of the page was divided into 3 columns: Datebook, News & Announcements, and a miscellaneous third column of other announcements. The information that was displayed in each column was pulled from a news or calendar feed, and was displayed as a bulleted list linked to news or event pages within the website.

The Problem

Although much of the information within the particular feeds was interesting, current, and homepage-worthy, there seemed to be no way to distinguish one list item from another. Because of the lack of imagery to associate with the news and events, the stories weren’t drawing any immediate interest causing a less-than-desirable click-through rate.

In addition to the lack of imagery, we learned that the actual headings were confusing the visitors. The first column titled “Marywood Datebook” listed events from our calendar. Because of the inconsistency in naming (Datebook, Calendar, Events, etc.), the heading confused our homepage visitors.

This problem continued in the second and third column. News & Announcements were labeled as the second column, but what is the third column? There is no heading, and it’s definitely visually separated from the second column by the use of a light blue background. The items listed there, however, really were News & Announcements.

The Goal

Our overall goal for the news and events section of the homepage was to increase the click-through rate on news stories, and to create more visual impact and presence for the stories. Instead of pulling in feeds from the Calendar and the News page, the homepage stories would be hand-picked. We wanted to create visually interesting photos, shorten the headlines, and create a sentence or two description for each event.

In addition to redesigning the homepage, our goal was to make the news releases and calendar event pages more content-rich. It’s important that the information the we so carefully tailored on the homepage would lead visitors to just as visually interesting and informative information. Otherwise, our visitors wouldn’t continue to click through to read the articles.

The Solution

Instead of a three-column solution, we decided to move to four columns. Three columns would be used to display news or events (including an image, link, headline, and description).  Using a less-is-more approach, we decided that it was better to have three very well-developed stories featured in this section, rather than eleven (or more) that really didn’t stand out. In addition, we decided not to separate the information into categories as it previously was. This area would hold news, events and announcements in an order of importance that was decided by the marketing and web development teams (or people, instead of headings).

To be able to hold more stories, we also created an “arrow button” that could be used to cycle through to older stories. Ultimately, this section can hold up to nine stories, with three shown at a time.

The fourth column (furthest to the right) proved to be a catch-all for all the important information that NEEDS to be on the website, but isn’t necessarily able to translate visually into a story.  This type of information is separated into sections, and using an accordion style navigation I was able to conceal a lot of the information from plain view unless that menu option is selected. Not only does this allow us to display more information in a smaller amount of space, but it also serves the purpose of being a release for members of the web and marketing team that may need to get important information on the homepage quickly and easily.

Conclusion

The new homepage serves the needs of our target audiences, and I feel that the previous problems were remedied and the goals were successfully completed. Instead of one stale head-shot image of a student smiling, the new homepage offers variety, energy, and excitement. It represents Marywood University in the positive light that it is: a small college dedicated to personal attention that also has quality education programs and lots of interesting things to hear about and participate in.

My assessment of the homepage redesign rang true after hearing from the President of Marywood University, Sr. Anne Munley:

In this morning’s President’s Cabinet meeting, Sr. Anne expressed her enthusiastic approval of the new “look” of our homepage, and she asked me to extend her appreciation to all of you for your thoughtful, creative and diligent work on this significant improvement. (forwarded from the Director of Marketing & Communications).

Northeast Freight Transfer (NEFT) is a rail freight, salvage, and trucking service company in Scranton, PA. NEFT contacted me in need of a new website. The relationship blossomed quickly and NEFT quickly jumped at the opportunity to work with me for their other design needs.  Additional projects included a logo touch-up, a 2-sided 8.5 x 11″ flyer design to advertise their services, and business cards for all of their employees.

Northeast Freight Transfer Website Design: www.nefreighttransfer.com

Business card design with a blank back. Other versions were created for individual employees with their name, address, website address, and contact information on the back.

2-sided flyer design explaining their services and connecting potential customers to members of their sales team.

Maternal & Family Health Services Announces Launch of Newly Redesigned Safeteens.org
View The Press Release:
Maternal & Family Health Services, Inc. announces the launch of the new Safeteens.org. The newly redesigned Safeteens is a resource on healthy living and safe sex for Pennsylvania teens as well as teens across the country. New features and improved functionality makes it easy for teens to get reliable health information and find family planning health centers across the state of Pennsylvania.

Safeteens is a resource for teens, providing reliable health information and a direct link to Family Planning health centers located throughout Pennsylvania.  The Safeteens logo and website were in desperate need of updating and the client had many goals in mind for improving the website.  Some of their major goals included:

• Increase the overall usability of the website by:
  • Eliminating Flash animation and music from the website
  • The creation of a 404 Error page, and 301 redirects (if someone goes to a page from the old site that no longer exists, this gives the ability to redirect to the closest matching page on the new site)
  • Development of a clear hierarchy, or sitemap, of pages along with breadcrumb navigation.
• CMS capabilities so that staff would be able to add to and update the site
• Addition of a news blog, with the ability for the user to ‘comment’ on articles and share them with friends
• Interactive features, such as a dynamic “Find a Health Center” address database, featured polls, featured homepage articles, and featured YouTube videos.
• Integration of social media, such as displaying a Twitter feed, and allowing the user to share pages, news posts, and other elements of the site on Facebook.

This project included the creation of an iconic logo. In order for an icon to be a truly effective logo, it should be easily recognizable and memorable, while remaining clear when reproduced in small sizes. Upon approval, their new logo was used as the inspiration that the entire website was designed around.

The redesign process began with extensive research on how teens use the web; what they like, what they dislike, and how to make their website more appealing to the target audience (preteens and early teens).

Here you’ll see the before and after of the Safeteens redesign:

Safeteens homepage (before)

Safeteens interior page (before)

The NEW Safeteens!

View April Fools website: Squirrels take over the Marywood home page

Scranton Times – Sarah Hall did a feature story on the success of the Marywood Home Squirrel page. Sister Kathleen Burns, Mark Pitely and Amy Fedele were interviewed about the work they did on the covert April Fool’s Day operation that attracted national attention. Sister Kathleen, Mark and Amy have received congratulations from web colleagues at the University of Massachusetts Medical College, UC Berkley and University of Florida to name a few.

WBRE-TV – The news director at WBRE-TV commented that the Marywood site was the hit of news room on April 1, with everybody logging on to see the squirrels. They ended their 6 o’clock newscast with a kicker about the Marywood homepage.

John Phillips Live Website Design is featured on design inspiration websites such as Design Meltdown, Light on Dark, Screenalicio.us, iStockPhoto, Most Inspired, and The Daily Slurp, and published in the Web Design Idea Book (Vol. 1)

The card mockups ranged from “he will never approve this, it’s way too out there” to “safe corporate but fun design” – these exact phrases are direct quotes from the client. After a round of 5 solid concepts, the design campaign that was chosen is what you see below. The cards use a retro coloring and reflect the “larger than life” childhood nostalgia the client felt portrayed their new tagline and marketing campaign of “Live Life With Flavor”

www.dustinswitzer.com