How It’s Made: Transforming a Community College Website

Posted: September 1, 2016

SHARE:

After months of preparation, College of The Albemarle’s new website has launched! Congratulations to everyone on campus who has been involved with this project. It’s exciting to see the results of all the hard work out in the public for everyone to enjoy.

“Everyone at COA is very excited about our new website. We hear over and over how intuitive it is and how much easier it is to find what you need. We feel the collaboration on the navigation by faculty, staff and students with VisionPoint was key to the response we’ve received. And, the design is clean, inviting and definitely reinforces our new brand.”

– Patrick Detwiler, Creative Director at College of The Albemarle 

As a web developer, I wanted to give my version of Discovery Channel’s How It’s Made: College of The Albemarle edition. Brace yourself for the acronyms.

Choosing the Technology

We’ll start with the selection of the right Content Management System (CMS). At the beginning of our engagement with COA, we worked with the College to determine which CMS was right for their needs. After weighing all the pros and cons, we decided on WordPress. The extensive plugin ecosystem, multisite capabilities, and handling of workflows / governance were all factors, but at the end of the day it came down to ease of use. COA’s existing familiarity and comfort level with WordPress pushed it ahead of the many other viable options.

For our WordPress theme, we used a custom version of the starter theme, Underscores. This starter theme follows best practices and is extremely lightweight, since it only includes the essentials. We also incorporated the Bootstrap frontend framework into our theme, which gives content contributors more flexibility when using the WYSIWYG to add different variations of content (e.g. accordions, buttons, forms). A number of plugins were utilized such as The Events Calendar and Advanced Custom Fields. Another key part of our development workflow was the use of SASS to enhance basic CSS and Git for version control.

COA wanted a cutting edge site that would reflect the quality and the excitement of the educational experience at their school. While aiming for a unique and memorable website, we couldn’t forget about the other huge factor, usability. The trade-offs between these two concepts is always a balancing act.

When thinking about usability in regards to higher ed websites, I think of my grandmother… (stay with me, I promise this is relevant). For almost her entire life, she has worked as a guidance counselor and freelance mentor for students researching, selecting, and applying for college. She also isn’t very web-savvy.  As we go through the process of building a higher ed website, I picture my grandmother sitting at her computer trying to navigate and find the specific information she needs to help inform one of her students. I am happy to say that COA’s newly launched site received my grandmother’s full seal of approval.

Creating the Structure and Visuals

So, how did we achieve this balance of cutting edge yet usable? First, here’s a quick overview of everything that was created for the new website:

As you can see, there was plenty of content to work with. It was all about refining the details and picking the right places to “show off.” One example is the subtle page load animations on the inner page template. Usually this is intentionally the most basic template on any site. Sub-navigation on the left, related links and other promos on the right, headings, a breadcrumb–you get the picture. We decided to add a small touch where the series of polygons (a zoomed-in version of the logo) fade in over the blue background. This effect helps these pages come to life and not appear static, but is subtle enough that it doesn’t distract the user from what is most important–the content. For those interested, we used an SVG animation to achieve this effect. The code below shows how this is done:

See the Pen SVG Polygon Color Animation by Steven Cobb (@sjcobb) on CodePen.

Educating Users on the Difference Between Credit and Non-Credit Programs

Demonstrating and teaching the difference between credit and non-credit programs is a challenge for many community colleges. This came up again with COA and we were ready for the challenge. If you look at the redesigned programs and classes page, the dichotomy between the two is clear and there is a short snippet of content under each to further explain the difference. We then took a “show me, don’t tell me” approach by featuring four examples of each type of program / class.

Once you decide on credit or non-credit, the next challenge is organizing the course listing. Here, it’s important to give users multiple ways to access the information they’re seeking. We did this by having credit programs displayed alphabetically and by area of interest, while non-credit classes are displayed alphabetically and by campus. When you click into a program or class, you can still navigate to others by scrolling to the related offerings section at the bottom of the page. We used the Advanced Custom Fields plugin to create these relationships between credit programs, non-credit classes, and faculty members. The PDF Embedder plugin was also important for embedding documents from the course catalog.

Why We Love It

As you may have gathered, these types of challenges are what get me excited about being a web developer. Every day I get to work on interesting projects with dedicated clients and team members. If you want to learn more about how VisionPoint approaches website redesigns, leave a comment below or contact us with your questions and concerns!