YEAR
2022
DESCRIPTION
New and improved interface design for the primary entrance point to the Gordon College digital experience—the website's home page. This was needed to match the updated brand messaging and improve user experience.
MY ROLE
+ ux / ui design
PROGRAMS
After utilizing the same homepage/academic page design for years and going through several rounds of college-wide message rebranding, our team decided during the fall of 2021 that these key marketing pages were due for an upgrade. With careful evaluation of the current site’s strengths and weaknesses, we came up with some goals for the pages:
+ Update interface design to align with current design trends while supporting new brand messaging
+ Improve user experience by reimagining user flow and key components
+ Lean into the use of refreshed color palette and wave page dividers that have been utilized in other marketing materials
Featured below is the detailed exploration of a new homepage design that considers the broad marketing strategy, prospective perception research, and internally design system updates.
In 2021, Gordon College collaborated with an external firm to conduct detailed perception research of the College’s campus culture and prospective student persona. Here are a few major takeaways from the report:
1. The primary perceived personalities of the college are 1. compassion/supportiveness/altruism, 2. exploration/discovery/adventure, and 3. achievement.
2. The College’s recent trajectory of marketing materials departs from the top two personalities and leans too heavily on the third.
3. Gordon’s stance on major cultural questions is usually neutral, which poses a challenge for prospective students to interpret.
Based on these takeaways, our team concluded that Gordon needs to pivot its marketing content to lean heavily toward this idea of exploration with compassion, and framing Gordon as a place where students can ask the hard questions and find their true purpose by providing the right support.
+ Name: Sarah Olsen
+ Hometown: Nashua, New Hampshire
+ Hobbies: hiking, skiing, reading, coffee
+ Religious affiliation: Non-denominational Christian
Sarah is excited about going to college to make new friends and discover where she belongs. She wants to go somewhere that reflects her beliefs but also challenges her to dissect the foundations of those beliefs. Her love for the outdoors is a reflection of her upbringing in New Hampshire. Being surrounded by the mountains and living near the coast is what initially drew her interest to Gordon. Having worked with children in her church growing up, she wants to pursue a major in Education and a minor in Psychology. She is interested in joining the worship team as well as work as a barista in the on-campus cafe.
Transitioning header texts from a smaller Gotham Bold to a larger Gotham Black helps with legibility and allows for stronger call-out texts. This will be a simple pivot that allows the website to feel a bit more friendly and welcoming.
Light cyan highlight allows certain concepts to be emphasized and gives assists with visual hierarchy.
The header of the page plays a key role in making a first impression on the user, giving a sense of welcoming, a quick idea of the school’s mission, and give clear pathways for the next best courses of action. The current home page, while having some strengths, may confuse viewers with its unclear action buttons and multitude of header menu items. It also reflects an older homepage design style due for an update.
The action buttons on the home page were one of the key problems that our team diagnosed early on in our research. With icons as the stand-alone feature of the buttons, it didn't give clear indicators that it is a clickable item. Below are a couple of explorations of improved visual indicators of the button's function.
+ Clear button outlines using a drop shadow
+ Updated hover interactions
+ Emphasized "Apply" button
+ Outlined buttons
+ Updated hover interactions
+ Horizontal layout more reminiscent of traditional button
+ Emphasized "Apply" button
This design reflects the postcard style of the options 2 and 3 in the header updates. Large photography feels bold and allows for maximum utilization of space.
This design brings a bit more energetic/lively vibe to the page, suggesting that learning here is engaging and fun. Collage-style imagery reflects the explorative persona of the school and its students.
This design utilizes a bit more organic shapes with curved corners and a long wave divider. Light cyan drop box on photos is complimentary of the header style.
The next section sitting just below the fold was defined as "The Feature section", which was designed to be a more in-depth introduction to Gordon's mission. The feature section needed to feel concise yet informative. Key photography will provide users with the feeling of being a student at Gordon. The wave motif and highlighted text is brought into this section for brand consistency.
Parallel to the header update, the stats reflect the transition in using Gotham Black and using a light cyan drop shape. A smaller percentage sign helps emphasize the number.
This is an example of what a brand new homepage could look like incorporating all the new design features featured above.
This project allowed me to improve upon something of high importance for Gordon College. Redesigning the home page took a lot of research, careful consideration of its primary audience, and time. This project taught me a lot about patience and how to sit with a product in order to make intentional and purposeful improvements.
Gordon College has since updated the design of the homepage during its major rebranding in 2023 and utilized several design suggestions highlighted in this case study.