The client
The Philippine Embassy in Norway represents the Philippines across five Nordic countries: Denmark, Finland, Iceland, Norway and Sweden. philembassy.no is the embassy's primary digital channel: the contact point for Filipinos living in the Nordic region who need consular services, and for Norwegian citizens planning travel to the Philippines.
The service offering is broad: passport issuance and renewal, visas for foreign nationals, notarial services and legal authentication, the Balikbayan programme for the Filipino diaspora, Seaman's Visa, civil registry, and ongoing information on bilateral relations between Norway and the Philippines. For many users the website is not optional reading: it is where they go to handle something practical and time-sensitive.
The brief
The website had been running since 2007 on Drupal 7 with a layout designed for desktop monitors. Ten years is a long time on the internet, and three problems had accumulated:
The platform was outdated. Drupal 7 is not compatible with Drupal 8: an upgrade is in practice a new installation with a full migration of content, users and configuration. It needed to happen regardless, but it also gave us the opportunity to do it properly.
The website did not work on mobile. More than half of all global web traffic now comes from mobile phones. For the embassy's users, Filipinos living in Oslo and other Norwegian cities checking whether a passport is ready or looking for opening hours from their phone, the fixed desktop layout was a genuine barrier. Google is also moving toward mobile-first indexing, making mobile optimisation a search visibility issue as well as a user experience one.
The information architecture was not suited to users' needs. An embassy website is not a presentation site: it is a working tool. Passport requirements, visa rules and contact routes needed to be structured so that users quickly reach exactly what applies to them, not scroll through long generic pages.
The solution
Groundwork: a custom-built framework
Rather than applying an existing theme to the new Drupal 8 installation, we developed Groundwork (a modular, mobile-first front-end framework for Drupal 8) specifically to solve the needs of philembassy.no and future projects of the same type.
Groundwork is built with mobile-first as an architectural premise from the first line: the base state is a single-column layout optimised for the smallest screen, with complexity added as screen width increases, not the other way around. The framework defines five responsive breakpoints:
| Name | Media query | Use |
|---|---|---|
| Mobile | 0px and up | All devices: the base state |
| Small | 480–600px | Compact phones |
| Medium | 601–992px | Tablets |
| Large | 993–1200px | Laptops |
| Wide | 1201px and above | Desktop and large screens |
The grid is built on CSS Flexbox with 12 columns and BEM methodology. The typography system uses modular scale and px2rem conversion for consistent and accessible text scaling. The build process is automated with Gulp: SCSS with autoprefixer, csscomb and sourcemaps.
The component library: navigation menus, forms, accordions, dropdowns, tables, search fields, pagination and message boxes, is designed throughout for touch screens and adapted to Drupal's standard markup.
Information architecture and interaction
With Groundwork as the foundation, the information architecture was built around one principle: the user should quickly reach what applies to them, without having to read through content that is not relevant.
Homepage task cards for direct navigation. The first thing a user encounters on the homepage is not a welcome message or a description of the embassy: it is a set of action cards that take them directly where they need to go. The cards are phrased as the user's own tasks, not the embassy's service structure:
- Renew your passport
- Check if you need a visa
- Report the birth of your child
- Apply for Dual Citizenship
- Passports Ready for Release
- Special Power of Attorney
- Guidelines for Au Pairs
- Contact the Embassy
A user arriving to renew a passport does not need to understand the navigation hierarchy, find "Consular Services" and then "Passport": they click directly on what applies to them. Particularly important on mobile, where navigating deep menu hierarchies is cumbersome. The cards are built with Groundwork components and scale naturally from a single-column mobile layout to a grid on wider screens.
Passport requirements by applicant type: accordion. Requirements vary significantly depending on who is applying: renewal of an e-passport, renewal of an old passport, minors, name change on marriage or divorce, new passport, and lost or damaged passport all carry different documentation requirements. We structured this with one accordion section per applicant category. The user sees all categories at once, opens only the one that applies, and does not have to scroll past requirements that do not concern them. The accordion component is part of Groundwork and works fully on touch screens.
Visa requirements by nationality, with JavaScript filtering. Visa requirements for entry to the Philippines vary by citizenship and cover 196 countries. An alphabetical list would be unusable. The solution is a dropdown where the user selects their country and the page shows only the applicable information. The Nordic countries are placed at the top, separated from the full alphabetical list. All content is pre-rendered in the HTML. JavaScript handles showing and hiding without a server round-trip.
Contact form with department routing. The embassy receives enquiries across very different case types. A form without categorisation would make case handling unmanageable. The form includes a required category field with seven options: passport, visa, authentication, civil registry, dual citizenship, other, and website feedback, routing each enquiry to the correct workflow. All submissions are stored in the database via contact_storage independent of email, so nothing can disappear into a spam filter.
Book navigation for consular content. The consular section's pages are organised as a Drupal book with a right-hand column that always shows the full content structure and highlights the current page. Users can navigate linearly with previous/next links: useful for reading through requirements in sequence before an appointment.
The module stack
The Drupal installation is configured with a considered set of contributed modules suited to the embassy's operational needs:
Communication and forms: contact_storage, captcha, recaptcha, smtp, formblock
Content publishing: scheduler (scheduled publishing of announcements), views_slideshow (homepage image carousel), smart_trim (teasers in list views), imce (file management for staff), ckeditor_youtube, field_group, conditional_fields
Navigation and search: menu_block, menu_link_attributes, search_autocomplete, search404, custom_search
SEO and visibility: metatag, pathauto, redirect, sitemap, google_analytics
Performance and compliance: advagg (CSS/JS aggregation and minification), eu_cookie_compliance, extlink
The result
philembassy.no is now live on Drupal 8 with Groundwork as its front-end foundation. The project resolved all three problems it started with: the platform is upgraded and maintainable, the website works on every screen size, and the information architecture is structured around users' actual needs rather than the embassy's internal organisational chart.
For an institution where many users are in a time-sensitive situation: arranging a passport before a trip, applying for a visa before a deadline, or reporting an incident to the consulate, accessibility and clarity are not aesthetic concerns. They are part of the quality of service.
Groundwork will also form the foundation for future Drupal projects, built to generalise beyond this engagement.
A note on history
This project was developed under the Noceda Media Lab name: our previous identity. From 2017 we operate as Ibenta. John Filipstad (formerly John Noceda) is the developer behind both philembassy.no and the Groundwork framework.
Working on a public-sector website that needs modernising? Get in touch.