Case study – volimzdravlje.hr

The project “Volim Zdravlje” is the first project from the association HUHIV funded by the European Social Fund – “Health promotion and disease prevention – Phase I”.

“We plan to continuously maintain and develop, upgrade and further promote e-learning to all target groups in the future.”

Based on past collaborations in the implementation of the HUHIV portal www.huhiv.hr, a website that has been growing exponentially in terms of function and content for years, we have selected the same contractor for the implementation of the educational platform www.volimzdravlje.hr – codeart.studio (read about the success of previous collaboration in the recommendation Association HUHIV).

After conducting professional trainings in secondary medical schools, in addition to improving the knowledge of young people, the main goal was to collect their feedback, interests, misconceptions and topics in which they need additional support in knowledge. In this way, we involved young people in shaping educational content and topics with the task of creating a sustainable educational platform in cooperation with numerous medical and health professionals.

In cooperation with the contractors of the implementation of the e-learning platform company codeart.studio, numerous functionalities and adaptations and in cooperation with the agencies BBDO and Dialog komunikacije who helped us create a visual identity and all the necessary elements, as well as cooperation with HZJZ as a project partner, the website www.volimzdravlje.hr was implemented by numerous health experts who worked with us on e-leraning courses, professional and educational content. A unique, sustainable and focused e-learning system has been created, which includes specific health topics intended for existing and future health professionals.

The promotion of the Volim Zdravlje educational platform in cooperation with the project partner is planned for September 2020 as part of a targeted campaign that includes medical high schools throughout Croatia and future health professionals.

Arian Disković, HUHIV Association, project leader Volim Zdravlje

Mission objectives

Concept
Design
Development
Reponsiveness
Case study – volimzdravlje.hr - logotip

HUHIV Association is our long-term client, one of those who have been with us since the very beginning of our business. For those who do not know, the HUHIV association is one of the most important health organizations of this type in Croatia, which deals with prevention, education and assistance to people suffering from HIV infection and AIDS and viral hepatitis. The volimzdravlje.hr portal is not the first project we have implemented for them. 9 years ago, we created the website huhiv.hr, which is still fresh and colorful today, without any visual adjustments.

The project “Volim Zdravlje” is the first project from the association HUHIV funded by the European Social Fund – “Health promotion and disease prevention – Phase I”. The project owner is the association HUHIV in partnership with HZJZ (Croatian National Institute of Public Health, hzjz.hr). The aim of the project is to increase the knowledge, healthy habits and awareness of young people in Croatia about the importance of prevention of infectious diseases related to sexual and reproductive health with special emphasis on creating a sustainable online learning system for medical students as a young and future health professionals.

Further in this case study, we’ll describe the challenges and specifics that we’ve encountered in the realization of the project of developing the volimzdravlje.hr website.

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.

Online courses filtering
Online courses filtering
User registration
User registration
Course exam
Course exam
Course page – basic information

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).

Mega menu on volimzdravlje.hr

The control interface for mega menu is as simple as possible and looks like this:

Adding links to the mega menu
Adding links to the mega menu
Choosing articles displayed in the menu
Choosing courses displayed in the menu
Choosing courses displayed in the menu

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.

Slider management interface
Slider management interface
Title and description with each image
Title and description with each image
Other elements of each slide and selecting the position of the image on it
Other elements of each slide and selecting the position of the image on it

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:

Segment Usluge na naslovnici
Homepage services section
Management of the Services segment in the CMS
Management of the Services segment in the CMS
Homepage articles display
Homepage articles display
Management of the display of articles in the CMS (chronological display, or display of featured news)
Management of the display of articles in the CMS (chronological display, or display of featured news)
Homepage main course topics display
Homepage main course topics display
Management of the display of topics (course categories) in the CMS
Management of the display of topics (course categories) in the CMS
Upravljanje prikazom tema (kategorija tečajeva) u CMS-u
Management of the display of topics (course categories) in the CMS
Partner logo upload within the CMS
Partner logo upload within the CMS
Other footer contents within the CMS
Other footer contents within the CMS
Footer links positioning within the CMS
Footer links positioning within the CMS
Placement of icons and links for social footer fonts within the CMS.
Placement of icons and links for social footer fonts within the CMS.
Positioning footer links within a CMS
Positioning footer links within a CMS

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”.

Synced articles from huhiv.hr

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.

Are you in need of a high quality website fully tailored to your needs?

Feel free to contact us by requesting a quote (or simply with a question), via e-mail [email protected], phone +385 91 455 1066 (12 – 17h mon-fri) and ask us about our services.  We are looking forward to working with you in achieving your business goals!

Hire your codeartist

looking for a development of your own project?

is your agency looking for a partner?