Building the new web service for secondary education provider Gradia
Education
Nominee
Case description
Gradia is an educational consortium of the city of Jyväskylä in Finland. The consortium consists of three Upper Secondary Schools as well as two Vocational Institutes. Courses and degrees are offered to students of all ages. Gradia was formed in the beginning of 2018 and has resulted in many changes. In addition to organisational restructuring, legislation and funding reforms in vocational education and training over the past few years have also brought many changes for Gradia.As part of this renewal process their whole web presence was put under scrutiny and as a result our team was taken on to create a new site. The case was challenging as there is a wide array of different educational offerings and they are provided by several different institutions that all have different brands. Therefore gathering them all under a unified concept in order to build the website was an interesting challenge.
Case goals and results
The goal of the project was to design and implement a unified, on-brand web service for the newly established consortium. The service needed to be easy-to-use and intuitive, where sharing and finding relevant information would be effortless.The web service also needed to present the education offering the Gradia has, and provide a glimpse of the whole offering for the site visitor. The third requirement was that the site would enhance the marketing and sales of education activities and trainings.
The first prototype was designed for mobile and from there we took it back to the desktop. It was clear from the start that we are doing this for today’s users.
The whole project team worked hard to meet the deadline and the site was launched just in time for Jyväskylä Educational Consortium to transform into Gradia in the beginning of 2018. The new gradia.fi met the requirements set in the initial planning phase: it had a focus in marketing various courses and UI solutions were built so that they guide the user to find the course they are interested in, no matter who the providing institution or type of education. The user is offered various paths to find what they are looking for, starting from their field of expertise or life situation.
Close co-operation and active communication with the client via Slack kept development efficient – iteration needs were at a minimum and when changes were needed, decision making was fast and straightforward. The whole project team was committed to working with agile methods, which meant that the sprint meetings and backlog prioritization were a crucial part of keeping the project on track and giving a view to the real time status of the project progress.
Challenges
The main challenges were creating content types which would be easy to use and still provided the users with tools to create versatile and visually appealing pages.The first solution was using parameterized Views with Paragraphs, i.e. allowing administrators to freely place listings of various types of content around the page with minimal hassle. This basically means that the user can place different lists of content and add several additional filters to the listing to show just the right content they want.
Fulfilling the initial requirement of block placement with Paragraphs caused some new problems - how to get the desired content without having multiple near-identical Paragraph types or views (e.g. for a list of courses related to a specific field of study)? What if the View has exposed filters?
The solution was to create a few Paragraph types that would be replaced with their corresponding views when rendered. These Paragraphs contained a field for each parameter that the corresponding view needed (e.g. a taxonomy term reference for the field of study), which would be passed to the view as a contextual filter value. This allowed the creation of highly dynamic pages with a small number of building blocks. The dynamic nature was further reinforced when exposed filters came to play: the administrator could create a course search view and preselect values for some filters (e.g. the campus where the course is held); the end user was then prevented from changing those values, but allowed to change any that the administrator had not selected a value for. This allowed dozens of different combinations of the same course search view for specific landing pages ("Courses starting in Jyväskylä", "Courses related to Music starting in Hämeenlinna" etc.), as well as a course search view with which the user could look for anything they wanted (when nothing was preselected).
Another challenge was getting course data from an external system and making it compatible with Drupal. The courses lived in a third-party master system and needed to be turned into Drupal content for Views to be able to use them. This posed some problems: first of all, there were well over 1000 courses, some were connected to each other, and it had to be possible to enrich them in Drupal with things like tags and images (which the master system could not provide) while at the same time keeping them otherwise up-to-date with the master system.
As a solution, in order to tackle the sheer number of courses that needed to be constantly created, deleted and updated, we turned to the Queue API and created a QueueWorker, making sure that it left any Drupal-only fields (like images) alone. That still didn’t help with connecting the courses to one another, though, as we couldn’t be sure that the course being referred to had been imported (and thus, given a node ID) when we were creating the referring course. The master system didn’t know anything about Drupal’s node IDs and couldn’t keep track of them, of course, and we didn’t want to run the import process twice every time to get some node reference fields in order (and face potential reference problems when deleting old courses). Thus, we ended up using specially-crafted display formatters with plain old text fields containing the course code - the only unique piece of information the master system could provide. Basically, this amounted to two fields, “courses that link to this course” and “courses that this course links to”, which scoured the database for the matching course code and, instead of displaying the code itself like a normal text field would do, displayed links to courses referencing it. This allowed us to recreate course structures (e.g. degrees) from the master system.
The sites design was mobile first from the start. This adds a lot of moving pieces and challenges when designing the UX. For example all elements should flow in all screen resolutions and the navigation should be usable in all screen resolutions. This lead to a new solution where the main navigation for mobile is also visible in the desktop version. We did not use for example a megamenu in the desktop but trusted in the mobile navigation to offer a unified browsing experience.
Community contributions
During the project, our main contribution was taking part in the discussion and providing the occasional patch in the issue queues of various projects, for example AJAX-related issues in Views and some Media-related issues in Entity Browser, as Media in core was a new thing at the time.Why should this case win the splash awards?
The whole site was designed with the end users in mind. We took a lot of time doing interviews with end users and understanding their needs. This manifested in the site by providing users with clear paths in the site to the information they are looking for. The target groups (future students, current students, businesses etc.) are clearly identified in the site and there are quick links for them to get to the information they are looking for.The site was designed as being mobile first from the start. Currently about 64.6 % of the sites visitors are using a mobile device. For example the menu navigation was designed so that it’s easy to navigate the site with a handheld device. The front page of the site was designed so that there are a lot of links pointing the user to the information they are looking for. This design methodology was carried through the site. The idea is that there are a lot of pages on the site that can be a landing page for example from a search engine. Currently users don’t only come to the front page of the website but they can end up in a lot of different sections of the site and this is important to take into account when planning the UX.
The value for education that the new website offers is significant. The UI solutions that were implemented provide that the user can find the course or education they are looking for without having to know what specific institution offers it. They can also find relevant information about courses that might be interesting for them based on their career or situation in life.
The website also manages to unify the different types of courses offered by different institutions all under the same Gradia-umbrella.