Creating the Vermont State University website was, and continues to be, an exciting challenge. In a decision to move development of the site to our internal team, I was tasked with writing the code and developing the features needed to market Vermont State University to potential students as well as keep the broader community engaged with us.

One important goal from the start of the project was to make sure everything was accessible as possible. That meant checking for proper focus states when navigating by keyboard, writing alt text into images, checking for color contrast, and being sure to add expected features such as skip links.

The website also needed to be extremely easy to operate but give our editors the flexibility to display content how they wanted. This led to us selecting the built-in WordPress Gutenberg editor as the base of our website. I then created custom blocks to extend our capabilities and allow for some stunning page designs. Gutenberg allows editors to see exactly what they are working with while editing, rather than having to fill in a bunch of fields and continuously preview the page.

While the website is continuously evolving with new features slated for delivery each month, there are a number of noteworthy features to highlight:

Directory

This searchable and filterable directory bring together the contact information across the multiple locations at Vermont State University making it easy to find out who to reach out to and how.

Program Finder

With so many programs and locations at Vermont State University, we needed a way to quickly filter through them and display relevant information. Standard site search wasn’t going to be easy enough for our prospective students so I built out a custom program finder that met our needs.

Program Affordability and Costs

Because of the wide variety of tuition rates offered to students, it can sometimes be challenging to figure out what rates apply to a specific program. Knowing this, I designed and developed an “Affordability and Costs” tab that would appear on every program page and display the rates appropriate for that program. Staff in admissions frequently use the information when working with prospective students and applicants because of how useful it is.

Stellar Mobile Design

Because of how many people visit websites on devices with smaller screens, it is important to do more than just “make sure it works”. The website design thoughtfully considers how to best present information to mobile visitors without sacrificing any of the content.

Tags: , ,