The Mary Rose Trust

In December 2023, the ship itself was nowhere to be seen on the Mary Rose homepage.

The first image on the screen promoted Dive the Mary Rose 4D, a cinema experience. The logo in the corner still marked the museum's 40th anniversary, 1982 to 2022.

Opening hours appeared three times on the same page, and they didn't agree. A panel near the top said 10am to 5pm, last entry 4.15pm. The footer said 10am to 5.30pm, last entry 4.45pm, then listed separate summer and winter hours underneath. A Christmas closures pop-up sat over the top of all of it.

The largest panel on the page belonged to Portsmouth Historic Dockyard, in the dockyard's own yellow and teal, and the rest of the site used the same teal and navy. The family resemblance was reasonable. But it made the Mary Rose look like every other attraction on the dockyard, and gave a visitor coming from London or overseas little reason to pick it out.

The parts of the story that make the Mary Rose extraordinary sat near the bottom: a painting of the ship, and a card about caring for 19,000 recovered objects. Schools and learning, a large part of the Trust's work, had no place on the homepage at all.

The Trust felt its 2018 brand no longer reflected the organisation it had become. The brief had three parts:

• A website that could stand alongside the best heritage attractions in the country.
• A structure that organised a very large amount of content.
• An identity that evolved the existing brand rather than replaced it.

Before designing anything, we looked at what visitors were already being shown. Locally, nearly every attraction on the dockyard used the dockyard's colours, which tied them together but flattened their character. The Mary Rose was the only one with a website of its own, which gave it the most room to stand apart. Nationally, we studied Royal Museums Greenwich, St Paul's Cathedral and the Royal Collection Trust. We wanted to see how the leading heritage sites carry authority without feeling stiff.

The Trust's palette had been drawn from the golds, reds and dark greys Henry VIII wears in his portraits. On screen those colours looked muted, and they become harder to tell apart as eyesight ages. Oil paint also darkens and fades, so the portraits are a poor record of how Tudor colour really looked. Stained glass doesn't fade. We built a new palette from Tudor stained glass that is richer, still historically grounded, and strong enough to make a button or a pull quote stand out.

Times had been standing in for the brand's Garamond. We kept Garamond for headings and added a system of italics for emphasis. Body text moved to Open Sans, because Garamond's small counters make long passages hard to read on a phone, and people scan web pages rather than read them. A clear sans serif helps visitors reading in a second language. It also helps children, who often decide which attraction a family visits in the school holidays.

We tested colour on the old homepage before designing new pages, keeping the layout and changing only palette and type. The brand guidelines applied as they stood tidied the page but still felt gloomy. The stained glass palette lifted it straight away. Seeing the difference on a page the Trust already knew made the decision easy.

We also looked seriously at the Mary Rose 4D graphics, which came up often in early conversations. They were bold and fresh, but made for the dockyard's needs, with a modern military feel. Using them would have pulled the museum's website away from the branding visitors see when they arrive.

We designed the full website for desktop and mobile, organised around the questions a visitor has before they book.

• A homepage that answers the four most common questions straight away: opening times, how to get here, ticket prices and what's on
• Today's opening hours stated once, at the top of the page
• The ship's 500-year history, the science of archaeology, research and conservation, and school visits each given their own place on the homepage
• Collection pages where people can browse individual objects, from a cannon royal to one of the 82 nit combs found on board
• A colour system taken from Tudor stained glass and tested against the Trust's existing palette
• Garamond headings with an italic system, paired with Open Sans for body text
• Page designs for tickets, what's on and events, the collection, a timeline, news, search, learning and visit landing pages, contact and error pages

A first-time visitor now lands on a page that feels as rich as the museum itself. Today's hours appear once, at the top. The four things most people come to check sit directly under the headline. Further down, the museum tells its story: the ship's history, how she was raised and conserved, the learning programme, and objects you can click into and explore.

The structure has held. The sections we designed are still the ones on the live homepage today, in the same order, carrying the Trust's own content well over two years after launch.

A handful of early decisions made most of the difference. Take colour from glass rather than paint. Give the museum its own look inside a shared dockyard. Answer a visitor's questions before asking them to buy.