Nou is Berlin’s biggest studio for Argentine Tango and urban meeting space. The challenge was to build and design a new digital home for them that displayed their comprehensive offers — from dance classes and workshops to inclusive courses and leadership trainings — consistently across multiple programmes and calendars. It also needed to stay true to the organic, innovative, and urban brand that is distinctly Nou’s.
Previously run on a static site with texts only, on which dates and information naturally went out of sync between pages, we built a new website with WordPress in 2018 and created structured inputs for event, video, and team data to synchronise them across all calendars and pages along with a bespoke theme and design. We also moved the site to a new short, location-based domain without zero loss in page ranking thanks to technical SEO and careful re-directs.
Since then the site received three major revisions to add and show recurrence-specific data with all calendars and schedules, enhance accessibility, and provide custom filtering for events and the extensive video library created during the lockdown years. With the last revision it received a fresh look and feel along with dedicated landing pages for beginners and room rentals featuring subtle webgl animation.
Features
Recurrence Data
A bespoke plug-in adds subtitles, alternative prices, substitutions, or guest DJs to recurring calendar event dates. In calendars and schedules recurrence data supersedes the main data of an event: If there are substitution teachers for a given class on a given date, these are displayed instead of the main teachers for that date. Recurrence data works for individual recurrences as well as event parts. A factory takes a given set of event posts, turns these into recurrences according to an appropriate strategy (one-time or recurring event, event part, or mixed event), and adds recurrence data, if available for a specific event date. It then returns a recurrence collection. Recurrence collections can be generated for single events, event queries, and even for team member-specific events. Out of this work, my Lazy Event Organiser plug-in evolved, an event management plug-in for WordPress that comes with recurrence data out of the box.
Full programme with date filtering
The events schedule page is Nou’s second most visited site and we wanted to make sure users could find all the info they need there quickly. Originally it had started out as weekly schedule that could be filtered by event type, teacher, or audience in 2018. Our users could not really warm up to it and requested a traditional weekly schedule format, which we ran between 2019 and 2023 with a three week preview. As the weekly plan was tedious to deal with for screen reader users and could not be used to show medium-term event data in a meaningful way, we changed to to date-based filtering and started offering a three-months calendar. Users can select just about any day or period they want to see classes and other events for within the next three months with a custom date range picker. Preset buttons for “today” or “this week” provide the former “traditional” weekly view. The daterange picker functionality was modelled after the one AirBnb’s successfully ran until 2019. It even comes with range highlighting, so users can always see what they are about to select. On mobile and for screen reader users, we revert to two standard date inputs for better usability.
Automatic fee selection
Nou offers both fixed and flexi prices for different event types. Our main event class can differentiate automatically between both and render value objects and displays accordingly.
Single view slide-outs and custom routing
If users want to learn more about a class, workshop, or dance event, they can now quickly pull out details for any listed event with a single click instead of navigating back and forth between a programme and a single page. If they like an event, they can also share it with the webshare API. Even though event slide-outs are fully integrated with the browser history API — which means you can use the back/forward browser buttons — we still keep the traditional single views as permalinks too. Users can link to them with a button at the bottom of every slide-out. The single views are the permanent version of all our events. They don’t disappear even when the event is over. Custom routing redirects you to a permalink version, if you use the slide-out link after an event has expired.
Faceted filtering for the video library
While the events schedule uses date ranges to filter events, the video library for learning tango at home now comes with drilldown filters that update after every choice. This means users will never see a “sorry, no videos in these categories” message anymore. Under the hood is a new custom filtering system that works for all filter setups on the page. Check the page sources to see how it works. The site currently uses isotope as filter engine but can take in any other through a facade.
Optimised for accessibility
We took an accessibility-first approach towards designing the new features and updating the pages in 2023. The new body font significantly improves readability — we have already received positive feedback for this from a student with Usher syndrome. All relevant images and videos now have captions and even the webgl gallery images on the booking page can be focussed and navigated to like normal images. All dropouts and slideouts can be accessed by keyboard navigation. Last but not least, the site has a universal escape handler that closes whatever is open on whatever page in the order opened when you use the escape key.
Right-hand navigation pane
The new navigation comes with quick action links for the most-wanted pages and a full menu that slides in with a (for lack of a better description) “coming together” animation that has also received lovely feedback from people who seem to enjoy it quite a lot. Our slide-outs use the same motion. Other than for navigation and slide-outs we have refrained from using further layout animations putting accessibility needs ahead of optics.
Team interviews
Instead of showing customary biographical info, we designed an interview for teachers and team members with fun and some unusual questions that makes it easier for students and people interested in learning to dance to relate to them, even when they have not met yet.
