My Page for 6,000 Students Across 5 Campuses at VID

Frontkom is a digital agency that specializes in the educational sector, building digital solutions for universities and similar institutions.

Now they have built a "My Page" self service solution with Enonic, React, and TypeScript for VID students. VID is a specialized university offering 60 study programs across bachelor's, master's, and PhD levels. The university serves 6,000 students and employs 600 staff members across five physical campuses and one virtual.

Frontkom recently held a presentation at Enonic's offices, where Senior Advisor Per André Rønsen and developer Zahar Pyrohov walked us through the solution.

What the Students Need

Reflecting on student life, there are many considerations when starting at a new campus. At VID, students highlighted several issues. 

First, there is platform overload. Students are inundated with various platforms for information distribution, including the VID portal, Canvas, the messaging platform, TimeEdit for schedules, Nettskjema for forms, Inspera, ServicePortalen, and Sikresiden. This multitude of platforms can be overwhelming and unappealing for students to navigate.

Second, there is non-relevant information. Students face an overload of information, much of which does not pertain to them individually. Addressing this issue involves filtering out unnecessary content to make relevant information more accessible.

Lastly, there is the problem of poor timing. Students require timely updates on critical matters such as internships and exams. The timing of when this information is presented is crucial, yet challenging to manage across the various platforms.

The Idea for a "My Page"

The staff at VID came up with an innovative solution to address the challenges faced by students: VID "My Page". This platform aims to simplify student life by consolidating information and streamlining access.

The project goal was to assist students during their onboarding process and provide a comprehensive tool throughout their time at VID. The VID My Page integrates information from all existing platforms into one centralized location, eliminating the need for multiple logins.

Additionally, the system offers personalization by filtering information based on each student's study program, year of study, and campus location, whether they are in Bergen, Oslo, or elsewhere. This tailored approach ensures that students receive relevant information, making their academic experience more manageable and efficient.

What VID Wanted

To build the VID My Page, Frontkom first received client specifications, which were succinctly presented in a small slide deck. As a technical team, Frontkom appreciated this approach, as it provided clear goals while allowing them to be involved in the implementation details.

The specifications included key decisions made at the institutional level to ensure consistency across various projects. These included using Enonic XP as the base platform, a strategic and mature choice that facilitated streamlined technical integration.

Security and compliance were prioritized, along with a mobile-first design approach to ensure accessibility. The client emphasized the importance of a user-friendly system with intuitive navigation and easy-to-understand interfaces. They also provided high-resolution wireframes and mock-ups, which were invaluable for understanding the project's direction from the outset.

Architecture

VID My Page's architecture involved a straightforward app that communicated with multiple data sources. Frontkom's process began with internal meetings to determine the best architectural approach. The initial diagram from these meetings indicated various data sources represented by top-level "bottles."

The first approach considered was treating Enonic XP as just another data source alongside FEIDE for authentication, FS for student information, TimeEdit for scheduling, Canvas for inbox messages, etc. This method would include a middle integration layer (REST API) and a lightweight front-end. This approach was viable because similar integrations had been successfully implemented for other universities, albeit not on XP.

The second approach was more Enonic-centric, utilizing Enonic XP as the application platform in a headless manner. This aligned better with VID University's digital strategy. The team’s experience with building numerous Next.js applications made it a practical choice for the front-end.

The third option involved a full-stack implementation within Enonic XP. This was appealing because Enonic XP offered comprehensive out-of-the-box functionality, simplifying the process by eliminating the need for additional servers and DevOps processes.

Ultimately, the decision was between these three approaches, each with its advantages based on previous integrations, alignment with digital strategy, and simplicity of implementation.

Tsup

Thomas Sigdestad, the CTO of Enonic, introduced a fourth architectural approach, based on Tsup, a simple and faste way to bundle TypeScript libraries. This was a hybrid of the second and third approaches, and as a compromise it offered several advantages.

The primary benefit from a front-end perspective was significantly faster hot reloading, especially when using TypeScript—up to 15 times faster. This approach also allowed handling much of the logic in Next.js, making authentication more centralized and manageable.

Enonic's proactive guidance and support in this process were greatly appreciated, a level of assistance not often seen with other open-source CMS platforms. This collaborative approach ultimately guided the decision and implementation, leveraging the strengths of both Enonic XP and Next.js while ensuring efficiency and ease of development.

Front-end: How It Looks

The development process for VID My Page advanced smoothly with support from Enonic, allowing for rapid progress. Concurrently, the team began prototyping using Vercel for hosting. This approach facilitated quick iterations on UX and UI, enabling real-time testing and adjustments based on user feedback. After refining the prototypes, the team integrated the final design into Enonic.

The development strategy with the client emphasized prioritizing the most critical components first, particularly the integrations. This phased approach ensured that essential functionalities were addressed before expanding further.

The VID My Page dashboard offers a user-friendly interface designed to streamline student activities. It starts with a personalized greeting, "Good afternoon, Martin Middle," tailored for a typical student who has been at VID for a couple of years. The main dashboard features the "Top Tasks," which are the most frequently used tools and links, along with a to-do list presented in an accordion format for easy management.

Developers played a significant role in shaping the UX, bringing a practical and efficient approach to the design. This hands-on involvement allowed them to fine-tune the interface, ensuring it was straightforward and functional.

Scrolling down, users find their personalized schedule for the day, sourced from TimeEdit, and their inbox, fetched from Canvas. Events and news specific to each campus are managed by editors through Content Studio, allowing for targeted information distribution. The dashboard also includes a menu with various options, efficiently handled by Content Studio, and a section for all the essential tools.

Special attention was given to the onboarding process for first-time users, addressing potential issues such as delays in user authentication activation. This careful consideration ensured a smooth initial experience for new students.

As for onboarding, to ensure a smooth process here an interactive wizard was developed. When students access the platform for the first time, this wizard guides them through the setup, providing only the most essential information. However, it became evident that a substantial amount of information needed to be provided before users could fully access the dashboard. This step-by-step approach helped streamline the initial experience and ensured that students had all the necessary details configured to make the most of the platform from the start.

User Feedback

Upon unveiling the VID My Page to users and following the official launch, the feedback was overwhelmingly positive. The client expressed great satisfaction and relief at the platform's reception. Students appreciated the consolidation of multiple platforms into one, with comments such as, "This is a tool we have missed," highlighting the platform's usefulness and convenience.

One notable feature was the integrated authentication system. When students logged into My Page, they were automatically logged into several other platforms as well, allowing seamless access even when navigating to external sites.

At VID, specific feedback included praise for Enonic's access control and the ease of use of Content Studio. Editors found the platform intuitive, requiring minimal training due to well-designed templates.

VID My Page is now live at minside.vid.no, having launched recently without any reported issues. It is hosted on Enonic, and the overall response has been very positive.

FEIDE Integration

Now, for the more technical stuff.

The first integration was with FEIDE (secure login and data sharing solution in education and research), using the OIDC ID provider from Enonic Market. The process of implementing authorization through FEIDE was quick and met all security requirements. The main tasks involved correctly configuring the provider, adjusting the service on the FEIDE side, and setting appropriate permissions for the content.

From FEIDE, Frontkom received basic data such as the name and email of students. However, the most critical attribute provided by FEIDE is the unique identifier. This identifier is guaranteed to be unique across the entire educational sector, making it an essential element for our integration.

Felles Studentsystem (Common Student System)

The second integration was with FS (Felles Studentsystem), a central student information system for Norwegian higher education. For this integration, Frontkom used the GraphQL API. 

Through this integration, Frontkom received comprehensive data, including student start dates, program details, group and class information, and course enrollments. Additionally, FS provided detailed data about all programs, courses, and campuses at VID. 

To identify students, Frontkom used the unique identifier attribute from FEIDE, which proved to be very helpful. This integration allowed Frontkom to pull all necessary student information seamlessly, ensuring accurate and up-to-date data across VID MyPage.

Other APIs

Next, Frontkom integrated with TimeEdit, using a SOAP-based API to save unique individual schedules for each student. For identification, Frontkom used attributes from FEIDE.

Similarly, for Canvas, Frontkom used the REST API to receive messages and notifications from staff. 

Instead of direct authorization for each resource, Frontkom utilized FEIDE. This approach allowed users to gain simultaneous access to both TimeEdit and Canvas without requiring additional logins.

Using Enonic

Frontkom utilized the standard features of Enonic for the VID My Page project, including pages, parts, layouts, templates, services, and tasks. They also leveraged Enonic's robust content management capabilities, which provided the client with the flexibility to create and customize site content and structure as needed.

Enonic's features included automatic menu generation, scheduled content publishing, and rich text areas, enabling a WYSIWYG (What You See Is What You Get) experience for editors. This user-friendly interface required minimal training, a point highlighted by positive feedback from the editors at VID.

Personalization

As established at the beginning, the main goal of the VID My Page project was to organize information for students effectively. To achieve this, every content type—whether tasks, news, articles, events, landing pages, school information, or administrator messages—was segmented based on groups of students.

Segmentation was determined by various factors, including campus, year of study, programs, courses, classes, and groups. This approach ensured that each student received relevant and tailored information, enhancing their overall experience and engagement with the platform.

Challenges

During the development of VID MyPage, Frontkom encountered several challenges. Four key challenges stood out:

1. Slow Page Loading: Initially, pages loaded slowly because the system processed data in real-time, causing delays of several seconds. Frontkom addressed this by implementing lazy loading and starting background processes for future student entries.
2. Personalizing Content: Personalizing content for students required substantial server resources, leading to delays in page loading. The solution was to use the Enonic cache library to store menus, which reduced the load on the server and improved performance.
3. Instability with GraphiQL for FS: The GraphiQL API for FS was still under testing and improvement, causing instability due to ongoing changes. Frontkom mitigated this issue by storing recent user data in Enonic as a cache, providing a more stable and reliable data retrieval process.
4. Personalized Data for Staff: While staff could use FEIDE for authorization to MyPage, FS did not store their data. Frontkom resolved this by utilizing the Groups API from Sikt, enabling personalized data access for staff members.

These solutions helped to overcome the challenges, ensuring a more efficient and reliable platform for both students and staff at VID.

Future Technical Development

Frontkom plans to create an English version of the VID My Page portal. This will be made possible using the layers functionality in Content Studio, which supports multiple languages by allowing the creation of language layers for projects.

Additionally, Frontkom aims to improve communication with students by implementing push notifications. The initial steps for this have already been taken, as the project was built as a progressive web application.

Lastly, Frontkom intends to introduce new features to enhance student engagement. These features will include voting systems, surveys, and feedback mechanisms. The team is currently working on integrating the Nettskjema API, a tool that provides forms and surveys, to facilitate these new functionalities.