Operation Anthropoid Memorial - Illustration

I redesigned a website for Wittmann Tours on a shoestring budget

Out of bounds

When I first talked to Wittmann Tours about redesigning their website, I had quite different ideas about how to present their tours.

Mobile view of the website

My initial idea was to present all the tours as an immersive interactive documentary using lots of photography and videos. After calculating the cost of such production and talking with Wittmann Tours about the budget, I soon realized that we would have to scale the whole thing down so much that it wouldn't feel like the product I had imagined. I ended up abandoning the idea rather than settle for an inferior version of the website.

Back to the drawing board

Even though there wasn't much money to work with, I didn't want to abandon the project completely because of my strong relationship with Wittmann Tours. Plus, I was already excited about making something for them. Things just needed to be simplified as much as possible. In the end, I came up with an animated family I could use as a creative element on multiple pages. I also decided to reuse most of the backend code, which saved me a lot of coding time.

Simplify the UX

One of the most important design changes was to simplify the process of viewing and booking tours. I spent quite some time figuring out what needs to be eliminated in order to achieve a simpler and smoother user experience. I added historical background to each tour as well as frequently asked questions.

Concept of new UX design
Concept of new UX design presented to the client.
When you click on a speech bubble with a review, you're taken to the exact review the excerpt comes from on TripAdvisor.

Inspired by the game

Keeping things simple, I created only the necessary number of characters to accompany visitors on the website.

Inspired by the visuals of Point and Click adventure games like Broken Sword, I created a family that could be used throughout the website. I animated a walk cycle of each character then used these cycles to create the intro, reviews section, and a 404 page. My client also requested that the introductory pictures for the main tours be illustrated, so I chose the most iconic objects from each tour and used them as title illustrations.

Character design concept
Instead of using video, all animations are rendered in realtime with WebGL.
Illustration of Operation Anthropoid Memorial Illustration of Astronomical clock at Prague's Old Town Square Illustration of Dancing House in Prague Illustration of Spanish Synagogue in Prague

Reuse, then recycle

My focus was to be able to reuse as much code as possible to reduce the overall budget.

I reused as much of the original back-end code as possible. I installed the latest security updates and made minor tweaks. Thanks to my ability to salvage most of this code, I ended up saving a ton of development time. The front-end code, on the other hand, had to be done from scratch. Fortunately, libraries like pixi.js and gsap, made the whole process a lot simpler and fun. In the end I optimized all the assets and code for fast load times to please visitors and search engines.

404 page. The quotes are being randomly picked from the list.

What fancy thing can I make for you?