The University of Hong Kong

Linking medieval routes to modern study

While the original Pilgrim’s Guide was a twelfth-century guidebook for Spanish pilgrims, our Pilgrim’s Guide strives to provide a similar experience for the modern digital pilgrim.

Since students are used to composing their research into lengthy text reports, Grayscale took up the challenge of not only bringing life to the documents themselves, but also providing a modern understanding of the locations of their artefacts & architecture by providing context in the form of modern & ancient maps of the continent.

The Pilgrim’s Guide will also function as an academic resource for years to come. As the course continues to be taught, more and more students will add their projects, filling out the map and making it ever more valuable!

Breathing life into history

Bringing years of art historical experience to the table, Prof. Elisabeth Lastra worked with Grayscale throughout the project to determine the proper feel and visual style.

References ranged from ancient illuminated manuscripts and paintings to more modern cartographic representations of real and fictional places. Early on, though, we realised that we didn’t want to be bound to exact replication of old documents. Therefore, we decided on a dark colour scheme to visually differentiate the project from other, similar endeavours.

Once the general tone of the site was set, we also had to face the challenge of differentiating individual projects from one another through their design, as well as their content. To do so, we took inspiration from the four pilgrimage routes to derive an accent colour and graphic element that show up throughout the page, such as the five-fold cross and bright blue of Jerusalem’s emblem.

A real portfolio piece for the students

To ensure we were building a product that would actually cater to the needs of the students, we met with them a few times over the course of the project to share our status and hear out their thoughts and concerns.

Without incurring too much additional development time, we wanted to make sure that students could add various multimedia elements to really make their reports shine—especially elements that can only exist in an online environment. Depending on the artefact, students have embedded videos, zoomable high-resolution photos, and even interactive 3D models!

Unique project constraints

Coding The Pilgrim’s Guide was no simple task. This project differed greatly from most sites we work on, not only in its layout and navigation patterns, but also in the content it needs to cater to, both now and into the future.

Navigating projects through a map interface presented its own special set of challenges. We went through many rounds of iteration to make sure everything was smoothly linked up—selecting a project in the list view zooms to it on the map and hovering over a map pin highlights that same project in the list.

As project pages are still mostly made up of text, the reading experience here is paramount. UX considerations include a reading time indicator, a persistent chapter selector, and footnotes located to the side of the text, so as to not interrupt the reading flow.

In addition, we needed to consider a few non-standard elements, such a set of custom drop caps and an on-demand faux Greek font to make sure that any Greek text would remain in-style and not fall back to an ugly system standard font or need to download any additional font files.

Why we love this project

We had a blast working on this project. Not only was designing an art historical resource at one of the top universities of Hong Kong a unique project brief, but working with Prof. Lastra and her students was a breeze— the client really does make the project!

Let’s hear that concept

Want to start a website project? Our team can guide you through these processes and together we’ll come up with a unique solution.

Get the results you want.