Teatre Lliure has a large number of features on its website, such as the upcoming shows, ticketing system for the purchase of tickets, as well as a repository of the history of plays. At Omatech, we took care of unifying the different utilities in a single web, connecting the different platforms in one site.
The design
The real stars of Teatre Lliure are the plays and therefore their posters, very different from each other create a web full of color and joy, so the focus should be on them. To enhance the prominence of the shows, we opted for an austere interface, with a monochrome combination with touches of red. In addition, we created the iconography exclusively for this project.
In order to improve usability and user experience we made a big bet for a synchrony between moving and static elements throughout the site. For some of the animations, we used the Scroll to reduce the space, as for example in the header of the page.
Tool for photo touch-ups.
Graphic editor used for the web application.
Interaction
Prototyping is one of the key points before the final layout, it consists of making a sketch of the content, its distribution and the organization of the different pages.
This process allows us to check that all the navigation works correctly, perform user tests and obtain the first conclusions before moving on to the layout phase. In this way, we can make the necessary corrections hand in hand with the client.
Interactive protoptype made with Invision.
Design made with the Figma application.
Mobile first
All navigation, interface and interactions were designed with the mobile version in mind, since the source of traffic was mainly from mobile devices.
Accessibility
At Omatech we are extremely strict in the implementation of a fully accessible layout, performing tests of contrast, speed, screen reading and markup optimization to achieve a fast and clean content load.
Without losing sight of accessibility and usability, this layout phase implemented small animations when scrolling, which give the navigation that attractive and dynamic touch to improve the user experience.
Sustainability
The digital world provides answers to the environmental problem that exists globally, a clear example is the reduction of paper consumption and therefore the massive deforestation of forests and jungles. Although all that glitters is not gold, and only the use and maintenance of the network means CO₂ emissions of 800 million tons.
To reduce emissions at Omatech, we make a strong commitment so all our digital projects are more sustainable and use minimum energy consumption when they receive visitors. To achieve our purpose, we rely on three pillars, reducing the size and weight of the images, optimizing the code and providing a good user experience.
Optimization
Having a good positioning in the Google search engine is essential to achieve the desired digital visibility and thus have good metrics in scope. Google's algorithm rewards those websites that prioritize the elements that improve the user experience.
The world's most popular search engine evaluates three main aspects: content loading speed (LCP), design stability (CLS) and first input delay (FID).
Personalized programming
One of our premises is a meticulous programming to carry out the requirements of each project. Our goal is to offer quality, flexible and modular solutions, so that they can grow and adapt to a constantly changing market.
For Teatre Lliure, we did a very ambitious job and implemented a PHP framework with an excellent robust and scalable code. We implemented Laravel- mySQL, which offers a reusable and fluid results for subsequent maintenance work.
In order for the complex functions of the website to work properly we used JavaScript, a language that allows us to control almost all existing mechanisms for sites, as well as graphic and multimedia elements. In addition, we use JavaScript libraries to perform this type of actions.
Open code framework used.
Storage database
Integrations
For Teatre Lliure an indispensable requirement was to facilitate user navigation through the web, as well as simplify all registration and purchase processes.
The ticket sales management is possible thanks to the SecuTix platform, which has a Single Sing On (SSO) service that allows Teatre Lliure users to link their login on the website with this platform.
In addition, we also use their Webservices (Restful API) to retrieve user data, session information and show passes.
Data migration
At Omatech we are extremely strict in the implementation of a fully accessible layout, performing tests of contrast, speed, screen reading and markup optimization to achieve a fast and clean content load.
Without losing sight of accessibility and usability, this layout phase implemented small animations in the content, which help to create attractive and dynamic navigation.
CMS
For content management, we replaced the existing Drupal with our own editor to manage and update all the information of the website, ticketing system and applications in an easy, simple and intuitive way. To facilitate the updating task, so it can be done from the front end, we opted for an MVC (Model-View-Controller) programming standard.
This way, we make sure that the continuous modifications that are made to the Teatre Lliure website are carried out easily and smoothly, without forgetting the pre-established corporate identity and brand image.
In Omatech, we are experts in creating self-manageable pages.
