User centered website for ZorgSaam with Drupal 8

Submitted by
Nedbase
The Case
Category
Zorg
Short introduction
In the Zeeuws-Vlaanderen region, ZorgSaam is the go-to healthcare provider for all ages. Whether in one of the hospital or elderly care locations, home care or with their ambulance service: ZorgSaam is always close to those in need. On the 1st of May 2017, ZorgSaam launched their new website.
Launch date
Background
With an age of 7 years the previous ZorgSaam website no longer fitted the desired appearance of the organization, nor did it use the online opportunities available today. In addition an upcoming merger also necessitated the renewal of ZorgSaam's online presence. The new website offers ZorgSaam the opportunity to increase their digital and informationing services to a higher level.
Objectives
# Powerful design
Improving ZorgSaam's online appearance by designing a clear, functional and powerful design: This was one of the major focus points. A design that embraces ZorgSaam's restyled identity and is suitable for desktop, tablet and mobile (responsive).

# Focus on the visitors
A website should be build to fit the needs of a visitor, so we had to let go thinking in organizational structures straight away. If you are looking for health care (or information about it) as a resident of Zeeuws-Vlaanderen, you want to quickly find what you are looking for. During the development we continuously asked questions like: What are the needs of the visitors? Why are they on this website and how can we help them? What do you put higher on the homepage: a link to the visit times or to the contact information? The completely redesigned structure and layout of the website is based on Google Analytics analyzes and interactive user surveys (card sorting sessions / customer journey workshops).

# Multidisciplinary care
One of the objectives of the new website is to show the connection and cooperation between the many health care services that ZorgSaam offers. With this unique integrated care and the bundling of forces, ZorgSaam positions itself as a player that offers tailor made patient care. The website shows clearly what services ZorgSaam offers and how they are connected.

# Increasing SEO-performance
The SEO-performance of ZorgSaam’s previous website was insufficient. The page titles were not good, H1's were missing and there was ‘duplicated content’. An important goal of the new website is to significantly improve the findability of ZorgSaam in search engines. We have created the new website with elements that are important to search engines: breadcrumbs, url structure, alt texts, H-tags, description tags, etc. A comprehensive redirect plan (301’s) has also been drafted and various pre-launch SEO-checks were performed.

# Uniformity
ZorgSaam's hospital has more than 50 specialisms. On the previous website, they all had a separate section where was told more about these specialisms. Over the years, there has been a lot of diversity on these pages. With the new website we aim for uniformity and consistency, so visitors are being presented a clear picture. Therefore, together with the specialists of ZorgSaam, we have created a useful template where each department can share their information within a fixed format.
Results
# User centered design
The visual design of the new website has already earned a lot of compliments. The result is a ‘less is more’-design that focuses on the functionality and the need of the visitor, without unnecessary elements. Because that’s what matters for internet users nowadays.

# Connected content
We have integrated relations throughout the website; all content is connected with each other. For example: on the page of a hospital specialization linked locations, specialists, patient folders and news items automatically come together.

# Internal support
From start to finish, employees of ZorgSaam have been actively involved in the development of the website. These employees represent many different departments and job levels throughout the organization. During interactive and creative sessions, they actively thought about the optimal customer journey and navigation, gave their feedback on the visual designs and were asked to test the website before the launch. This approach has created a broad internal support for the launch of the new website.

# Saving time thanks to user-friendly and efficient CMS
With the previous website, ZorgSaam lost a lot of time with publishing and editing the content. Due to the user-friendly design of Drupal 8-CMS and by offering the exact features needed by the content-editors (no overkill of features), it is now much more attractive to the ZorgSaam Communication department to maintain the website. Mainly because with the new website, maintenance can be done a lot faster and easier.

# Strong foundation
We have set a strong, future-proof base that, along with ZorgSaam itself, allows for growth in the upcoming years. This flexibility is important, because ZorgSaam has challenging future development needs. Especially in online service, the organization aims ongoing development. For instance, think about making an appointment online with a specialist, checking your medical history or glancing over your personal client file.
Technical challenges
# Automatically create categories
Categories (taxonomy terms) are created automatically based on specialisms (nodes) and are updated when the specialism changes. This is developed in order to categorize certain content, for example news, based on the specialisms. This is solved by a new, self-developed contrib module: https://www.drupal.org/project/automatic_taxonomy_terms.

# Specialists- and patient folders-overviews as subpages of specialisms
All specialisms contain specialists- and patient folder-overviews. These are subpages of the specialisms. Based on the placement of the specialism in the menu, dynamic menu links are created that refer to these overviews. This is solved by a route subscriber who runs through all the specialisms and makes routes available for the overviews. The links in the menu are dynamically created by a menu deriver. Menu links are automatically deleted by an event subscriber.

# Calender item view
The calendar items show the date view as a day from a tear calendar. For this, day and month had to be separated from each other. This is solved by creating a field formatter in which HTML markup and separate date elements can be placed.

# Scroll to element
Specialisms pages contain links that refer to "Contact and routes" and "Our specialists". These elements are situated on the same page. When the information of these elements is available, the link appears, otherwise the link will be hidden. When you click on this link, you automatically scroll to the element. When the element is a tab, it will open automatically. This is solved by making an overview (view) that is related to the current page. This determines whether the link should be displayed. Scrolling is managed by a new, self-developed contrib module: https://www.drupal.org/project/scroll_to_element. This module enables scrolling the link to a target by use of a selector.

# Menu blocks
There are many variations of menu blocks on various places on the website. For example, the current level, the underlying level, etc. In addition, the combination with the menu title deviates regularly. This is solved by the menu_block module (https://www.drupal.org/project/menu_block), where we provided several contributed patches in order to let everything work together.
Challenges in (combination of) modules
On specialism pages, most modules come together. The following modules are used to show the page:

- Field group (field_group)
- Feld group link (field_group_link)
- Title (title)
- Scroll to element (scroll_to_element)
- Views (core)
- Paragraphs (paragraphs)
- Menu block (menu_block)
- Viewsreference (viewsreference)
- Webform (webform)
- Field as block (fieldblock)
- Menu trail by path (menu_trail_by_path)

The following modules are used in the background, in order to make content editing of pages so efficient and user-friendly as possible:

- Linkit (linkit)
- Pathauto (pathauto)
- Taxonomy (core)
- Automatic Taxonomy Terms (automatic_taxonomy_terms)
Contribution form the project to the Drupal-community
Modules

# Enable link targeting by the content manager
https://www.drupal.org/project/link_target

# Automatically create taxonomy terms
Automatically create taxonomy terms based on specialisms so that other content can be linked to it and mutual relationships are maintained. So the content manager doesn’t have to do this.

https://www.drupal.org/project/automatic_taxonomy_terms

# Connecting anchors and elements to which can be scrolled
https://www.drupal.org/project/scroll_to_element

Patches

# Menu block
2+ level menu block not limited to active parent (https://www.drupal.org/node/2811337)
The right menu items were not unfolded in the main menu

Menu parent as block title (https://www.drupal.org/node/2809699)
Some menu blocks need to have a title that depends on the current page.

# Shield
Allow to authenticate with user credentials (https://www.drupal.org/node/2827060)
During the development of the website, the website only had to be visible for ZorgSaam. With this patch, they could use the same login credentials as in Drupal.

# Address
Configure visible address fields per field formatter (https://www.drupal.org/node/2852800)
The location overview shows addresses. By default, this module shows all fields that are filled in. This patch makes it possible to configure which address fields are displayed.

# Field group
Tokens in field group's css classes (https://www.drupal.org/node/2858336)
This allows the content manager to select icons by using a field. These icons are then displayed on a field group as css class.

# Styled google map
The residential care location overview uses a map based on Styled_google_map.
For this module we have made several functionalities:

- The image of the button to close the pop-up was made configurable (https://www.drupal.org/node/2826102)
- Show map at any time, even when there are no results (https://www.drupal.org/node/2837983)
- Enable to configure a standard marker icon (https://www.drupal.org/node/2826054)
Name client
ZorgSaam Zorggroep Zeeuws-Vlaanderen
What does the client think about the project?
Last Monday, May 1, 2017, our new website has been launched. We are really happy with the result! Not only the employees who are closely involved in this project experience a new, fresh and user-friendly website, but this also applies to the user groups, other employees and visitors of our website. Via e-mail, the website and social media we receive many compliments. An appreciation of the many work of both Nedbase and ZorgSaam.

We look back on a wonderful project. Our wishes, including a user survey, were well translated by Nedbase. Because ZorgSaam is a large, varied organization, it is important that the navigation and structure of the website is clear. Visitors should not get lost. In addition, we are very pleased with the user-friendliness of the CMS. A big improvement over the old website. Not all my colleagues in the department work with the website on a daily basis. Therefore, it should be easy for them to quickly post a news article. Because Nedbase wanted to work with Drupal 8, production eventually took a little longer than planned. Since not all content was ready yet, the small delay made it possible to complete all content-related activities before the launch. The deadline was postponed, with May 1 being the final date of delivery. And it has been achieved!

With the successful launch of the new website, we are looking forward to new developments and extentions. There are still a few small elements that need a bit of fine-tuning. We are working on the next phase, including a story module and a crisis- / emergency-banner. For us, it’s important that the website keeps evolving. But for now we are proud of the result!
Screenshot