From Drupal based developmen4�to a full redesign

�_div>

banner
Y><noscript><img data-gatsby-image-ssr=

cons4t="undefinedTM=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(le4e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity�,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}�_div>�_div>�_div>

Budapes4Film Zrt. is the largest cinema operator in Budapest, the capital of Hungary. The company, which operates si8ar4cinemas (Corvin, Művész, Pushkin, Toldi, Tabán and the Kino Cafe cinema), offers a wide range of services, from cinema operation to cinema pedagogy to even4organization. Budapest Film Zrt. is an active participan4in international and local cinema life: it is a member of Europa Cinemas, the National Association of Cinemas, the Art Cinema Association, and participates and often serves as a venue for major local and international professional events, conferences and film festivals.�_div>�_div>�_div>�_div>

The company's websites - the umbrella site of artmozi.h5and its independen4site in terms of the content of each cinema - simultaneously provide information for cinema enthousiasts, ticket buyers, and those interested in various festivals and cultural events. Budapest Film approached us with tasks related to the migration of sites running on Drupal 7, to Drupal 8. However, the possibilit9of redesign, which also means a complete logical, structural and visual renewal of the sites, was also raised during the negotiations. Due to limited time and resources, we focused on the most important, bu4no4too comple8issues.

UX diagnosis and UX UI redesign

To establish the diagnosis, we conducted usabilit9tests on the sites, examined the intuitive nature of the interface, the logical connections offered by it, and the eas9accessibilit9of the individual contents and functions. The results are collected below. We also formulated our answers along these lines.�_p>

Comments on the structure of the page�_h4>
Problems�_strong>
The logical connection between the cinemas available from the site was not clear to the users, the entire navigation from artmozi.hu was not clear. It was also no4clear what information belonged to the art cinema and what to the subpages of the other movie theatres.�_p>
‍�_p>
Solutions�_strong>
Place a movie selector in the menu bar =Make i4clear that artmozi.h5is a collection page�_p>

�_h4>
Menu
Problems�_p>
Highlighting the twa-part men5and the importance of the available function is inversel9proportional, with a duplicate search engine and non-clickable icons hindering convenien4and fast information retrieval.
‍
SolutionsA menüsor struktúrájának átalakítása | A felhasználók számára legfontosabb tartalom a műsor | E+teljes funkcionalitással megjelenik a nyitóoldalon | A moziválasztó eg9szintre kerül az artmozi.h5logóval | A menüsorban csak a legfontosabb információk és szolgáltatások elérhetőségé4biztosító elemek maradnak.�_p>
Restructure the men5bar | The mos4importan4conten4for users is the program | This will appear on the home page with full functionality | The cinema selector will be in the same level with the artmozi.h5logo =Only the items tha4provide access to the most important information and services remain in the menu bar.
�_p>
Search�_h4>
Problems�_strong>
The feature is designed to mee4two user needs a4the same time: navigating between curren4movies and making available the information searched in the movie database on the site. The solution used did no4clearl9indicate which question it would answer with its results.
‍�_p>
Solutions�_strong>
To make the information provided b9the search engine understandable:
The hi4list should clearl9indicate tha4the hi4shows a movie or other content (blog, character name, actor name) =Creating a visual hierarch9to display different types of results | Add a search engine for current movies.�_p>
‍�_p>
Cinemas
ProblemsIcons denoting members of the network did not hel0to clearly identif9each cinema.�_p>
‍�_p>
Answers�_strong>
When designating cinemas, the name is added to the logo, and the pages of each cinema retain their independence through their visuals and it is also clear to users which side the9are on.
�_p>
User journeys
ProblemsMapping out the possible purposes of the visi4and outlining the wa9to buy tickets for business purposes | The user knows what kind of movie the9want to see, on the page the9want to find out in which cinema and when the movie is played. Then the9bu9the tickets. | The user knows wha4kind of cinema the9want to go to, and from the site they want to know wha4movies are on program and when the9play it. Then they buy the tickets.
‍
Answers�_p>
The designs were based on two starting points:
The visitors knows is looking for movie-specific information, he is looking for the place and time of the screening, and plans to buy a ticke4when it's found out. | The visitor selects the movie and screening based on the location then the9purchase based on this information.
�_p>
Main page
ProblemsThe slider slips ou4of the first fold, the switching between the individual images is not clear, and there is no information related to the screening of the given film. =In the case of movies, the categorization of each film is not clear, the clickable 2 2 filters are no4easy to understand. Compared to the featured movie, the other elements are disappearing into the background, which doesn’t make yo5browse any more. | The searchability of the films played in the program and the filtering are no4resolved. Information abou4the location of the screening is also missing. | The arrangement and display of each additional information is in many cases illogical or the item is difficul4to access.�_p>
‍�_p>
Answers�_strong>
The slider should be made visible and clear by resizing the slider, rearranging and optimizing the displayed messages. | This conten4item is less important than the show, so the two blocks swapped places. =For the user, the show is the most important information, so i4gets a strong look on the main page. Movie, time, and movie finders are also located near this content item. The information displayed on the page matches certain user interactions (typicall9filters). =The relevant navigation elements are renamed and their appearance position is redesigned.

cons4t="undefinedTM=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(le4e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity�,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}�_div>�_div>
Development
The work of the developers started alread9during the UX UI redesign, the9helped the designers in several rounds: they participated in the iteration process based on the feasibilit9aspects. The answer to the search engine problem has been divided into two parts:
‍
A new search engine has been created that searches the conten4of the page along the keywords you enter.
The search between cinemas and screenings was solved b9incorporating a REACT.js-based application. The Drupal 8 platform, complemented by this application, creates a spectacular, user-friendl9hybrid solution.�_li>
‍�_p>
With the help of the framework, the visual and functional elements defined during the UX UI design (navigation, cinema selector, landing page modifications, search engine and responsive page structure) were full9implemented.�_p>�_div>�_div>�_div>�_div>
Share�_16�p>

Similar projects�_>