Case study – volimzdravlje.hr

What are we proud of?

First of all, we are always proud when the client is satisfied with what we have done, it gives us the the motivation to always strive to do our best. However, in the case of creating the e-learning web portal volimzdravlje.hr, we are also proud because we did something different and more challenging – primarily in the technical and functional sense.

When it comes to the design of their future website, HUHIV had certain wishes and role models that we were very happy to take into account, so the end result was a bright and playful website, practical and easy to use.

First phase of the project: Technical aspects of the e-learning web platform

So, the volimzdravlje.hr website is actually an e-learning platform, intended for health professionals (doctors, nurses, dentists, etc.), employees in the social welfare system (psychologists, social workers,…), medical students and health polytechnics and medical school students, who can attend various courses through this platform.

Educational content on this platform is created specifically for individual and combined groups.

The technical requirements that were important to meet when creating this portal are approximately the following:

1. It was important to provide the client with distinctions at the level of WordPress user accounts according to the type of user (accordingly to a specific target group). User type information is collected during user profile registration. Differentiation of users is used both to display targeted education and to create custom fields for entering the necessary information about users (health professionals have the ability to enter different information in their own user profile than, for example, employees in the social welfare system, etc.). Thus, employees from the health care system have an overview of education related to their profession, while, for example, employees from the social welfare system have an overview of education tailored to their profession.
2. The user registration process begins by clicking on the button to start a specific course. Application / registration is also possible by filling in the registration form, or by registering / logging via social networks.
3. Visitors are allowed to view the summary of the course without logging in and / or registration – the summary of the course can be different information about the course (short description, objectives, duration, markings on the types of materials, method of scoring – if any), etc.
4. The course can be started only by registered / registered users.
5. Visitors are allowed to rate the seminar by leaving comments and ratings.
6. After registration and filling in the required fields, the user is reminded that it may be necessary to fill in additional fields from the personal profile (depending on the type of account). Eg. if the type of user profile is a health professional, the user is instructed to fill in those data that are necessary to get points in the professional chamber. A custom user interface has been created for the users in the backend of the portal where they can edit their data.
7. Each course has the possibility of creating an exam (quiz) on the basis of which it is recorded whether the participant has successfully passed the course or not. With each course it is possible to display different learning materials (eg videos, or PDF documents).
8. We also created a categorization / filtering of courses (e-learning) according to the following criteria: language, topic, duration, author, scoring, purpose). The possibility of adding additional filters / categories is also possible.
9. One of the functionalities built into this platform is certification. There is a distinction related to the type of course – those that are scored and those that are not scored, so the functionality of automatic recording of points (if they exist within the courses) is built into the digital certificate.
10. The possibility of automated notifications about the status of the user’s course has been implemented in case the user logs out of the portal without completing the course. The notification is sent by e-mail, and a notification is displayed within the user profile.
11. In addition to standard e-learning courses (webinars), an additional type of e-learning courses without materials has been implemented – courses that have an offline location. Users are allowed to register for such courses / seminars. After the seminar (that takes place offline), the user has the ability to take a predefined test (by logging in to their user interface and entering the course) and receive a certificate with points. Of course, this is only made possible after a seminar has been held, so a course manager has the ability to define the earliest time at which a user can start the exam.

Second phase of the project: Website theme upgrades

As with all our projects, we developed a custom theme when creating the volimzdravlje.hr website – according to the needs, wishes and role models of our client, without using any commercial templates. We have described the reasons why we do not use templates in creating WordPress websites in the article you can read here, and went even further in the article on creating WooCommerce web stores.

The first phase of the project involved only the basic design, where we were focused primarily on technical requirements. In the second phase, we had the opportunity to plan the visual of the future website in more detail.

This visual part of the project could be elaborated extensively, as it is a very specific and complex portal, but we will focus only on what might be of interest to our readers and try not to bore them with going into too much details.

Mega menu

One of our clients’ was that on the website volimzdravlje.hr there is a so-called mega menu, which portal managers will be able to easily manage and upload various content to.

We did this by programming a custom solution, i.e. bypassing the standard features of WordPress menus (which aren’t exactly thrilling).

Image slider (slideshow)

In our desire to provide the client more freedom in presenting content, and not wanting to use some commercial plugins for the main slider (you can read the reasons for such a decision here), we decided to program our own solution and give the team from HUHIV the opportunity to choose 2 types of sliders – one that will display the image in a circular shape and thus blend more nicely with the visual identity of the website, and the other, more classic, that will display the image across its entire width. All this, of course, would not make sense, if we did not integrate these functionalities into the CMS itself, which enabled the client to manage them very easily, without any prior programming knowledge.

Other functionalities and elements of the homepage

The cover of the e-learning portal is extremely rich, and the most important request of the client when comitting to the project was the possibility of independent management of the contents of the homepage.

Therefore, we have built a custom interface, in which in a very simple way and without any programming knowledge, our client can change and enter new content. Some of the elements are as follows:

Articles display (through API connection with HUHIV.HR)

The main information portal of the HUHIV association is still the website huhiv.hr, where the association regularly publishes various current events. When committing to the project of creating an e-learning platform, our client expressed the wish that the news continue to be published primarily on the website huhiv.hr, but that it is, if possible, also shown on the new portal volimzdravlje.hr.

We found the solution in connecting the databases of these two websites, in such a way that the contents published on huhiv.hr are only seemingly copied to volimzdravlje.hr. Namely, every day at a specific time, the portal volimzdravlje.hr from the database of the website huhiv.hr “pulls” a news summary to its blog section Social Community. By clicking on these summaries, the users are redirected to huhiv.hr, where they can equally intuitively continue to use the desired content. We did this by utilizing WordPress REST API.

With this maneuver, we saved the client a lot of time, because the client publishes articles in one place and displays them in two, while the database of the volimzdravlje.hr portal grows unencumbered and moderately, allowing the portal to “breathe with full lungs”.

Internal pages and Gutenberg

The structure of the internal pages relies mainly on the standard features of the WordPress CMS and its native Gutenberg framework (you can read more about it here). Gutenberg is one of the most advanced content editors on the market, and that advancement does not necessarily lie in its outstanding functionality – because there are many other framework solutions that can “match” Gutenberg in terms of features.

But precisely because it is an integral part of WordPress, its most important advantage lies in its speed of operation, and the fact that the website is in no way burdened with all those technical features that are built into Gutenberg. Of course, the experience of using Gutenberg is improved in an incredible speed because of the huge support from the development community, so we can expect much more from it in the future.

In any case, in the presentation of the content of internal pages and articles on the e-learning platform volimzdravlje.hr, the possibilities of Gutenberg were used, with prior stylization of its elements to harmonize them with the rest of the visual identity of this portal, and with integrated animations of its elements. Using all this, we were able to raise the interactivity of the website to a higher level.

Conclusion

The project of creating an e-learning platform volimzdravlje.hr is one of the most interesting that we have led and realized in the last 9 years. We have successfully solved many of the functional challenges that came our way, while fulfilling a number of the client’s wishes related to the design and visual identity of the website.

We can shorten the story and proudly say that this was a successful project, which will serve us in our honor in the future.

The team of the HUHIV association brings together young people, full of enthusiasm, with whom it is always pleasant to cooperate, and we hope that the project of creating the website volimzdravlje.hr is just one in a series that we will work on together in the future.

Udruzi HUHIV se ovom prilikom zahvaljujemo na povjerenju i želimo puno uspjeha u radu s novom platformom.