A page from the Monorail Music website, as viewed on a desktop-sized screen. The background is white and the text black. The Monorail logo sits in the top-left corner, alongside the site menu and a shopping bag icon sits in the top-right, with the number one in a circle hovering on top, alongside a red heart icon with the number zero inside. To the left of this are some social media icons. Below are two columns; in the left is a square image of a record sleeve, mainly made up of three narrow rectangular photographs, each with a different colour filter overlay: a circular clock in front of a tower block, an old-fashioned tram or train rushing past, a corner shop, cafe or bar. Underneath are two smaller, square photographs, followed by some text. In the right-hand column, large, bold, geometric sans-serif text reads 'The Umbrellas' with the text 'Fairweather Friend' underneath in a smaller, thinner font. Below this is the following text, all in an uppercase bold font: 'Label: Tough Love. Released: 26th January 2024. Monorail Exclusive: view all. Staff Pick: view all. Pre-order: view alll.' Within a grey, rounded panel below, are controls to select the format—currently on 'LP - Light Blue Vinyl'—and quantity—currently on 1—of the product, a large black button with 'Pre-order' in white text, and the price '£24.99'. At the very bottom of the page is a black, full-width banner with white text. On the left is a megaphone icon and the text 'Sign up to our newsletter' and on the right is a white box alongside a magnifying glass icon.
The homepage of the Monorail Music website, as viewed on a smartphone-sized screen. The background is white and the text black. The Monorail logo sits in the top-left corner, and a shopping bag icon sits in the top-right, with the number one in a circle hovering on top. These both hover above a full-width, blue double-line. Below in a large, bold, geometric sans-serif font is the text 'Pre-orders'. Underneath is a grid of four products in two columns. The cover of the first product, 'Wall of Eyes' by The Smile, depicts an abstract, psychedelic landscape. The second, 'What We Do Now (Signed Edition)' by J Mascis, depicts two cartoon seals swimming underwater. The third, 'Rooting For Love' by Laetitia Sadier, is a photograph of a tree in front of a blue sky. The fourth, 'Untame The Tiger' by Mary Timony, depicts a comic book-like illustration of a woman's face, crying blood red tears, with other illustrations of various objects floating around her. At the very bottom of the page is a white band containing the text 'Shop, News, Info, Menu' in bold uppercase.

Along for the ride

The task of migrating from Monorails previous platformless, hand-coded site to something new was always going to be a huge undertaking for all involved. Via an extensive period of consultation, we put together the teams dream list—full of both expanded admin and customer-facing functionality. This step also required us to navigate how we could best recreate some of the very idiosyncratic functional mannerisms of the previous site.

A page from the Monorail Music website, as viewed on a smartphone-sized screen. The background is white and the text black. The Monorail logo sits in the top-left corner, and a shopping bag icon sits in the top-right, with the number one in a circle hovering on top. Below in a large, bold, geometric sans-serif font is the text 'How Come You're Such A Hit?'. Below in a much smaller uppercase is the text '28th March 2023'. Underneath in a medium bold, text reads 'Dolly Mixture: Demonstration Tapes back in print, last copies of Remember This'. Below is a black and white photograph of three women with 80s punk/indie appearances, staring and smiling into the camera. At the very bottom of the page is a white band containing the text 'Shop, News, Info, Menu' in bold uppercase.
The Shop page from the Monorail Music website, as viewed on a desktop-sized screen. The background is white and the text black. The Monorail logo sits in the top-left corner, alongside the site menu and a shopping bag icon sits in the top-right, with the number one in a circle hovering on top, alongside a red heart icon with the number zero inside. To the left of this are some social media icons. Below are two buttons both with downward arrow icons; one is black with white text reading 'Filter Products' and the other is white with black text reading 'Sort by Default'. Directly opposite these on the right is a box containing the word 'Search'. Underneath these controls is a grid of ten record covers and their titles in a two row, five column grid.

Making tracks

Aesthetically, the order of the day was for something bright and neutral, but with flourishes reflective of replicating a beloved indie shopping experience in the digital ether. Typographically, the warm, clean geometric strokes of Navigo aimed to mirror the sense of community that the physical shop represents, whilst also having a dash of classic, utilitarian signage to it. This links back to the Milngavie Monorail—the erstwhile transportation network that inspired the shops name—and was a theme we furthered with the double-line motif used throughout the site, as a subtle nod to the outline of a single railway track.

A page from the Monorail Music website, as viewed on a desktop-sized screen. The background is white and the text black. The Monorail logo sits in the top-left corner, alongside the site menu and a shopping bag icon sits in the top-right, with the number one in a circle hovering on top, alongside a red heart icon with the number zero inside. To the left of this are some social media icons. Below, in large, bold, geometric sans-serif text reads 'Mississippi Drop...', with the text '28th March 2023' in a much smaller uppercase underneath. Following this is the text 'American Soul Music, Michael Hurley, Emahoy Tsege Mariam Gebru' underneath in a medium-sized bold font. Underneath this is the top-half of an image which has a dark maroon background with a black specked pattern on top, and a small black and white photograph of a band playing on stage, in the centre. Adjacent to this is a double-lined grey box, containing the a much smaller version of the same image, with the text 'Various Artists' below, alongside another image with the same text, that consists of a yellow and black vortex, with a small black and white photograph of a standing, singing, figure in the centre. Above these images is the text 'Get it now' in a bold, uppercase font. At the very bottom of the page is a black, full-width banner with white text. On the left is a megaphone icon and the text 'Sign up to our newsletter' and on the right is a white box alongside a magnifying glass icon.
A page from the Monorail Music website, as viewed on a smartphone-sized screen. The background is white and the text black. The Monorail logo sits in the top-left corner, and a shopping bag icon sits in the top-right, with the number one in a circle hovering on top. Below in a large, bold, geometric sans-serif font is the text 'Eye Of The Sea: Svitlana Nianio'. Below in a much smaller uppercase is the text '13th July 2023'. Underneath in a medium bold, text reads 'Exploring some of the Ukranian artist's most shimmering moments'. Below is an image that consists of abstract, floral forms in muted colours, in a hazy, dreamlike arrangement. At the very bottom of the page is a white band containing the text 'Shop, News, Info, Menu' in bold uppercase.
The logo for 'The Glasgow School'. On a black angular frame, full of inset borders, a bold mid-century serif in off-white displays the words 'The Glasgow School' with the 'T' of 'The' meeting the 'l' of 'Glasgow' and the same word's second 'g' connected to the first 'o' of 'School'. This 'o' form the top of a simple bell motif, that appears as if it is hanging from the 'g' above. The 'l' of 'School' is elongated to the extent in meets the edge of the frame.
The logo we designed for their in-house imprint 'The Glasgow School', beautifully decayed by Monorail's Russell!