International Showtimes
website relaunch
International Showtimes provides a user-friendly API to get worldwide cinema showtimes, ticketing links, film metadata and video-on-demand streaming availability data.
This project was realised during my time as Senior UX/UI Designer at the agency Weventure.
About the project
Goal and briefing
International Showtimes wanted a comprehensive redesign of the entire website, as the previous version was incomplete, inconsistent and outdated. Not only was the visual appearance modernised, but the user guidance and functionality were also optimised. In addition, a completely new corporate identity was developed that represents the company in a contemporary way and strengthens its brand identity.
My tasks and responsibilities
I managed and implemented the entire project independently. This included the complete project management as well as the planning and realisation of all customer meetings and presentations. I developed the new corporate identity, carried out user research and developed the strategic concept for the redesign. I also created interactive prototypes to optimise the design and functionality and ensure a user-friendly solution.
The background
Challenges before the start of the project
There were several challenges before the project began: The client's tight schedule and limited budget required efficient planning and quick decisions. As I was the only person responsible for both the design and project management, I had to coordinate and implement all processes. In addition, the client did not have a clear idea of the direction the new design should take, which required intensive concept development and close coordination.
Target group and their needs
The target group of International Showtimes includes cinema-goers, cinema and event operators as well as media and entertainment companies. Users expect a user-friendly platform with fast and reliable information on current film screenings. Intuitive navigation, appealing design and clearly organised content are essential to make it as pleasant as possible to use. In addition, personalised filter options and up-to-date data are crucial, especially for cinema operators and film distributors who need to rely on accurate information.
Insight into one of the four created personas: “The developer of film apps”
Research and analysis
Alex Nowak
32 years old
Male
Degree in computer science
70,000€ gross per annual
Engaged
Berlin
Socio-economic data
With a modern lifestyle characterised by technology, this person belongs to the middle to upper middle class. He is always up to date with the latest technology and is actively involved in the developer community.
Behavioural data
He is constantly up to date with the latest technology and regularly keeps himself informed via tech blogs, podcasts and social networks such as LinkedIn and X. He likes to invest in new devices, software and training to further develop his skills.
Psychological data
Driven by curiosity and a passion for technology, he seeks recognition for his work and exchange with other developers. Access to the latest technologies and tools is of central importance for his personal and professional development.
Relation to the service
By using International Showtimes, he can save time as he no longer has to collect film data manually. The platform provides a solid foundation for the development of innovative film apps and thus contributes to the success of his own project.
The market analysis
The benchmarking process
This benchmarking analysis focused on International Showtimes' direct competitors, prioritizing data quality and functionality – key areas for the client's relaunch. Data was collected through desk research and analyzed to compare competitors across defined criteria. A SWOT analysis evaluated the company's strengths, weaknesses, opportunities, and risks. Based on these findings, specific recommendations were developed to optimize the platform and enhance competitiveness.
Strengths and weaknesses
The strength of International Showtimes lies in its comprehensive global database of cinemas and film times. The platform offers a wide range of detailed film information that goes beyond just showtimes. However, there is room for improvement in terms of user guidance. The personalisation of recommendations could be tailored more closely to the individual preferences of users. Furthermore, integration with other services such as streaming platforms is still limited.
The recommended actions
To increase user satisfaction, International Showtimes should redesign the user interface, strengthen personalisation and expand integration with other services. Data quality must be ensured through regular checks. A particular focus is on optimising the mobile app.
The best practices
Intuitive navigation, a clear design with plenty of white space and an appealing look with high-quality images and micro-interactions are crucial to positively influence the user experience. Clear menus, breadcrumbs and a good visual hierarchy help users find their way around. Users expect personalised experiences. User profiles that store interests and history, as well as intelligent algorithms that analyse user behaviour, can be used to provide tailored recommendations. The integration of social media makes it possible to share content and get in touch with friends. Integration with other services such as streaming platforms and ticket providers creates added value for users.
Challenges and assumptions
The challenges
With a tight two-month timeframe and a limited budget, several challenges arose. Not all best practices could be implemented, and an ideal process was not feasible. The existing content restricted a comprehensive menu structure, and film image rights could not be secured in time. Personalization features and service integrations were outside the project scope, while data quality remained the client’s responsibility. Although a mobile-first approach was followed, budget and time constraints prevented the inclusion of push notifications, GPS-based cinema search, and mobile ticketing—key features for the client’s future plans.
Direct links to streaming services and the option to book cinema tickets directly via the platform make it easier to access films and events.
Regular, automated and manual checks of the data as well as collaboration with partners and the incorporation of user feedback ensure that the information is correct and up-to-date. Optimising the mobile app is a must. Fast loading times, simple operation, intuitive navigation and additional functions such as push notifications, a GPS-based cinema search and mobile ticketing make the app a valuable tool for film fans on the go.
The assumptions
With these challenges in mind, it was assumed that the focus would be on the essential aspects of the user interface, with compromises in terms of design and functionality. However, optimising the mobile app was a priority. It was assumed that the revised user interface would improve user satisfaction and increase mobile usage. It was also assumed that the client would take internal measures to ensure data quality and would invest in the further development of the platform in the long term to add missing functions.
Conception and strategy
In the conception and strategy phase, three different design approaches were developed in order to explore different solutions. Detailed wireframes were then created to visualise the basic structure and user guidance. Based on these drafts, the design guidelines were defined and a well thought-out design strategy was established, taking into account both the aesthetic and functional aspects of the product.
Option three
The design concept features a bright, modern look with a flexible grid system for clear topic separation and easy information access. Subtle accents in light grey and purple-pink enhance the visual hierarchy, with purple-pink adding dynamic highlights. Navigation is handled via a hamburger menu with a pull-out sidebar for intuitive use. A sans-serif font ensures clear readability. Robots in the visual language emphasize the technical nature of the products, creating a futuristic feel. Honeycomb-like elements and fine lines, inspired by programming structures, reinforce the innovative, technological theme.
Option one
The design combines nostalgic retro cinema aesthetics with modern, futuristic elements. The colour palette is based on classic retro tones, while lasers, grid systems and holographic graphics add a contemporary component. A dark background with glowing laser elements enhances the cinema feel and is a reminder of the magic of the big screen. The visual language focuses on emotional film scenes, which, combined with expressive typography, create an atmospheric and captivating design. Inspired by outer space, the result is a visually impressive design that stylishly unites the past and the future. Headlines are set in capitals, creating a bold look that complements the imagery and colour scheme. A sans-serif font is used for a clean, modern appearance and optimal readability.
Option two
The design concept emphasises a bright, open appearance with lots of whitespace and a white background to create a clear and clean aesthetic. The focus is on images and typography, with a modern, bright shade of blue as an accent colour to draw attention. The imagery shows scenes from outer space and spaceships to convey a futuristic atmosphere. For the typography, a modern sans serif font is used for the body text to ensure optimum readability. In contrast, a computer-style serif accent font creates a technical look that visually emphasises the products on offer. The design is complemented by fine mesh graphics that gently emphasise the themes of the future, technology and progress.
Low-Fidelity Wireframes
A wireframe was developed for each website for both the desktop and mobile versions. The content and hierarchy were precisely harmonised in several feedback loops with the customer. Even at this early stage, a rough outline was drawn up of how the content would be presented visually and which modules could be repeated in different places. It was also important to obtain an estimate of the required amount of text at an early stage in order to ensure a harmonious and functional balance between design and content.
Developed ideas and approaches
The design guidelines
The colour scheme
HEX
#FFC700
RGB
252, 197, 82
CMYK
0, 26, 75, 0
Usage
Accent
HEX
#002BFF
RGB
25, 3, 166
CMYK
100, 91, 4, 0
Usage
Accent
HEX
#57F7F2
RGB
115, 227, 228
CMYK
51, 0 ,19 , 0
Usage
Accent
HEX
#FF00FF
RGB
191, 4, 179
CMYK
47, 87, 0, 0
Usage
Accent
HEX
#221635
RGB
34, 22, 53
CMYK
95, 98, 42, 59
Usage
Background
HEX
#FFFFFF
RGB
255, 255, 255
CMYK
0, 0, 0, 0
Usage
Text,
Accent
The typography
ABC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
AKIRA EXPANDED
Desinged by typologic
Used for headlines
Super bold
ABC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Roboto
Desinged by Christian Robertson, Paratype, Font Bureau
Used for headlines and body text
Regular, bold
The iconography
The visual world
The design system
The design system is based on a uniform and modern style that has been specially developed for optimised mobile use. Due to the dark background, the focus was on easily recognisable contrasts to ensure clear readability and visual harmony. The Atomic design was implemented consistently and designed for all different states to create a consistent and intuitive user experience. Simple and understandable operation was at the centre of this to enable seamless interaction on all end devices.
The design strategy
Increase the conversion rate
To increase the conversion rate, call-to-actions were placed prominently on the homepage and subpages in a colour that contrasts with the background. They are located in strategically relevant places, with the first CTA already visible in the first viewport. The button text ‘Start free trial’ clearly and directly communicates the added value to lead users to the desired action.
Improving usability
To optimise usability, the desktop version offers an easily recognisable menu overview, while the mobile version uses an immediately visible, familiar hamburger icon. The expandable menu means that all menu items can be recognised at a glance in the first viewport. The content of the website follows a clear, well thought-out hierarchy and is visualised in a concise and easy-to-read manner. A consistent design ensures intuitive and user-friendly navigation.
Increase of user engagement
In order to increase user engagement, special attention was paid to the new corporate identity. The targeted use of colours, images and typography creates a strong eye-catcher that attracts attention and is memorable. In the desktop version, the parallax effect is used in many modules as well as animations and hover effects to give the user visual feedback during interaction, intuitively guide navigation and at the same time emphasise the design.
Improve clarity and readability
A limited colour palette with strong contrasts was chosen to optimise readability. The sans serif font used is modern, web-optimised and offers numerous weights for optimal readability. The website's UI has a uniform and clear design, follows proven best-practice layouts and utilises generous whitespace so that the content is clearly in focus and can be understood intuitively.
Mobile-first approach
To meet the mobile-first approach, the website's layout and UI were initially designed for mobile and then adapted for desktop. This ensured visible content, smooth interactions, and an optimized scroll flow. Buttons and input fields were sized for easy touchscreen use, with adjusted spacing to prevent errors and enhance usability. The mobile-optimized design keeps the site structured and user-friendly across all screen sizes, ensuring a seamless experience on smartphones.
Strengthen brand identity
To strengthen the brand identity, a corporate identity was developed that captures the nostalgic 80s atmosphere through its color scheme and imagery, creating an emotional appeal. The design immediately attracts attention on the homepage and stays memorable. Both the interface and logo align with this style, while decorative elements enhance the distinctive look. The CI is consistently applied to social media and print, ensuring a cohesive brand image and long-term recognizability.
Prototyping and iterating
The high-fidelity screen designs were developed in the prototyping and iteration phase. With the help of Figma, interactive prototypes were created that simulate animations, hover effects and menu navigation. The tools used and the animations designed are explained in detail below.
The prototyping
Tools used
The Figma web tool, which was also used to develop interactive prototypes, was used to create the wireframes and screen designs. The designs were presented in meetings using the presentation mode and commented on directly with specific feedback. Jira was used for project management and cross-team collaboration. Miro and Google Sheets were used to conceptualize the project and create the sitemap.
Interactive functions and animations
The desktop version of the website offers numerous hover effects for buttons and menu items. For the “More” menu item, a dropdown opens on hover to reveal additional subpages. Card elements, such as products or case studies, also have hover effects to simplify navigation and make the content stand out from the background. Input fields are highlighted with a click and a high-contrast border to make the interaction clearly recognizable. Markets are displayed on a map via a modal, while in the mobile view a vertical accordion solution ensures an optimal display.
Implementation
Collaboration with developers
The cooperation with the developers in this project was as follows: Once the corporate identity had been established, a developer regularly attended the weekly meeting with the client. Wireframes were discussed first, followed by the screen designs. Individual modules were specifically presented in their mobile and desktop versions, as the complete pages had to be created from these. This modular approach enabled a clear focus on the design and functionality of specific areas of the website. The close weekly collaboration allowed ideas to be developed together, open questions to be clarified directly and smooth implementation to be ensured.
Iterations after development
After the design and concept phase, my main task was completed. The project was handed over to the client’s developer, accompanied by a comprehensive presentation of all designs and desired functionalities. During the implementation phase, I provided support by answering questions and giving feedback on the development progress.
After the website was completed, I conducted a design review to identify any potential errors. However, due to time and budget constraints, extensive user testing could not be carried out.
Results and conclusion
The redesign of the International Showtimes website provided valuable insights into both the design process and collaboration with the development team. The mobile-first approach ensured that usability on mobile devices was optimized, with a clear navigation structure, well-placed call-to-actions, and a carefully designed scroll flow playing a crucial role.
Another key learning was the close coordination with the developer, who was involved early in the design process. The iterative approach—first presenting wireframes and later high-fidelity screen designs in modules—significantly facilitated the technical implementation. Additionally, the modular design approach contributed to a consistent UI and strong brand recognition.
The new design system played a major role in enhancing the user experience. A dark background with well-placed contrasts improved readability, while animations and hover effects increased interactivity. The corporate identity was consistently applied across all formats, reinforcing brand identity and recognition.
Challenges arose due to time and budget constraints, which made it impossible to implement all planned features immediately. Functions such as push notifications or GPS-based cinema search were therefore scheduled for future development. Although comprehensive user testing could not be conducted, a final design review ensured that no critical errors remained.
Overall, the redesign resulted in a more modern and user-friendly website that excels both functionally and visually. Its clear structure, improved UI, and optimized mobile experience contribute to a sustainable improvement in user experience and strengthen the International Showtimes brand in the long term.
This project was realised during my time as Senior UX/UI Designer at the agency Weventure.
International Showtimes provides a user-friendly API to get worldwide cinema showtimes, ticketing links, film metadata and video-on-demand streaming availability data.
International Showtimes
website relaunch
About the project
My tasks and responsibilities
I managed and implemented the entire project independently. This included the complete project management as well as the planning and realisation of all customer meetings and presentations. I developed the new corporate identity, carried out user research and developed the strategic concept for the redesign. I also created interactive prototypes to optimise the design and functionality and ensure a user-friendly solution.
Goal and briefing
International Showtimes wanted a comprehensive redesign of the entire website, as the previous version was incomplete, inconsistent and outdated. Not only was the visual appearance modernised, but the user guidance and functionality were also optimised. In addition, a completely new corporate identity was developed that represents the company in a contemporary way and strengthens its brand identity.
Research and analysis
Insight into one of the four created personas: “The developer of film apps”
Alex Nowak
32 years old
Male
Degree in computer science
70,000€ gross per annual
Engaged
Berlin
Socio-economic data
With a modern lifestyle characterised by technology, this person belongs to the middle to upper middle class. He is always up to date with the latest technology and is actively involved in the developer community.
Psychological data
Driven by curiosity and a passion for technology, he seeks recognition for his work and exchange with other developers. Access to the latest technologies and tools is of central importance for his personal and professional development.
Behavioural data
He is constantly up to date with the latest technology and regularly keeps himself informed via tech blogs, podcasts and social networks such as LinkedIn and X. He likes to invest in new devices, software and training to further develop his skills.
Relation to the service
By using International Showtimes, he can save time as he no longer has to collect film data manually. The platform provides a solid foundation for the development of innovative film apps and thus contributes to the success of his own project.
The market analysis
The recommended actions
To increase user satisfaction, International Showtimes should redesign the user interface, strengthen personalisation and expand integration with other services. Data quality must be ensured through regular checks. A particular focus is on optimising the mobile app.
Direct links to streaming services and the option to book cinema tickets directly via the platform make it easier to access films and events.
Regular, automated and manual checks of the data as well as collaboration with partners and the incorporation of user feedback ensure that the information is correct and up-to-date. Optimising the mobile app is a must. Fast loading times, simple operation, intuitive navigation and additional functions such as push notifications, a GPS-based cinema search and mobile ticketing make the app a valuable tool for film fans on the go.
Challenges and assumptions
The assumptions
With these challenges in mind, it was assumed that the focus would be on the essential aspects of the user interface, with compromises in terms of design and functionality. However, optimising the mobile app was a priority. It was assumed that the revised user interface would improve user satisfaction and increase mobile usage. It was also assumed that the client would take internal measures to ensure data quality and would invest in the further development of the platform in the long term to add missing functions.
The challenges
With a tight two-month timeframe and a limited budget, several challenges arose. Not all best practices could be implemented, and an ideal process was not feasible. The existing content restricted a comprehensive menu structure, and film image rights could not be secured in time. Personalization features and service integrations were outside the project scope, while data quality remained the client’s responsibility. Although a mobile-first approach was followed, budget and time constraints prevented the inclusion of push notifications, GPS-based cinema search, and mobile ticketing—key features for the client’s future plans.
The best practices
Intuitive navigation, a clear design with plenty of white space and an appealing look with high-quality images and micro-interactions are crucial to positively influence the user experience. Clear menus, breadcrumbs and a good visual hierarchy help users find their way around. Users expect personalised experiences. User profiles that store interests and history, as well as intelligent algorithms that analyse user behaviour, can be used to provide tailored recommendations. The integration of social media makes it possible to share content and get in touch with friends. Integration with other services such as streaming platforms and ticket providers creates added value for users.
Strengths and weaknesses
The strength of International Showtimes lies in its comprehensive global database of cinemas and film times. The platform offers a wide range of detailed film information that goes beyond just showtimes. However, there is room for improvement in terms of user guidance. The personalisation of recommendations could be tailored more closely to the individual preferences of users. Furthermore, integration with other services such as streaming platforms is still limited.
The benchmarking process
This benchmarking analysis focused on International Showtimes' direct competitors, prioritizing data quality and functionality – key areas for the client's relaunch. Data was collected through desk research and analyzed to compare competitors across defined criteria. A SWOT analysis evaluated the company's strengths, weaknesses, opportunities, and risks. Based on these findings, specific recommendations were developed to optimize the platform and enhance competitiveness.
Conception and strategy
In the conception and strategy phase, three different design approaches were developed in order to explore different solutions. Detailed wireframes were then created to visualise the basic structure and user guidance. Based on these drafts, the design guidelines were defined and a well thought-out design strategy was established, taking into account both the aesthetic and functional aspects of the product.
Developed ideas and approaches
Option two
The design concept emphasises a bright, open appearance with lots of whitespace and a white background to create a clear and clean aesthetic. The focus is on images and typography, with a modern, bright shade of blue as an accent colour to draw attention. The imagery shows scenes from outer space and spaceships to convey a futuristic atmosphere. For the typography, a modern sans serif font is used for the body text to ensure optimum readability. In contrast, a computer-style serif accent font creates a technical look that visually emphasises the products on offer. The design is complemented by fine mesh graphics that gently emphasise the themes of the future, technology and progress.
Option one
The design combines nostalgic retro cinema aesthetics with modern, futuristic elements. The colour palette is based on classic retro tones, while lasers, grid systems and holographic graphics add a contemporary component. A dark background with glowing laser elements enhances the cinema feel and is a reminder of the magic of the big screen. The visual language focuses on emotional film scenes, which, combined with expressive typography, create an atmospheric and captivating design. Inspired by outer space, the result is a visually impressive design that stylishly unites the past and the future. Headlines are set in capitals, creating a bold look that complements the imagery and colour scheme. A sans-serif font is used for a clean, modern appearance and optimal readability.
Option three
The design concept features a bright, modern look with a flexible grid system for clear topic separation and easy information access. Subtle accents in light grey and purple-pink enhance the visual hierarchy, with purple-pink adding dynamic highlights. Navigation is handled via a hamburger menu with a pull-out sidebar for intuitive use. A sans-serif font ensures clear readability. Robots in the visual language emphasize the technical nature of the products, creating a futuristic feel. Honeycomb-like elements and fine lines, inspired by programming structures, reinforce the innovative, technological theme.
The design guidelines
The colour scheme
The typography
ABC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
ABC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The iconography
The visual world
The design system
The design system is based on a uniform and modern style that has been specially developed for optimised mobile use. Due to the dark background, the focus was on easily recognisable contrasts to ensure clear readability and visual harmony. The Atomic design was implemented consistently and designed for all different states to create a consistent and intuitive user experience. Simple and understandable operation was at the centre of this to enable seamless interaction on all end devices.
Roboto
Desinged by Christian Robertson, Paratype, Font Bureau
Used for headlines and body text
Regular, bold
AKIRA EXPANDED
Desinged by typologic
Used for headlines
Super bold
HEX
#FFC700
RGB
252, 197, 82
CMYK
0, 26, 75, 0
Usage
Accent
HEX
#002BFF
RGB
25, 3, 166
CMYK
100, 91, 4, 0
Usage
Accent
HEX
#57F7F2
RGB
115, 227, 228
CMYK
51, 0 ,19 , 0
Usage
Accent
HEX
#FF00FF
RGB
191, 4, 179
CMYK
47, 87, 0, 0
Usage
Accent
HEX
#221635
RGB
34, 22, 53
CMYK
95, 98, 42, 59
Usage
Background
Usage
Text,
Accent
CMYK
0, 0, 0, 0
RGB
255, 255, 255
HEX
#FFFFFF
Prototyping and iterating
The high-fidelity screen designs were developed in the prototyping and iteration phase. With the help of Figma, interactive prototypes were created that simulate animations, hover effects and menu navigation. The tools used and the animations designed are explained in detail below.
Implementation
Iterations after development
After the design and concept phase, my main task was completed. The project was handed over to the client’s developer, accompanied by a comprehensive presentation of all designs and desired functionalities. During the implementation phase, I provided support by answering questions and giving feedback on the development progress.
After the website was completed, I conducted a design review to identify any potential errors. However, due to time and budget constraints, extensive user testing could not be carried out.
Collaboration with developers
The cooperation with the developers in this project was as follows: Once the corporate identity had been established, a developer regularly attended the weekly meeting with the client. Wireframes were discussed first, followed by the screen designs. Individual modules were specifically presented in their mobile and desktop versions, as the complete pages had to be created from these. This modular approach enabled a clear focus on the design and functionality of specific areas of the website. The close weekly collaboration allowed ideas to be developed together, open questions to be clarified directly and smooth implementation to be ensured.
The prototyping
Tools used
The Figma web tool, which was also used to develop interactive prototypes, was used to create the wireframes and screen designs. The designs were presented in meetings using the presentation mode and commented on directly with specific feedback. Jira was used for project management and cross-team collaboration. Miro and Google Sheets were used to conceptualize the project and create the sitemap.
Interactive functions and animations
The desktop version of the website offers numerous hover effects for buttons and menu items. For the “More” menu item, a dropdown opens on hover to reveal additional subpages. Card elements, such as products or case studies, also have hover effects to simplify navigation and make the content stand out from the background. Input fields are highlighted with a click and a high-contrast border to make the interaction clearly recognizable. Markets are displayed on a map via a modal, while in the mobile view a vertical accordion solution ensures an optimal display.
Results and conclusion
The redesign of the International Showtimes website provided valuable insights into both the design process and collaboration with the development team. The mobile-first approach ensured that usability on mobile devices was optimized, with a clear navigation structure, well-placed call-to-actions, and a carefully designed scroll flow playing a crucial role.
Another key learning was the close coordination with the developer, who was involved early in the design process. The iterative approach—first presenting wireframes and later high-fidelity screen designs in modules—significantly facilitated the technical implementation. Additionally, the modular design approach contributed to a consistent UI and strong brand recognition.
The new design system played a major role in enhancing the user experience. A dark background with well-placed contrasts improved readability, while animations and hover effects increased interactivity. The corporate identity was consistently applied across all formats, reinforcing brand identity and recognition.
Challenges arose due to time and budget constraints, which made it impossible to implement all planned features immediately. Functions such as push notifications or GPS-based cinema search were therefore scheduled for future development. Although comprehensive user testing could not be conducted, a final design review ensured that no critical errors remained.
Overall, the redesign resulted in a more modern and user-friendly website that excels both functionally and visually. Its clear structure, improved UI, and optimized mobile experience contribute to a sustainable improvement in user experience and strengthen the International Showtimes brand in the long term.