Komuna Warszawa

2024
Design a flexible and accessible WordPress website for Teatr Komuna Warszawa, a non-profit arts institution in Warsaw. The site needed to accommodate their evolving programming, prioritize accessibility, and reflect their dynamic artistic spirit without imposing a fixed visual identity.
Role
I worked on a project with Ire, a person I co-run our studio. I had a leading role in both the design and development of the site.
Stack
Wordpress
PHP

Why I Said Yes

Teatr Komuna Warszawa (TKW) is a non-profit theater from my hometown, Warsaw, dedicated to giving a stage to experimental arts—theater, music, dance, art residencies. The opportunity to design their online presence felt like a natural fit. As co-founder of the art and design studio isz szi, I felt our experimental approach and enthusiasm would be an excellent match for TKW's dynamic character.

Because of the institutional nature of TKW, the project needed to align with Web Content Accessibility Guidelines (WCAG) 2.2, which made the project more challenging and required deepened research into web accessibility but this made it more meaningful and rewarding. Such requirments benefit the entire team (including content editors) and the users of the website.

Project Goals

The project aimed to tackle several unique challenges while supporting KW’s evolving and adaptive nature:

  1. Scalable Design: Create a flexible design that could adapt to KW's growth and changing needs, even without a fixed visual identity.
  2. Accessibility: Align the design with WCAG standards, ensuring an enjoyable, accessible experience.
  3. Customizable Templates: Develop Elementor-compatible templates that are versatile and easy to manage.

I was driven to make sure each goal allowed the website to retain a unique artistic flair, even with the technical constraints.

Challenges

  • Maintaining Flexibility without a Set Identity: KW's choice not to establish a consistent visual identity required a design that was fresh yet neutral enough to avoid defining their evolving identity.
  • Typeface selection: We needed a typeface that was versatile enough to support multiple group of languages while remaining accessible.
  • Balancing Interactivity with Accessibility: KW wanted interactive elements to make the site engaging without compromising on accessibility or ease of use.
  • Custom solutions: We needed to extend functionality of event's plugins and wordpress theme to introduce dynamic components that would improve website editor's workflow.

Solutions and Process

While working on TKM project, we run into many restrains and challenges, like the minified plugin codes that couldn't be extended with custom code or lack of certain features that in the design process we thought would be easy to implement. Many months spent developing a Wordpress website gave me a lot of experience that will allow me to forsee technical implementation of the design already at the stage of sketching.

Solution 1: Customizable Templates and Design System

To provide KW with flexibility in content management, we created Elementor-compatible templates composed of blocks and widgets. This modular approach allowed the team to reconfigure page layouts easily, adapting as their programming evolved.

The design system was built to enhance traditional article formats with off-grid elements, adding a unique touch while maintaining readability.

Solution 2: Choosing the right font

We chose one of the fonts from a Polish typographer Edward July Picolo, a font that is very readable and at the same time has a couple of unique touches to the characters that make it stand out.

Btw: This web portfolio is set in Picolo too!

Solution 3: Subtle Interactions and Visual Accents

To balance KW's request for an engaging experience with the need for accessibility, we focused on small gestures that enhanced usability without overwhelming the user:

Interactive Menus: Added subtle color changes and movement effects for a more dynamic navigation.

Custom Cursor and Icons: Designed a custom cursor and redirection icons to signal interactivity in a distinctive way.

Color Accents: Used throughout the design, these accents provide visual interest without detracting from readability.

Solution 4: Expanding default functionality

I worked on extending the functionality of the event plugin (MEC) with custom php code. Mu customisation enabled the display of all available dates for a given event on the event page and on the tickets and calendar pages, as well as the display of separate archive pages for different types of events. These changes meant that the content editors were able to create one event page with multiple occurrences which constituted a big upgrade for a team that was used to handling multiplications of events roaming around their pages.

Key Lessons

  • Customizing with PHP: I learned a lot about PHP and how to extend wordpress functionality with custom code. I was working in child theme to make sure that the rest of the plugins and theme can be updated without affecting the custom code.
  • Accessibility: Prioritizing accessibility does not mean compromising on creativity; rather, it brings a unique design challenge that can lead to more thoughtful and inclusive solutions.