Discuss the project
Discuss the project
For all questions

Chelyabinsk Zoo

2025

Municipal Website Redesign — chelzoo.ru

UX/UI-design, Frontend, DevOps, CMS, big love for animals and the work we do. Free-of-charge project.

About project

The old website was made 10 years ago. Since then, the information landscape has changed, and the zoo has grown significantly. We decided to support the local zoo and redesign their website free of charge.
Task #1

To refresh the zoo's visual identity and communicate their values ​​in a way that builds a strong emotional connection with the visitors and makes them genuinely want to come.

Task #2

To simplify the website's user experience so that employees can update and maintain content without asking external specialists for help.

We did it once this way

So that later we could do it this way

Pelican Project

On the podcast we discussed test-driven development, the aspects of open-source website licensing, and much more.

Learn more about the Pelican project →

Immersion in Project

  • Impact Mapping

    We linked the project's goals with the website users, their actions and tasks, to ensure we only deliver what's valuable.

  • Customer Journey Mapping

    We studied how users interacted with the old website to keep successful patterns and improve the new experience.

  • User Story Mapping

    We visualized user scenarios on the website and divided them into releases to start with the most important things.

  • Visual concept

    We intentionally included some controversial solutions to not only agree on the desired style but also to identify the ideas definitely not suitable for the project.

Tech Stack

We combined all our approaches and tested new tools in real-world scenarios. We focused on quality, not speed.

Infrastructure

  • Docker
  • Kubernetes
  • kind
  • helm
  • DevContainers

Frontend

  • React
  • Next.js
  • TypeScript

Backend

  • Strapi
  • PostgreSQL
  • S3
  • Swagger

Testing

  • Playwright
  • axe-core
  • JMeter
  • Step CI

Approaches

  • Test-Driven Development

Website Accessibility

We realized that the version for the visually impaired users is not a mandatory requirement for a municipal website, moreover, it doesn’t address the real users’ needs. So we abandoned the idea of a separate version for the visually impaired in favor of inclusive design and a specific approach to the layout.
Semantic markup
WCAG color contrast
Typography hierarchy

  • Design

    We've captured the zoo's atmosphere through design, giving users a clear idea of what to expect from their visit.

  • Concept

    A minimalist interface where vibrant animal photos and simple illustrations serve as accents, creating an emotional connection with the user.

  • Illustrations

    The drawings were inspired by real zoo animals, each with a name and a story. They become characters that help navigate the website.

  • Photos

    We used cute and funny photos of animals in natural settings without enclosures, as well as moments of human-animal interactions, to highlight the caring attitude towards them.

  • Typography

    The interface uses Inter Medium, a modern font with high legibility, soft geometry, and a minimalist feel.

We adapted the website for tablet and mobile versions

  • 1920px
  • 1366px
  • 1024px
  • 768px
  • 375px

Dev + Design = ❤

We set ourselves a challenge to develop the layout of the entire website through screenshot testing. Now the layout matches the design pixel-in-pixel.

Our presentation at UWDC 2025 →

Testing Strategy

We use test-driven development to ensure the project's stability, so we carefully thought out the project's testing strategy in advance.

  • e2e

    Functional Testing

    Website components behave as expected

  • a11y

    Interface Accessibility Tests

    Website is accessible according to WCAG criteria

  • API CMS

    Integration Testing

    CMS saves and sends the required data to the frontend

  • Load testing

    Simulating traffic

    Website loads quickly

  • Visual

    Pixel-perfect testing

    Layout looks exactly like the design

More details about our testing strategy at Heisenbug 2025 →

A full-fledged CMS

We implemented a content management system and adapted it for the zoo team. Using our guidelines they can independently manage the website without our help.

Transfer of Content and SEO Optimization

We transferred 10 years of news posts history so that the new website inherited the search value of the old one. We updated the pages structure, SEO settings, and analytics, and set up a dynamic sitemap. As a result, the pages are indexed correctly, and search rankings remain stable.
The site is indexed better and reaches the top of search results.
Metrics show which pages are most often viewed.

Flexible and scalable infrastructure

  • Deployed the website on a k8s cluster

    This allowed us to establish a scalable and resilient project architecture from the start.

  • Universal setup

    Created a setup that will be reused in future projects of various sizes.

  • Optimized the costs of hosting

    Additionally, we set the goal of making cluster maintenance cost-effective without sacrificing stability.

Automated tests and monitoring of stability

  • 1

    GitHub Actions

    Running automated tests directly in the pipeline

  • 2

    Before merging to master

    Checking changes on the environment built in the pipeline

  • 3

    Scheduled tests

    Running daily checks to spot problems early

Finding problems quickly
«We got a website that not only runs smoothly without interruptions, but one we can proudly show off!»
Chelyabinsk Zoo

3+ months to implement a similar project

Talking about the project in our own words

Learn more about Tourmaline Core