A newborn online presence

Pixetic's collaboration with Lviv Puppet Theatre has begun with the design thinking workshop involving key stakeholders and theatre visitors as well as designers from our team. We came to a conclusion that in order to be more competitive, the theatre requires improving of its visitors’ physical experience and a digital transformation as a part of it. Whilst first was under stakeholders’ responsibility we took care of users’ online experience.

The website is a communication medium between the theatre and its visitors. It's a place where they can learn about the repertoire, actors and crew, pick a play and finally buy tickets. The essential challenge here was to recreate the atmosphere of the theatre, incorporate the entertainment element into the process and combine it with a new, modern vibe, and at the same time provide the functionality.

The main pain points of the website’s visitors are searching for a certain play, buying tickets and general interaction with the theatre. As the work on the information structure and wireframes for the page has started, we stumbled upon a serious obstacle — the puppet theatre didn’t have any graphic style or even a hint of brand identity. The logo and a scare visual representation that they had didn’t align with our vision of a modern theatre website. In order to work on the website, we had to start from getting a general understanding of the site aesthetics and the language it should speak to its users.

Thus, we’ve decided to start from the base, and once the logo and visual identity of Lviv Puppet Theatre were created we moved on to building their website.

As an output of a workshop conducted with users, we had personas, customer journey maps and the list of prioritized user stories. Next step in the process was a competitor research. During this phase, we went over some of the competitors’ websites to look at their structure. What we’d discovered was that poor structure, disorganized schedules, and total nightmare with the experience of buying tickets are common for most of the theatre websites. At this point we’d realized, it made more sense to use as a reference for designing ticket buying flow, the user experience of movie theatres.

We worked on the information architecture and user flows by mapping out how users navigate the website. This mind map helps designers in the process and keeps the logical structure when working on the wireframes.

Special attention was given to the home page. It is visualized as a stage with an actor and a puppet that is brought to life as soon as a user enters the website. The focus here is on the current repertoire, information about the upcoming events (premiers, master-classes, parties, etc.). All the items have a “built-in” and designed call to action.

To make the user experience even more seamless, the repertoire and show pages are interconnected. When surfing through a page describing a certain show, a user gets to see and choose other shows without leaving the page.

The shows’ schedule is connected to the calendar, it is easy to navigate, and the user can buy tickets in a couple clicks.

Mobile and tablet versions have slight variations from the desktop version. This was made on purpose, considering the peculiarities of smaller devices. The schedule layout is adjusted to the size of mobile screen, feedback form and buttons look somewhat different to grant even more usability.

• A polished new website that offers a smooth experience and easy access to all the necessary information
• The ability to buy tickets online
• Redesigned covers for all the running plays that are in line with the general design

The case of Lviv Puppet Theatre is special to us because of the complex approach we've chosen while working with this customer. It has once again proven us the importance of the holistic brand identity. Presenting a new and distinctive brand style along with the website resulted in an organic brand perception and established a smooth communication with users.

• Design thinking workshop
• Competitor research
• User flows
• Information architecture
• Wireframing
• Visual design
• Interaction design and prototyping
• User testing

Check out the result.