Mastercard OFF Camera
UX/UI designer
redesign
research
landing page
PWA
WordPress
~6 months
Figma
Context & challenge
→ Designing a mobile application and redesigning the information architecture and schedule functionality for the Mastercard Off Camera film festival
→ Navigating limitations related to embedding an iframe-based schedule and building within a WordPress environment
→ Ensuring seamless PWA implementation without direct access to developers
read more
The project involved creating a festival experience tailored to diverse user needs: attendees, industry guests, and journalists. My responsibilities included designing a mobile app (PWA), revamping the information architecture of the WordPress-based website, and redesigning the schedule feature—previously limited to desktop view. One significant challenge was the iframe-based schedule, developed by an external company. This disrupted the site’s information architecture and required repositioning certain UI elements like the shopping cart outside of the global top bar. Another constraint stemmed from the site’s WordPress backend, which limited flexibility and required each screen in the app to be easily replicable within that system. Adding to the complexity, I had no direct contact with the developers—so the handoff documentation had to be extremely precise and implementation-ready.
read more
The project involved creating a festival experience tailored to diverse user needs: attendees, industry guests, and journalists. My responsibilities included designing a mobile app (PWA), revamping the information architecture of the WordPress-based website, and redesigning the schedule feature—previously limited to desktop view. One significant challenge was the iframe-based schedule, developed by an external company. This disrupted the site’s information architecture and required repositioning certain UI elements like the shopping cart outside of the global top bar. Another constraint stemmed from the site’s WordPress backend, which limited flexibility and required each screen in the app to be easily replicable within that system. Adding to the complexity, I had no direct contact with the developers—so the handoff documentation had to be extremely precise and implementation-ready.
My role & contributions
→ Sole UX/UI designer, collaborating directly with festival stakeholders
→ Redesigned the website’s information architecture (2022) and later adjusted it due to schedule redesign (2024)
→ Created the entire mobile app (PWA) from scratch
→ Developed the component library, color palette, and typography based on the brand but with creative freedom
read more
I served as the only designer on this project, collaborating with festival organizers. My work began in 2022 with a comprehensive redesign of the website’s information architecture, followed by minor adjustments in 2024 related to changes in the schedule module. I designed the mobile app (PWA) from the ground up—including flows for both logged-in and guest users. Although I designed these systems, I no longer have influence over their appearance or behavior today. The visual and interaction design was based on festival’s brand guidelines but allowed for a wide range of stylistic decisions, giving me flexibility to tailor the experience to user needs.
read more
I served as the only designer on this project, collaborating with festival organizers. My work began in 2022 with a comprehensive redesign of the website’s information architecture, followed by minor adjustments in 2024 related to changes in the schedule module. I designed the mobile app (PWA) from the ground up—including flows for both logged-in and guest users. Although I designed these systems, I no longer have influence over their appearance or behavior today. The visual and interaction design was based on festival’s brand guidelines but allowed for a wide range of stylistic decisions, giving me flexibility to tailor the experience to user needs.
Information architecture
→ Defined key user types: regular attendees, industry guests, and journalists
→ Based on Google Analytics and stakeholder knowledge
→ Designed three distinct information architectures depending on the festival lifecycle phase
→ Iterated based on feedback from real users post-launch
read more
Using data from Google Analytics and insights from festival stakeholders, I identified the main website visitors: regular festival-goers, film industry professionals, and journalists. While not formal personas, these user types helped guide the structure and prioritization of content. The architecture was also mapped against the festival’s lifecycle, which includes three main phases: → Pre-festival (December–April): ticket sales, industry contact, volunteer recruitment. → During festival (April–May): peak engagement, daily event updates, and high traffic. → Post-festival (May–December): low activity, early preparations, film submissions. Each phase had a tailored IA variant to match the needs and behaviors of that moment. I also reviewed similar festivals (like Nowe Horyzonty or WatchDocs) to understand users' expectations. Following the first launch, user feedback via customer support indicated strong approval of the structure, but also highlighted one key UX issue: users struggled to find the schedule hidden under “Edition 2023.” I quickly adjusted the structure to make the “Schedule” a standalone menu item for better visibility.
read more
Using data from Google Analytics and insights from festival stakeholders, I identified the main website visitors: regular festival-goers, film industry professionals, and journalists. While not formal personas, these user types helped guide the structure and prioritization of content. The architecture was also mapped against the festival’s lifecycle, which includes three main phases: → Pre-festival (December–April): ticket sales, industry contact, volunteer recruitment. → During festival (April–May): peak engagement, daily event updates, and high traffic. → Post-festival (May–December): low activity, early preparations, film submissions. Each phase had a tailored IA variant to match the needs and behaviors of that moment. I also reviewed similar festivals (like Nowe Horyzonty or WatchDocs) to understand users' expectations. Following the first launch, user feedback via customer support indicated strong approval of the structure, but also highlighted one key UX issue: users struggled to find the schedule hidden under “Edition 2023.” I quickly adjusted the structure to make the “Schedule” a standalone menu item for better visibility.
The original menu information architecture. At the time, all navigation items were presented as separate links with no structure or hierarchy, which made it difficult for users to find what they needed.
The original menu information architecture. At the time, all navigation items were presented as separate links with no structure or hierarchy, which made it difficult for users to find what they needed.
←
Diagram of menu and footer architecture from 2022/2023.
I created a system of base categories and dynamic menu items that adjusted to each phase of the festival. Later, we moved the “Schedule” out of the “Edition 202*” section and added it as a main menu item. The shopping cart had to be relocated into the iframe due to technical limitations.
←
Diagram of menu and footer architecture from 2022/2023.
I created a system of base categories and dynamic menu items that adjusted to each phase of the festival. Later, we moved the “Schedule” out of the “Edition 202*” section and added it as a main menu item. The shopping cart had to be relocated into the iframe due to technical limitations.
Menu structure for the live festival phase. The revised design decluttered the interface by organizing links into logical, easy-to-scan groups—reducing cognitive load during the most intense time of user activity.
Menu structure for the live festival phase. The revised design decluttered the interface by organizing links into logical, easy-to-scan groups—reducing cognitive load during the most intense time of user activity.
Mobile app
→ Designed the mobile festival app from scratch as a PWA
→ Delivered two UX variants: logged-in and guest users
→ Built under tight technical constraints: iframe-based schedule and WordPress CMS
→ Structured modularly for easy CMS implementation
read more
The mobile app, built as a PWA, had to be light, fast, and easy to integrate into the existing WordPress platform. Its frontend logic was entirely constrained by WordPress capabilities, which meant every screen had to follow a repeatable structure using standard components. The app had two main user flows. Logged-in users had access to: → Home → My profile (with reserved tickets and invitations for RSVP events if applicable) → Favorites → Schedule → More Guest users had access to a simplified version without profile or favorites. The “More” section contained static but important links—like FAQs, contact information, and a logout button. Designing for these flows involved deep consideration of states, behaviors, and content placement across screens, while staying within platform limitations.
read more
The mobile app, built as a PWA, had to be light, fast, and easy to integrate into the existing WordPress platform. Its frontend logic was entirely constrained by WordPress capabilities, which meant every screen had to follow a repeatable structure using standard components. The app had two main user flows. Logged-in users had access to: → Home → My profile (with reserved tickets and invitations for RSVP events if applicable) → Favorites → Schedule → More Guest users had access to a simplified version without profile or favorites. The “More” section contained static but important links—like FAQs, contact information, and a logout button. Designing for these flows involved deep consideration of states, behaviors, and content placement across screens, while staying within platform limitations.
Initial wireframes. Although some details changed later in the visual design phase, the main user flows and structural logic stayed intact.
Initial wireframes. Although some details changed later in the visual design phase, the main user flows and structural logic stayed intact.
Flow from login through the main sections to logout. This prototype demonstrates the app’s core navigation. I recommend watching at 1.5× speed due to prototype performance limitations.
Flow from login through the main sections to logout. This prototype demonstrates the app’s core navigation. I recommend watching at 1.5× speed due to prototype performance limitations.
←
Difference between logged-in and guest home pages. Logged-in users have access to personalized features such as profile details, reservations, and favorites. Guests see a simplified view focused on discovery.
←
Difference between logged-in and guest home pages. Logged-in users have access to personalized features such as profile details, reservations, and favorites. Guests see a simplified view focused on discovery.
Reservations and tickets section. Events are divided into “Upcoming” and “Past” to avoid confusion. Each entry is clearly labeled as a ticket or reservation to prevent misuse.
Reservations and tickets section. Events are divided into “Upcoming” and “Past” to avoid confusion. Each entry is clearly labeled as a ticket or reservation to prevent misuse.
→
Additional screens. "More" page and universal error message.
→
Additional screens. "More" page and universal error message.
Schedule functionality
→ Redesigned the desktop version and introduced a mobile-first view
→ Used color coding for categories and film sections to support scanning and accessibility
→ Included filters and contextual scroll-based interactions
→ Schedule was implemented as an iframe, which restricted certain layout choices
read more
The schedule had previously existed only in a desktop format. I redesigned it from scratch to support mobile and tablet views, knowing that most festival-goers rely on their phones during the event. Each film section was color-coded for visual clarity and accessibility. Events were also grouped by type (e.g. screenings, Pro Industry panels, audio-based events like Storytellers by Storytel, and concerts), with clickable category chips. These chips served dual functions: → Clickable scroll anchors: clicking a chip scrolled the schedule to its section. → Dynamic highlighting: while scrolling manually, the chip for the current visible section lit up—helping orient users within long content flows. On mobile, schedule items were stacked vertically and divided into hourly blocks to support skimmability. Filters were grouped into a modal to preserve space. Unfortunately, due to iframe limitations, the shopping cart couldn’t stay in the site’s top bar and had to be placed within the schedule module itself. This was not ideal from a UX perspective, but technically unavoidable. Despite some implementation deviations—such as filters not fully matching the design—the core experience was preserved.
read more
The schedule had previously existed only in a desktop format. I redesigned it from scratch to support mobile and tablet views, knowing that most festival-goers rely on their phones during the event. Each film section was color-coded for visual clarity and accessibility. Events were also grouped by type (e.g. screenings, Pro Industry panels, audio-based events like Storytellers by Storytel, and concerts), with clickable category chips. These chips served dual functions: → Clickable scroll anchors: clicking a chip scrolled the schedule to its section. → Dynamic highlighting: while scrolling manually, the chip for the current visible section lit up—helping orient users within long content flows. On mobile, schedule items were stacked vertically and divided into hourly blocks to support skimmability. Filters were grouped into a modal to preserve space. Unfortunately, due to iframe limitations, the shopping cart couldn’t stay in the site’s top bar and had to be placed within the schedule module itself. This was not ideal from a UX perspective, but technically unavoidable. Despite some implementation deviations—such as filters not fully matching the design—the core experience was preserved.
Mobile version of the schedule. Each event type is visually distinguished by color coding. A dynamic top bar allows users to quickly jump to a specific section, while scrolling updates the highlighted filter in real time.
Mobile version of the schedule. Each event type is visually distinguished by color coding. A dynamic top bar allows users to quickly jump to a specific section, while scrolling updates the highlighted filter in real time.
←
Static view of the mobile schedule and filters modal.
The design ensures that filters don’t overwhelm the main view and are instead accessed via a dedicated modal.
←
Static view of the mobile schedule and filters modal.
The design ensures that filters don’t overwhelm the main view and are instead accessed via a dedicated modal.
Desktop version of the schedule. Here displaying different kinds of film sections and color doing based on them and also navigating functionality allowing users quick jump into event type they're interested in.
Desktop version of the schedule. Here displaying different kinds of film sections and color doing based on them and also navigating functionality allowing users quick jump into event type they're interested in.
Static view of the desktop schedule with an open filter dropdown. Filters were designed to be easily accessible without cluttering the interface, allowing users to narrow down results by section, venue, or type of entry — paid or free.
Static view of the desktop schedule with an open filter dropdown. Filters were designed to be easily accessible without cluttering the interface, allowing users to narrow down results by section, venue, or type of entry — paid or free.
Reflections
→ Designing within iframe and WordPress constraints was challenging, but rewarding
→ The user-centered IA structure proved effective and remains in use
→ Schedule redesign greatly improved mobile experience
read more
This project pushed me to balance ambition with constraint. Designing for a complex festival experience inside an iframe, with no direct developer contact and under WordPress limitations, forced me to be highly structured, communicative, and solution-oriented. Despite the technical hurdles, the feedback confirmed the designs hit their mark. The modular, lifecycle-based information architecture is still used, and the mobile schedule became a go-to feature for festival-goers. One of my biggest takeaways is that strong foundational thinking—like lifecycle-based IA or modular screen design—can scale across constraints and changing tech stacks. It’s a great example of how UX can deliver clarity and consistency in even the most unpredictable setups.
read more
This project pushed me to balance ambition with constraint. Designing for a complex festival experience inside an iframe, with no direct developer contact and under WordPress limitations, forced me to be highly structured, communicative, and solution-oriented. Despite the technical hurdles, the feedback confirmed the designs hit their mark. The modular, lifecycle-based information architecture is still used, and the mobile schedule became a go-to feature for festival-goers. One of my biggest takeaways is that strong foundational thinking—like lifecycle-based IA or modular screen design—can scale across constraints and changing tech stacks. It’s a great example of how UX can deliver clarity and consistency in even the most unpredictable setups.
No mobile or tablet view
No mobile or tablet view (yet)
No mobile or tablet view (yet)
Please, view the page on desktop only.
Sorry for the inconvenience :(
Please, view the page on desktop only.
Sorry for the inconvenience :(