Thespie

About the client

Thespie is a cross-media platform that helps people to explore 1,000+ digital resources involving theatre- and arts-related performances, clips, podcasts, eBooks, livestreams, exhibits, and concerts. Founded in 2019 by Tyler Stoops, a theatre enthusiast with vast experience in tech and arts marketing, Thespie started out as a platform for selling tickets for theatre shows in the UK and gradually developed into a platform providing a connection to the world of entertainment via online services.

“Arts entertain, inspire and comfort us, which is especially vital in challenging and stressful times.”  

– The Thespie team

Background

Even though the COVID-19 pandemic brought a lot of challenges, it also stimulated the arts to think outside the box and look for new creative forms and outlets. With most venues closed down, artists moved their work to the internet. Thespie was no exception. What started as a theatre ticket service in 2019 turned into a cross-media platform with diverse entertainment content.

Such an increase in content quantity and number of categories inevitably affects the user experience making it more uneven and uncomfortable. Ester Digital went to great lengths in order to avoid that. Our task was to improve the current UX design and create new digital ways to access the content.

Another goal our development team was working on was to ensure that the website would be as fast-loading as possible with any amount of content.

We collaborated with Thespie to create a service that will help people to stay connected to the theatre and continue immersing themselves in cultural life from the safety of their homes, as well as motivating artists and organizations in their mission to reach out to audiences.

As the scope of the project was difficult to define at the beginning of work, Ester provided Thespie with a dedicated service team working exclusively on the Thespie website. Increased focus ensured there were no other distractions for the developers, which established a high level of collaboration between the client and the team, adaptability to the client’s requests, and a deeper understanding of the ultimate goal.

Solution

Architecture

Before embarking on the actual design and development process, we planned out the architecture of the Thespie service since it is the cornerstone of the whole project. We did that in a way that allows for simplicity of the development, further scaling up, and web indexation.

Back End

The back end is the basis of every digital project. The Thespie website was created using the Django framework. It includes an administrative panel with plenty of opportunities for content management and REST API responsible for the data exchange and its distribution to the client side of the website.

Blog

Website promotion and high rank in Google is almost impossible to achieve without a proper content strategy. For the Thespie’s blog one of the ready-to-use solutions available on the market was chosen – Prismic Headless CMS. It is a powerful platform with excellent compatibility with React and NextJS and a huge number of libraries for integration. Using an out-of-the-box solution for blog allows us to reduce the processing time and development cost.

Client Side

Here comes the most important part of the whole project – the client side. Let’s start with the definition. The client side is the part of the service that creates the first impression. Essentially it is the front end, responsible for how users perceive Thespie and how the interaction with the platform goes. When working on this project component, we chose the NextJS framework because it allows for:

• easy data management;
• great access speed;
• effortless search engine optimization.

Design

The creative community can often seem inaccessible and exclusive. However, Thespie wanted us to deliver a web design that would make visitors feel welcomed and appreciated. The created visual identity manages to capture the whimsical nature inherent to performing arts while presenting the given data structures in a more straightforward and simple way.

Let’s take a look at the website pages as almost all of them were redesigned to comply with the brand-new UX approach.

Homepage

Is there any other page in the web platform structure that bears the proud title of the heart of the website? Taking into account all our experience and industry knowledge, we would say “no.”

Previously, the Thespie homepage featured only the Shows section with category classification. With the growing content quantity, the new page structure was a necessity. We designed a page that allows easy access to every new type of content. All the categories such as Theatre Streaming & Video, Theatre Audio & Music, Theatre eBooks, Scripts & Songbooks, Theatre Learning Resources are literally one click away. As well as the company’s blog page.

A special place on the page is dedicated to the Artist Relief block. It is an initiative aimed to support artists and creative professionals through the COVID-19 pandemic. The Thespie team simply couldn’t stand aside.

Header & Footer

Header and footer aren’t components that are expected to be informative and indispensable for users. How much time do you spend surfing the footer of your favorite website? Not a whole lot, we assume?

When working on the Thespie platform we were trying to change this and use header and footer space in the most useful way. The re-designed header now has a multilevel dropdown menu. One featured and one popular show are now available right from the menu within the Digital and London categories. Search is also available to the right of the header.

The new version of the footer covers single-level links so that it is incredibly easy to enter the category pages of specific shows. Also, you can access all the information on Privacy Policy, Terms & Conditions, and Cookie Policy from the footer – all those fun pages no one really reads, but that have to be there.

New Category Page

Thespie has hundreds of films, series, performances, talks in their archives. It is easier to get lost in such an amount of entertainment opportunities than appreciate their diversity. And here is where Ester designers get to shine. Our team created a versatile category page with several filters working at the same time. Now Thespie users could sort the products by Genre, Mood, Pricing options, and Availability. Previously introduced categories were moved to the Format subsection, where they became subcategories. It is a filter solution without compromise.

As a result of these changes, all Digital shows are now divided into categories that are dynamically linked to the backend. On the Next.JS framework, the following technique was employed to create dynamic pages:

1 const CategoryPage = ({category, allProductions}) => {
2  return <>...</>;
3 };
4
5 CategoryPage.getInitialProps = async ({ query }) => {
6  const { category: currentCategory } = query;
7  const caregories = await api.getCategories();
8
9  const foundCategory = caregories.find(({ slug }) => slug === currentCategory);
10  const allProductions = await api.getLiveDigitalProductions();
11
12  // filter productions by id of api categories tags
13  const filteredProductions = allProductions.filter(item =>
14    item.tags.find(itemTag =>
15      foundCategory.tags.some(categoryTag => categoryTag.id === itemTag.id)
16    )
17  );
18
19  return {
20    category: foundCategory,
21    allProductions: filteredProductions,
22  };
23 };

However, smart design is not enough to ensure proper performance and optimization of the platform. The development part matters as well. In addition to multiple filters, we made a page layout to be as compact and straightforward as possible and display the maximum number of product cards. We decided to replace simple pagination with an infinity scroll.

1  import { useState } from 'react';
2 import VisibilitySensor from 'react-visibility-sensor';
3
4 const Item = (props) => {
5  const [viewed, setViewed] = useState(false);
6
7  const onVisibilitySensorChange = (isVisible) => {
8    if (!viewed && isVisible === true) {
9      setViewed(true);
10      props.setItemsQuantity(props.itemsQuantity + 1);
11    }
12  };
13  return (
14    <VisibilitySensor onChange={onVisibilitySensorChange} scrollCheck={true}>
15            <ItemCard key={item.id} />
16    </VisibilitySensor>
17  );
18 };

What have we gained from this solution? It allowed us to speed up loading and further work of the platform several times, as users don’t have to wait for the complete page loading to find out what shows are compatible with the requirements. We implement this functionality with the help of react-visibility-sensor library that identifies cases when the element is in the view area or out of it.

Being effective and generate traffic is not only about the webpage appearance. When working on the category page special attention was paid to its SEO-optimization. All the filters we choose are search engine friendly. Any changes in filters reflect changes in the browser’s address bar. That means that every filter has its unique link that can be indexed and used in an advertising campaign.

Search

A carefully planned out category page with various filters is important, but it is not the only solution to streamline the choice for Thespie visitors. To make this process easy, we managed a search box creation from scratch.

With every letter the user enters, the search result is updated and clarified. We took into account that sometimes people don’t remember the exact name of the show, but they know precisely where the performance took place. That’s why we chose not to be attached to the name as the only search criteria. We used a system that allows creating a certain chain of questions for the best search results based on the following fields:

• name of the show;
• location;
• platform.

Here arises the question: how results would be displayed after the search is completed? Good point. What we do is sorting by popularity using the following criteria:

• Results with a complete match go first. In this case the size of the letters matters.
• Then go results with a complete match but ignoring capital and lower-case letters. 
• After that, we display results starting with a phrase in the search.
• And the last ones: results that match individual words or abbreviations made up of words in the search box.

To release this solution we used a match-sorter library.

1 import React, { useState, useEffect } from 'react';
2 import matchSorter, { rankings } from 'match-sorter';
3
4 const Search = (props) => {
5  const [searchedItems, setSearchedItems] = useState([]);
6  const [inputValue, setInputValue] = useState('');
7
8  const handleSearchInputChange = (e) => {
9    setInputValue(e.target.value);
10  };
11
12  const getItems = (value) => {
13    const mainSortByName = matchSorter(props.items, value, {
14        keys: ['work_name', 'venue.name', 'platform.name'],
15        threshold: rankings.WORD_STARTS_WITH,
16      });
17    const sortByPopularity = mainSortByName
18      ? mainSortByName.sort(
19          (item1, item2) =>
20            item1.popularity - item2.popularity
21        )
22      : [];
23    return sortByPopularity.slice(0, 9);
24  };
25
26  useEffect(() => {
27    setSearchedProductions(getItems(inputValue));
28  }, [inputValue]);
29
30 return (
31  <>
32   <Input
33    onChange={(e) => handleSearchInputChange(e)}
34    value={inputValue}
35   />
36   {searchedItems.map((item) => (
37    <Item key={item.id} />
38   ))}
39   {!searchedItems.length && (
40    <p>No search results found</p>
41   )}
42  </>
43 );
44 };
45

Product Page

Thespie lists filmed performances, livestreams, podcasts, digital exhibits, artist talks, scripts, eBooks, and many more. The platform links each performance to a certain platform that streams it, for example, Audible, National Theatre Live, YouTube, Netflix, Kindle, or opens them onsite. Every product includes a short tag-like description and a brief summary, also providing similar options to watch. Users can create accounts where they can add shows they would like to watch later, as well as filter and sort them applying various criteria.

Now let’s turn to website optimization as it was a vast scope of work.

Code Splitting

With the growing amount of content, the number of web components is growing as well. That’s why the previous approach to website optimization and speed improvement stopped working and the Ester development team had to get creative. But we are not afraid of challenges.

Initially, the platform used to load a single Javascript file with all the components on every page the user visited. This approach is effective enough for websites with a small number of pages, and it worked great for Thespie at the very beginning. However, with a growing number of components, the system could no longer bear the overwhelming pressure, and we had to implement code splitting.

Let us be your Wikipedia for a minute. Code splitting allows to unwrap the code into components and load only those parts that the user needs at a certain time. Loading components on demand helps to improve the performance of the platform, reduce the impact on the device’s memory, which leads to lower battery usage. Your new site’s score within Google Pagespeed Insights will also be a nice bonus.

When optimizing the Thespie website, we decided to implement lazy loading to components and libraries that are not related to the main core of the site but at the same time have significant weight. All the other libraries were left in the main package as split loading could only damage the work with an increasing number of requests.

But how to understand which libraries meet the requirements mentioned above and which don’t? We needed information that allows us to make a decision on what Javascript components are extra and can be unloaded. At this stage, we turned to the @next/build-analyzer library and created an interactive visualization with all the project’s components, their size, and subcomponents.

For every project we work on, we aimed to make it as easy and convenient to use as possible. We deliver digital solutions that are smart, clear, effective, and don’t require an army of developers and designers to implement ongoing changes and improvements. Thespie wasn’t an exception.

Atomic Design

Any project, no matter how simple it is, has complex connections between its components. There are thousands of basic elements such as buttons or images that are used in many places of the platform and correspond to each other.

To make the platform management easier, we implemented the Atomic Design methodology and divided all the UI components into the following elements:

1. Atoms. They are basic building blocks, the foundation of everything. When talking about web interfaces, atoms are HTML tags such as a form, an input field, or a button.
2. Molecules. Labels, inputs, and buttons are not all that usable on their own. But once they are united into one form, they can be really valuable. This integration of basic elements – atoms – is a molecule, a skeleton of the whole UI.
3. Organisms. It is a set of molecules that forms a separate complex section of the interface. Organisms can include similar or different types of molecules. For instance, a page title can consist of different components – a logo, the main menu, and a search form while a product grid is one molecule (product image, name, and price) that is repeated many times.

Atomic Design is a great structure that shows what components are used for different parts of the site. This reduces the chance of code duplication and allows to reuse some atoms of the site (such as fonts, indents, blocks, and others), as well as combine them and create brand-new molecules and organisms.

Results

With the help of various features designed and developed by Ester, Thespie renewed their platform and turned it into a highly optimized website that can bring people and theatres together, enrich their lives during self-isolation (and all-around) and help talented artists promote their work.