Eurocentres Portal Provided by Cando Switzerland

About Eurocentres – Language Learning Worldwide

Eurocentres is one of the leading organizations within the language travel industry, with schools located in more than 120 countries over four continents. Currently, Eurocentres teaches eight languages at 30 schools.

The Project

The previous website and related micro-sites needed improved usability and design. It was hard to find the relevant information and to enroll online. The content administration of the worldwide websites in the multi-cultural, multi-language and multi-currency environment was becoming too complicated and took too much time.

Eurocentres was looking for an experienced web agency, able to handle complex development tasks combined with great user experience and design competence. After an intensive RFQ (Request for Quotation) phase and pitch, Eurocentres chose Cando for this challenging project.

Cando was responsible for the entire project and developed the concept, user-experience design (UI/UX), visual design, prototyping, development and implementation.

Why Drupal was chosen: 

The Drupal framework provides a lot of common CMS functionality 'out-of-the-box' and these functionalities were important requirements for our client. In addition, we also had to make sure that the chosen framework was flexible enough to fully accommodate the complex business logic we had to deal with in this project. The entity concept of Drupal 7 looked very promising and turned out to be a key factor in our decision.

Translation

The entity translation concept worked out really well for us. With the earlier concept of node translations in Drupal 6 we would have had a node for each translation. Now, the translation is obviously done at the right place now and there is no need to sync content between several nodes just for the sake of translation.

Drupal Commerce

Another key factor was the e-commerce topic. We noticed that several people involved in e-commerce projects with Drupal 6 and earlier (in particular Ubercart and e-Commerce) started working together on a new project called Drupal Commerce (which is based on Drupal 7). That means a lot of e-commerce knowledge was brought into one single project. Drupal Commerce was in a very early stage (pre-alpha) when we decided to use it for our project but its architecture turned out to be very flexible.

Even though we wrote quite a few lines of custom code for the shop, especially to create date-based behavior, we were able to do a lot of customization by using Rules and Views thanks to the seamless integration of Drupal Commerce with those modules. For example: The shopping basket consists of views. Additional fees such as high season, enrollment and many others are calculated and added by Rules. Courses and accommodations are stored as commerce products, each representing a different product variation (e.g. accommodations with different meal plans: half-board, full-board).

Fields

The concept of fieldable entities turned out to be very useful too, but because every additional field creates two tables (one for data and one for revisions), we still had to be careful not to end up with too many tables. Therefore we were glad to see that creating custom fields with multiple values was a good choice in many cases, and surprisingly easy to achieve. This way we could significantly reduce the amount of tables being created. One example of a custom field with multiple values in our project is the nationality mix information available for a school. Without a custom field we would have had 5 separate fields resulting in 10 tables, whereas with the custom field we ended up having 2 tables without losing any flexibility.

Describe the project (goals, requirements and outcome): 

The goal of the project was to implement a state-of-the-art web experience, which fulfills the needs of the Eurocentres target groups. The new website had to be user-friendly and cross-cultural, utilizing the latest trends in the Internet industry (e.g. mashups, Ajax, social media).

The major need was to increase the online sales. Therefore, the new online booking solution had to be intuitive, featuring faceted search and seamless integration of a multi-currency web shop. One-stop shopping was another key element. Eurocentres wanted to encourage prospective clients not only to buy the language course but also appropriate accommodations, private lessons, insurance and airport transfers.

Another requirement was the extranet for language travel agents. They had to be able to easily download media files such as documents and images. Finally, integration of a media asset management system with role and time-restricted access had to be implemented.

Thinking about SEO and SEM, the new website had to be optimized to use the latest techniques for high ranking in search engines. Special attention had to be given to target specific markets, countries and languages.

Requirements

  • Modern design with strong focus on user-experience (UX and UI).
  • Faceted search for language courses with instant results.
  • Online booking for language courses at schools around the world.
  • Booking of accommodation to tie in with a chosen course.
  • Multi-currency handling without currency conversion but fixed prices in multiple currencies per product.
  • Currency detection for certain client/country and school/location combinations.
  • Sophisticated business logic for date-based products (courses, accommodation) similar to travel systems/shops; such as handling of price periods, high season and other fees depending on the course-date, duration and destination.
  • Ajax-based shopping cart with convenient basket overview and possibility to change/update the cart content in-place.
  • Agent intranet and media asset management.
  • Multi-language capability: 8 languages, including Japanese and Korean.
  • Migration and interface development for product, price, content and image import.

Development and Deployment Process

Our development team is using Git for version control and code sharing as well as, Gitolite for fine granular permission control. The deployment process is handled by a Hudson environment using Phing (PHP project build system or build tool based on Apache Ant). When a specific version is being deployed to a desired environment (e.g. test, pre-production, production), the code for that version is cloned from the repository, unit tests are triggered and afterwards the code is being synced to the environment. In case of Drupal, most configurations are stored in code. Therefore we spent quite some time on patching the Features module. Configuration deployment across multiple environments has always been a crucial factor to us when working on larger enterprise level applications. However, the Features module enabled us to have more or less, a clean way to achieve our goals. Actually, Drupal 8 looks quite promising related to that topic.

Product import

Products are exported to .csv-files from an ERP system. The exported files contain all base data of the courses. A custom generator-script then uses this data to generate every allowed combination which in the next step is imported by Migrate, creating a commerce product. In the same process more than 1000 Rules for fees are created based on the data provided in the .csv-files.

Performance and Caching

To maintain the performance we use the full power of the panels- and page-cache as well as Varnish to further reduce the Apache load.

To reach a cache hit rate as good as it gets we use Cache Actions to flush caches only when really necessary e.g. whenever a node is updated the related cache entries are flushed and nothing else.

Further, we tuned the core page and form caching for being able to use relative times as cache lifetime (see https://github.com/das-peter/enhanced_page_cache and/or http://drupal.org/node/1286154). This works perfectly for eurocentres.com as the prices are always valid for the current day.

To optimize the memory usage and hit rate on https (where Varnish isn't hit) we use the same page cache ids for http and https - this works nicely as we use protocol relative paths everywhere on the page.

Faceted Search

We used Searchlight for the faceted search functionality. However, we patched a lot of additional code to support relations in the datastore backend and result grouping for grouping the product variants (courses) into schools on the search result page: #982272: Result grouping #992300: Relations and Result Grouping Support. Meanwhile all our search related features in other projects are implemented using Search-API.

Theming

Base-theme used and extended in the project: Fusion.

Some numbers

  • Multi-language: 8 Languages incl. Japanese and Korean with some advanced encoding challenges.
  • Commerce product entities: ~175,000
  • Nodes: ~1000 (Compared to D6 without entity/field translation this would mean ~8000 nodes since most nodes are translated).
  • Whole site can be built running an install profile:
    • One-hour install duration, including basic data migration (covers major part of the content).
    • One-hour product pre-generation, where some complex date-based price calculations (for price periods in travel market) take place.
    • Ninety-minute product migration.

Design and UX/UI Process


Cando has a strong focus on design and user-experience. In terms of Eurocentres, users should be enthused to search for language courses and finally guided to and through the enrollment process. Therefore, the concept phase included a clickable prototype (done with Axure RP) and many different visual design samples.

To ensure an outstanding user-experience, end-users and all stakeholders of Eurocentres including sales, marketing and the enrollment office, were involved from the beginning. For example, holding workshops with students in the UK brought valuable feedback at an early stage of the project.

Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 
  • Commerce: Provides solid basic and extendable shop functionality.
  • Commerce Multicurrency: Used to offer fixed prices in multiple currencies.
  • Commerce Limited Time Offers: The date-based prices are calculated by the module Commerce Limited Time Offers which makes use of the Drupal Commerce core. This module has been contributed and is available as a sandbox project.
  • Migrate: Import for hundreds of thousand product variants
  • GeoIP API: Used to determine users location and offer customized teaser-content.
  • Fusion: Base-theme used to simplify cross-browser handling and other repetitive theming tasks.
  • Cache Actions: See section 'Performance and Caching' for more details.
Organizations involved: 
Community contributions: 

A lot of community work was done with Commerce, Features, Media, Media Browser Plus and many other modules. More about our community work: http://drupal.org/node/1916224

General Aspects

Drupal 7 core was not even in alpha stage when the project was started, but looking back, we have to say it was the right choice to go with the next major release. What followed was almost nine months hard work of patching and porting modules to Drupal 7, while at the same time, writing custom codes for our specific complex business cases. With the help of many developers in the community, we were finally able to complete this challenging project and were among the first companies to launch a big Drupal 7 based enterprise website!

Project team: 
  • Luke Bochsler, Managing Partner - Project Lead
  • Chris Bochsler, Managing Partner - Marketing Concept
  • 
Peter Philipp, Software Architect - Lead Developer
  • Kai Jauslin, Head of User Experience Design
Language School Bournemouth Detail Page - Provided by Cando
Language School Bournemouth Booking Page - Provided by Cando
Eurocentres Course Finder - Provided by Cando

Comments

Very Good Documentation. Thanks.

Sandip Choudhury
www.UltraCorporatePixel.com

Thanks for sharing. Good work

benjaminkyta

hi, gud website i like it, which module did you use wen creating the maps section on the home page.

Please share, i know its custom coding .. which logic you used to map on map image? lat-long?

Ajaxify Drupal with jQuery.ajax() . Ajaxify

Well, actually that's not much more than a view that has a background-image :)
Every school has X / Y coordinates for it's location on that background-image.
We didn't even implement a solution to map lat / lon, we thought about that but in the light of the few changes of / new schools simply using image related coordinates was and still is the most (cost) efficient way to do it.
For the display we simply read the schools and use the "coordinates" for absolute positioning the output. Of course the theming of that view is adjusted and we added some JavaScript but it's not that high tech as you might think :)

________________________________________
Cando Image GmbH
Else Züblinstrasse 115 :: CH-8404 Winterthur :: Switzerland

Hi,
I have gone through the site and the home page map is really cool!!!. We would appreciate if we get some clarification from you that the coordination of X,Y marking in the map is done through the admin or it has any other logic to dynamically capture the coordinates while the user entering the school location?

Thanks in Advance!!!

senthil

How did you make the tooltips automatically appear and disappear in sequence on the map? Is there a module or views plugin/formatter for that?

---
"Please drupal responsibly: give as much help as you get."

The site seems great, expecially the maps section, I like it.

--------------
Lency Ann

Awesome site.

I would like to know more about fields because I'm also very concern about it, how you added custom fields. You're saying that "creating custom fields with multiple values was a good choice in many cases, and surprisingly easy to achieve". Did you added new field type or added using form_alter.

Also is there anything you've done using UI configuration or everything is done using either code or UI config+features module.

Thanks for sharing.

Yogesh

yogeshchaugule8@gmail.com || +91 98197 18464

Did you added new field type or added using form_alter

Well, we do quite a bit of form_alter but not necessarily related to fields. We created several new field types and field widgets to have full control over some very project specific requirements.
And we uses basically most of the available hooks to alter the output of existing fields.
Especially the fields of Drupal Commerce to show the products to select needed some tuning because of the huge amount of products related to the product display.

Also is there anything you've done using UI configuration or everything is done using either code or UI config+features module.

We build our projects as a git repository with submodules. Doing the configuration in the UI (whenever possible) and using Feature, to export / deploy it, turned out to work quite well. That way we've a revisioned configuration too.

________________________________________
Cando Image GmbH
Else Züblinstrasse 115 :: CH-8404 Winterthur :: Switzerland

I like theming part. I notice that you have used mostly custom code .

A k Rawat

The "Why Eurocentres" link appears to be broken. Using latest Chrome and it doesn't load any of the dropdown options. The block is just empty. I can see in the first screenshot there's supposed to be some links in there.

Very nice site! I was wondering if you could tell us a bit more about the filters for "Find a language school." I'm especially interested in how you implemented the selected option display with ability to clear and also the highlighted value in the filter itself. Was this a custom module? Thanks!

Hello,
First i 'm very impressed by the result !
I was wondering what did you use for your booking system.
I've read that you use the commerce solution but how do you merge it with your booking system.
Did you use some commons modules or did you make a custom dev for that ?

Thx

I would have to say, It is amazing!!!

Thanks for your sharing. I try to custom made the theme like yours, how would i prepare this job?

Excellent work chaps and thanks for the detailed write up - I had a look at the site and it's a really tight design you've put together there.
A brave step to jump in on Drupal 7 at Alpha, well done.

Drupal developers www.lightflows.co.uk

amazing work, thanks for sharing , good read and good documentation

i want to be Drupal when I grow up

soy aficionado a drupal. no profesional. con la idea e ilusion de realizar web de oferta gratuita de empleo a personas que puedan necesitarlo. es proyecto altruista. (simplemente hobby)
tengo los modulos que usted indica ya instalados.
¿como comienzo?
I am fond of drupal. unprofessional. with the idea of illusion and make free web jobs to people who may need it. is altruistic project. (just a hobby)
modules that you have indicated already installed.
How do I start?