The National Leprechaun Museum of Ireland is dedicated to promoting Irish mythology and folklore. We wanted to bring this experience to visitors in a way that would take them by surprise. This is why we chose to create an illustrated story path on the website.
Visitors can explore Irish folklore on the site but can also achieve more specific goals. Like finding general information, location, opening times and booking tickets.
From very early on we knew the website was going to have an illustrated story path. Which would consist of two parts Daytime and the Darklands. This is because the museum has two tour offerings, one during the day called Daytime. Which is their standard tour. Then there is the Darklands tour, which is strictly over 18's and only operates after dark.
Like the tours this was a project of two parts. The illustrated story path and a more typical booking website. The team has lots of experience working with ticket booking API's but the story path was something new for us. To ensure we didn't get too lost in the folklore. We focused on our processes and the users. This was the best way for us to achieve our goals — creating a useful and beautiful experience.
The illustrated story path doesn't follow the typical mental model of a standard website. So I needed to ensure that we didn't create an experience that was too esoteric to navigate. I wanted the users to feel engaged and interested while exploring the illustrated story path. While also having easy access to the rest of the website. That's why I focused on testing the navigation and CTA's with users. This was done with varying levels of prototypes throughout the design cycle. From paper mockups up to high-fidelity Figma prototypes.
The research was focused towards the story path because it was so different compared to a standard booking website. I looked at pop-up books, platforming games & other story based web experiences for the concept research. The museum was closed and going through refurbishments during the project. So we had to rely on the NLM team for vital qualitative information of their users.
I used a range of techniques for the concept phase such as empathy mapping, storyboarding, sitemaps and wireframes. The concept of was then validated by presenting, testing, and getting feedback from users.
The website design was heavily influenced by the illustrations as. This gave me a clear direction for creating the high fidelity prototypes in Figma. This was a relatively straight forward process due to all the work we did during the concept phase.
Testing of the concept was done throughout the project. It was vital to validate the concept because the layout and flow of the illustrations was dictated by what was learnt. We needed to get this right as the illustrations were so timely & expensive to produce.
The stakeholders in the National Leprechaun Museum wanted the illustrated story path to feel like the user was exploring — unguided. The user can and should take wrong turns. Get a little lost. Then maybe find something unexpected. This requirement created the biggest challenge for me as the lead UX/UI designer. The navigation between the Daytime and the Darklands story path wouldn't have standard calls to action, otherwise it would be too obvious.
We wanted the users to feel like they'd discovered something special when they reached the Darklands. Like finding a hidden area in a platform game. Due to these constraints it was a balancing act to nudge the user with visual cues in the illustration and cursor effects.
In order to find that balance we tested multiple different types of visual cues. Testing started at the wireframe stage but only really came to fruition when the story path was built on the test site. This was due to the technical challenges of getting the illustration path to function.
The CTA's for the illustrated story path started out as standard buttons. Which didn't meet the clients requirements. So we tested a pulsing dot instead of a button. This worked really well, users understood that they could interact with the pulsing dot.
It worked too well because all our new users immediately clicked through — with no exploration. The CTAs stood out too much from the illustration. To solve this I decided to make the CTA part of the illustration. This was achieved by creating animated SVGs that blend and merge with the illustrations rather than standing apart. The SVG's were then paired with a cursor effect that gave that extra nudge.
The biggest technical challenges of the project were centered around the illustrations. This was due to the large detailed illustrations. Which were 2.3gb in there raw format. We tested out many different file formats and compression types to get the file sizes down to a useable level.
The transformation of the NLM website highlights the effective collaboration between creative design and user-oriented thinking. The approach involved identifying and addressing user pain points, animation, and fostering increased user engagement.
Through these efforts, we've successfully crafted a digital platform that not only generates excitement around the museum but also ensures a seamless and immersive journey for users. The revamped website now serves as a genuine reflection of NLM's commitment to excellence in storytelling and Irish folklore.
I'd use vectors instead of rasterised images to create the illustration. This would have given us far more control and I think we could have done a lot more with the illustrations. We could have also avoided a lot of technical issues due to the file sizes.
I learnt so much from this project because it was so unique. Art direction, development, animated svgs to name a few.
