Web Communications

The Allegheny College family of websites has continued to evolve in many exciting ways lately, including in April when we launched a redesign of the home page.  One reason this launch was exciting is because it was our first “mobile first” website, which is a way of saying the website works great and looks great no matter what device you’re using, from mobile to desktop. During that same time, we revealed that mobile first web design will be our new focus, meaning that we intend to have the vast majority of new websites that we launch to be mobile friendly. Any website under allegheny.edu should work on any device, from mobile to desktop.

So, we’re excited to announce our latest progress in meeting our goal: My Allegheny. On first glance, you might take a look and think it basically looks the same (on desktop at least). This is intentional. Instead of completely redesigning the website like we did for the home page, we looked to keep the fairly new design of My Allegheny, and add support for smaller devices.

Part of our mobile first philosophy is that websites viewed on mobile devices should not be compromised in its usability, features, or design. That was our main concern with how the My Allegheny functioned (or didn’t function) on mobile devices before. The only feature that was present was the news feed, which didn’t make sense for the majority of users that used the site in many other ways.

So, again, this is another preview to what we have in store this year for the entirety of the websites. In the mean time, let us know what you think of the newest change to My Allegheny by clicking on the following button and filling out the form.

Thanks!

Thank you to everyone in the campus community who submitted feedback about the newly redesigned Allegheny College home page.

Feedback Summary, by percentage:
[chart data=”76,11,13″ labels=”Positive|Neutral|Negative” colors=”00a651|feda48|b0232a” type=”pie”]

Below, you will answers to some common questions that we received and a log of changes that we made in response to your feedback.

Frequently Asked Questions

It would be nice to highlight (event / program / initiative) in the large slider at the top of the page.

You’re reading our minds. :)

That’s exactly the idea behind the sliders: a flexible space in which we can highlight the latest and greatest happenings in the classroom, accolades the college receives, student research accomplishments, athletic achievements, alumni achievements, visit opportunities for prospective students, etc.

With the use of great photography and bold, typically non-Allegheny colors (pink and orange and green), we have an opportunity to shine a great spotlight on our awesome community.

The new home page highlights the (department name) Department. Will it always be something from that one department?

Great question. The “spotlight” will change each week. Our vision for that spot is that it will often feature an overview of a particular academic department, but we will also be able to highlight other initiatives and achievements (research accomplishments, interdisciplinary programs, etc.).

Can you add (name of website) to the A-to-Z list of campus resources on the Resources website?

As a result of some great help from the community, we added the following links on Thursday April 4th:

• Backgrounds
• Bookstore
• Faculty Handbook
• Help Desk
• Honor Code
• Informer
• President’s Office
• Provost, Dean of the College
• Report a Concern
• Scheduler
• Statement of Community
• Strategic Plan
• Student Disability Services
• Wufoo

Why doesn’t the home page have a link for (current student resource)?

On-campus audiences (current students, faculty, administrators, and staff) should think of My Allegheny as their home page.

The primary audiences for the main home page at allegheny.edu are those that are outside of campus: prospective students & their families, prospective faculty & staff, interested community members, etc.

Given that philosophy, the home page is intentionally an overview, rather than a comprehensive directory, with its simplified navigation acting as a hub to get to other audience-specific “home pages”:

• My Allegheny, the very first link on the page, directing on-campus users to their most relevant needs
• Admissions, for prospective students
• Academics, for anyone interested in learning more about our programs
• Alumni, directing alums to Alumni Affairs which itself is a hub to a robust collection of resources for our proud alumni
• etc.

Regarding the “Photo of the Week”… Can it link to more information about the photo? Can people submit photos for consideration?

Yes and yes.

We’re changing the Photo of the Week on the home page to link to more explanation about the particular photo and also a gallery of past “winners”.

The Photo of the Week on the home page will actually be the same photo that we feature as our “Photo Friday” winner on Facebook and Twitter. (Just another way we’re trying to bridge the gap between different resources)

Welcome!

We’re excited to share with you the next evolution of Allegheny’s web site. The emphasis has been on making a site that is not only attractive but more easily navigable, scalable to all of the different devices that people use to connect to the web, and accessible to all. In brief points below, we’ll explain what problems we solved, why this matters, and why we believe this new home page design paves the way for even more excitement in the future.

Although the redesign is mainly confined to the college’s home page for now, we’ll be bringing the rest of our sites into the redesign over the summer. This is simply Phase 1 of an ongoing project, with the site continuing to evolve in the months ahead as we respond to opportunities to make it even better.

Thank you for sharing your feedback with us, and we hope you’re as excited about the redesign as we are.

Guiding Principles

1. Content First! Everything started with content.

We did an extensive audit of the content on the existing home page, traffic across all of Allegheny’s websites, heat-mapping on the home page (we can see exactly where users click), terms that users search for when using our on-site search feature, and then matched that data to our college-wide communications goals and to the Strategic Plan. It was only after we were satisfied with what the content needed to be that we moved on to wireframes and visual design.

This led to…

2. Simplified Navigation

Then…
The old 2007-era home page had over 150 links and no clear hierarchy. In plain English: users were overwhelmed with choices and didn’t know where to click.

In the new design…

We have clear top-level choices:

• Admissions
• Academics
• About
• Athletics
• Alumni

At the very top of the site, we have links that will get you literally everywhere else on our site:

• My Allegheny (the “home page” for on-campus audiences)
• an A-to-Z listing of everything at Allegheny (if we left anything out, let us know)
• a list of administrative offices
• a list of student resources
• and, finally, a search box.

Best of all, once this design is rolled out to the rest of the website, regardless of what site you’re on, those two main levels of navigation will be persistent across the whole of Allegheny’s web presence.

3. Design for Mobile First

Traffic to websites via mobile devices (smart phones, tablets, etc.) is growing rapidly across the internet in general, and even more so across higher ed. Our design process started with mobile-sized screens and moved up from there, utilizing modern web technologies (such as Responsive Web Design) to ensure that the website would scale in order to be usable on any modern web-enabled device. This enabled us to design not just for the specific devices of today, but to design for what the web will be. From your new phone to your new car with a touchscreen, to your HD TV, this new design should scale appropriately across all platforms, providing a full-featured experience across the board.

4. Accessibility

We’re also very concerned about optimizing our website for users with disabilities. Gone are elements of the page that rely on images-only for conveying a message. Even the large “sliders” at the top of the new home page are now plain text overlaid on top of a photo, making the text readable by screen readers and other assistive technologies.

5. Put our users first and reorganize content based on them.

In the past, we have tended to organize our web content based on our organizational chart. The problem there is that a new visitor to Allegheny’s website doesn’t know a thing about our internal structure. For example, gone is the “Administration” link, replaced by more easily discoverable links to a more robust Resources website.

What’s Next?

First of all, we’re excited to hear your feedback!

Moving forward, we will…

Roll out this design to all official Allegheny sites.

Academic departments, administrative offices, and everyone in between can benefit from the above enhancements — and more that are on the way. We will roll out the new design to all sites that are in our WordPress content management system over the summer of 2013.

Continue to develop supporting content and websites.

As we said at the top of this page, this is simply Phase 1, the cornerstone of a more awesome future web presence. A few examples…

We have a ton of opportunities to further develop the About Allegheny site, especially in light of our upcoming Bicentennial. We want the Resources site to continue to evolve as well. We have a long list of sites that can benefit from the more robust platform that a design like this provides. (Seriously. You should see our list.)

Continue to iterate on all of the above.

Perhaps the biggest change for those of us “behind the curtain” of this redesign is the fact that this introduces a more flexible framework on which to build new cool things. We’ve been very limited to this point by old visual design and old code. We have opportunities now to be more flexible, more innovative, and more bold — which all supports the goal of meeting the needs of our prospective and current students and their families. (And the cool thing is, when you do that, all other audiences benefit too!)

Finally…

This type of project can’t be done by just Jesse Lavery and Sean O’Connor. This was the collective work of Web Communications, the Communications Leadership Team, and countless others across campus who have offered their expertise, input, feedback, and support.

Thank you all!

As many of Allegheny College’s Web Editors are aware of, there is a Web Editors Guide on the Web Communications website created as a guide for running individual sites, but since it’s a fairly new addition to the site, not every Editor know that it’s out there. There are also new features added to the website that are made available to all Editors, but, again, there’s the challenge of making people aware of what is available to them.  To solve this, there are several new resources being made available to Editors:

Web Style Guide

The new Web Style Guide is a page showcasing what an Allegheny WordPress page looks like in function, and shows what the standard stylings and features are. This is a great place to see what features have been made available to Editors, like content boxes, buttons, columns, and image galleries.

Web Editor Card

The freshly printed tent cards serve as a quick reference for important web addresses relevant to Editors, so there’s never any question about where you can go for support. These are printed and available, just email web@allegheny.edu and ask for a card.

Dashboard Editor Help

Editors can now easily access all forms of support from inside the WordPress dashboard through the Editor Help button in the navigation. From the Editor Help page, Editors can quickly access important resources relevant to working in WordPress:  the Editor Guide, Web Style Guide, the Web Communications website, and contact information.

The ultimate goal for all of these features is to improve Allegheny’s web presence by giving content creators and Web Editors the tools they need to improve their own department’s websites. If you have any questions about any of these new features, let me and Jesse know at our new email address at web@allegheny.edu.