YEAR
2021-22
DESCRIPTION
Starting in 2021, Gordon College pursued an initiation to completely overhaul its graduate program content to improve SEO and increase overall reach, impressions, and conversions.
MY ROLE
+ ux / ui design
+ front-end development
+ visual asset creation
PROGRAMS
Over the past few years, Gordon College has been transitioning its graduate program recruitment strategy from traditional marketing tactics to a primarily digital approach. This involves increased utilization of social media, landing pages, and web-based content. As a result, there is a need for a more robust web presence for the Graduate Programs. The project involved overhauling the content and design of the Graduate Program web pages, focusing on SEO-conscious copy and enhanced user interface designs that aligns with Gordon's overall website aesthetic.
The goal of the project is to:
+ Refine the user experience
+ Improve accessibility
+ Enhance functionality of the website to support new content
It also aims to conduct a detailed audit of the old user flow and content to identify areas of improvement in the user experience. Additionally, the visual brand of all graduate program pages needs to align with the rest of the College brand.
Since this project is in collaboration with an SEO strategist, the primary focus of our team's research and planning process is the improvement of the interface design. Highlighted below are key stages of our process including the research and planning, challenges we faced, how we solved them, and our results.
PROGRAMS USED: XD, HTML, CSS
Given the continuous evolution of Gordon College's website's visual style, this project provides an opportunity to integrate new visual styles and introduce updated components. Through an audit, structural adjustments were identified and made to the site map to accommodate new content and improve user flow. Extensive discussions were held with department heads to ensure alignment with their recruitment goals.
Three primary wireframes were created as templates for the three categories of pages: primary graduate program landing page, umbrella page for broad graduate departments, and specific program pages. Additional child pages were grouped under pre-existing global styles.
The nature of the updated content presented a UI challenge in creating pages that balance SEO requirements with digestibility for viewers.
Solution: strategic division of sections, colored/imaged backgrounds as visual dividers, call-to-action buttons, and the use of icons and infographics for improved accessibility.
Number of pages requiring updates and reshuffling grew exponentially due to the volume of information for each program.
Solution: to ensure consistency, a new landing page was created with streamlined information and clear CTA's. The site map was also overhauled and reorganized.
The updated components integrate styles already employed in other parts of the Gordon College site. Rounded buttons and white information tiles were chosen for their cleaner and modern aesthetic. The wave divider line reflects the updated Gordon brand message, emphasizing its coastal location.
The program page headers play a crucial role in setting the aesthetic tone and determining the first impression for users. Collaborating with the college photographer, imagery-driven headers with clear program headings and visible CTA buttons were created.
Similar to the headers, the updated footer design features photography as a primary element while ensuring a clear CTA message is communicated.
The landing and umbrella pages act as clutter-free directories for program pages. The header style is consistent with other major landing pages on the Gordon College site. A branding statement introduces prospective students to the graduate school's purpose. Program tiles include compelling imagery and key highlights to provide a clear and concise understanding of each program. Quick links to different tracks students can pursue are also provided.
Structuring the program pages posed a significant challenge due to the text-heavy nature and SEO goals. Efforts were made to ensure the content is digestible through the use of section breaks, images, icons, highlighted headers, and clear calls-to-action throughout the pages.
In total, our team was able to make extensive content and visual overhauls across five programs and 15+ program pages. These improvements have not only helped the program streamline their recruiting methods, but have also given Gordon's graduate programs a new and refreshed visual style that has been translated across all of their other recruiting materials.