Our mission
Before we walk you through the process of our creation, you might want to know how we started and why we redesigned the website in the first place. The National Theatre's home page is its main channel for ticket sales, and therefore our main goal was nothing less than increasing them. That sounds pretty easy, right? So let's reveal the challenge. We had to do it without changing the third-party ticket sales application and without any power over paid traffic. And we also wanted to give visitors to the page a pleasant experience through a beautiful environment and neat finish. How did we do it?
- BULLETPROOF STRUCTURE
- SMOOTH SHOPPING PROCESS
- CREATIVE HIGH-CLASS DESIGN
- EFFECTIVE VISUAL COMMUNICATION CONCEPT
- INTUITIVE ADMIN INTERFACE
- RESPONSIVE AND MOBILE FRIENDLY
What we did
Our UX team focused on new structure, smart navigation, easy presentation, graphic aesthetics, sophisticated technology & good looks. Obviously, all of it was based on comprehensive analysis we did at the very beginning and created with respect to all the needs and knowledge which were worth gathering. After creating wireframes, we moved on to preparing the high design and the system design proposal.
User experience
- Strategy
- Analysis
- Information Architecture
- Usability Testing
User Interface
- Moodboards
- Hi-fi wireframes
- Design
- Prototypes
Development
- Backend
- Frontend
- CMS
Process
"The National Theatre is a widespread institution with four various ensembles with different needs and requirements. We have been discussing these needs during multiple meetings and have worked on blending them into one functional platform."
-
ico goals
Strategy
We have all been to the “golden chapel“ at some point of our lives, but during the redesign we didn't want to rely on our experience only. Learning the page visitors’ patterns and the necessities of the National Theatre employees was essential for us. By combining the reviews from both groups, we managed to create a perfectly functioning virtual space with improved efficiency.
-
Ico Inf. architecture
Architecture
During our research we discovered that visitors seek the easiest access to the theatre performance overview, so we focused on making that as effortless as possible. Our goal was to increase sales. The main changes that occurred in the website structure were inserting the programme and repertoire links to the top deck of navigation and moving the least visited pages to the menu on the side.
-
Ico priority guide
Content
The concept stands on two principles - an uncomplicated path to the performance search and user-friendly selection tools. We built various navigation elements within the programme and repertoire pages, which make the visitor’s life easier. In the detail of each theatre performance, we emphasize the visual aspect by using a strong image in the heading and wide photo gallery right on the page. The first visual impression is often the main decision-making ingredient.
Process
"The new graphic layout of the National Theatre's web presentation stands on several stepping stones. It's mainly the minimalist and fashionable design, lightness and clean structure. The website also has to induce a feeling of luxury, while keeping it artistic enough and connecting the traditional and contemporary theatre forms. We managed to adjust all of that pretty well. The process ran smoothly, mostly thanks to a detailed moodboard and our design system, which keeps the graphic layout and the accompanying ideas united through all the pages.“
Moodboards
We prepared two directions of moodboards. Both were based on the concept of a bulletin board and, whereas the first one was more about visuals and posters, the second one followed a more minimalistic path of significant typography on monochromatic fields. While we fine-tuned the final mood of the website, we partially combined these styles and created a whole new look.
High-fidelity
wireframes
Thanks to the High-Fidelity Wireframes, we could easily show the client the page layout, written content and components without needing to choose a final colour combination or definite pictures. Through this stage we fine-tuned the operational and later the functioning prototype--which laid ideal groundwork for moving to the next step: design.
Design
As we have already mentioned - our design is contemporary, minimalist and with a touch of luxury characterised by charming golden elements. Clarity, functionality and a timeless output were equally important to us. For the typography, we worked only with the fonts provided by the CI of The National Theatre, but we gave them enough space, high contrast and large indentation, so the texts could stand out. We also created a complete monoline icon set combining modern design with a hint of Neo-Renaissance – the ornamental style of the historical National Theatre building.
In numbers
-
0+Screens
-
0Icons
-
0Components
Prototypes
When designing the High-Fidelity Wireframes, we prepared the entire structure and individual elements of the UI. We designed them in a special prototyping tool before the start of the web development, so we would have them ready for animations and visual effects. Thanks to that , we were able to consult with the client about motions, interactions and other effects during the design phase and refine their final shape according to the client’s wishes. All animations and interactions give the website a feeling of comfort and fluency while keeping the important instructive purpose.
Process
"Where do we start when developing websites and mobile applications? The initial outlook points in several important directions. Mainly it's the technical analysis of the client's existing web presentation and the assignment, the client's goals and wishes and last, but not least, the needs of those who are actually in charge of the web content on the client's side - the administrators."
HEADLESS CMS
POWERED BY COMPONENTS
We have chosen a CMS which would be sufficiently flexible and would give editors a great deal of freedom in creating site content, but at the same time wouldn’t tie up our hands during development. By applying the DatoCMS together with the Universal Web Application, we managed to solve both issues. The website is built of components and offers its editors the option of fully adapting the site sections.
BACKEND / GRAPHQL
The Backend communicates through the GraphQL interface and is ready to create additional digital touchpoints. Thanks to the Server Pre-Rendering Technology (SPR) on the Vercel platform the entire website is well indexed for search engines and also nearly indefinitely scalable.
Client's opinion
“Our main requirements included excellent performance on mobile & other devices and also that either local or foreign visitors could easily buy a ticket or comfortably find any information needed. We are happy that the website is customer-friendly, visually attractive and highly functional, therefore we believe that our visitors will be also satisfied.”
a revolution with us?