Evolving Web worked with Princeton University to build a new website—Princeton International—that showcases and encourages students to explore international learning opportunities available through the university. Evolving Web collaborated with the university to define the user needs, designed and built the website in Drupal, created an automated synchronization to display international programs on the website, and created an interactive feature for students to build their own learning itineraries.
Drupal's capabilities as a Content Hub make it easy for content editors to create and manage data. Drupal's ability to display courses, news, events, member directories, and other external data minimizes the need for content editors to manually update sites and ensure users always see the most relevant and useful information. Reusable themes, modules, and UI patterns create a consistent experience across all pages, while Layout Builder in Drupal 9 Core provides flexibility in design and layout.
Goals
The Princeton International website was conceived as the main source of information and resources for students and researchers interested in international programs and initiatives.
Princeton wanted this new website to be clean, modern, and engaging. It needed to be a helpful resource for anyone in the Princeton community, including faculty, graduate and post-graduate students and alumni, but its main target was to be undergraduate students and administrators who assist them with their travel plans.
- The goal was to enable users to:
- Discover opportunities to learn and research abroad
- Plan an academic curriculum around international study
- Learn about Princeton's academic partnerships
- Get information about funding opportunities for students and faculty
- Review Princeton's global safety and security policies
- Know more about Princeton's international community
Challenges
This project presented some technical and user-experience challenges from the outset. These challenges included:
- Data-driven interactivity - We wanted users to be able to create their learning itineraries using an interactive tool with minimum friction and instant results.
- Data synchronization - Pulling the latest data to the new website, such as information about programs, news, international experiences, and country risk levels, added complexity to the project due to the diversity of external data sources.
- Secure personalization - Users needed to be able to plan their study itinerary, including curriculum requirements, and share this information while preserving
Solutions
Evolving Web's design and development work for Princeton International included:
- Travel websites inspire the website's design patterns, making the experience more familiar to young people with a desire to study abroad.
- Orange, Princeton's school colour, is prominent in the photography and art direction, and is a way to represent energy, movement, vitality, speed, travel, and the Earth.
- Topography maps serve as a major visual concept, being a metaphor for the depth of the topics, cultures, and learning covered during a Princeton education.
- Use of facets in the search interface provide users with more relevant and engaging information in their search results.
- Conspicuous calls to action (CTAs) on the homepage, directing visitors according to the tasks they're trying to accomplish.
- The website was built on Drupal 9, leveraging the platform's flexibility and easy content updates.
- Content synchronization is achieved through custom Drupal modules, enabling multi-source data aggregation of news, course information, country risk levels and more, while ensuring granular personalization in Drupal.
- One of the project's most innovative features is the Global Arc, an interactive, intuitive itinerary-building interface where students can select their international programs. The Global Arc provides users with:
- Global search for international programs and on-campus courses, based on themes, interests, and location
- Program and course descriptions and application links
- Option to add to their planning section and prioritize curriculum choices (for authenticated users)
- A detailed timeline visualization of desired courses according to the student's year (first year, sophomore, junior, and senior
- Download personal program in PDF or text to be shared with advisers
- Single sign-on (SSO) integration with Princeton's CAS
- Integration of Course & Programs content from Princeton's Global Programs System (GPS) and the Princeton Course Catalogue.
Result
Evolving Web built 29 landing pages and 19 components for Princeton International. The result is a clean, easy-to-use website that opens opportunities to students who may not typically seek international studies or feel less confident in planning their curriculum.
Through the Global Arc, users share their learning trajectories and allow advisers to serve students more effectively. This feature meets the client's needs of making students more self-sufficient, enabling them to explore their options before reaching out to the university for support.
Source:
Evolving Web built Global Arc's front-end with React, preventing slowness caused by heavy database requests. This hybrid approach between JavaScript and Drupal is ideal for managing large amounts of content while focusing on interaction design.
