three months
UX designer, workshop facilitator
3 UX designers,
2 engineers,
2 graphic designers,
1 project manager
Figma, Google Analytics, heuristic evaluation, user testing and interviews
sitemaps, wireframes, high-fidelity mockups, prototype
desktop and mobile (responsive design)
The AAIFF website needed a substantial graphical and hierarchical overhaul to build upon progress made converting the festival into a digital format.
Due to having a functional product with preexisting customer engagement, I chose research methods that focused on testing and diagnosis. Key methods used include user testing, heuristic evaluation and data analytics.
Users described the site as:
The catalog of festival films
By testing users familiar with adjacent products and services, I was able to directly test design hypotheses against feedback from users with fresh perspectives on the site design.
Through user testing, a common compliment was for the highly visual nature of the AAIFF site, a distinct advantage over competitors' sites according to users familiar with the film festival circuit. It was a purposeful choice to lean into this natural strength considering movies are the art of visual storytelling.
The schedule of supplementary live events
Heuristic evaluation revealed the existing design was not optimized to present information with little effort by the user. Important, sometimes vital, information was hidden behind needless scrolling and empty space, extra clicks and confusing language.
The site lacked common design conventions that would make use quick and easy. This created a big hurdle to finding and utilizing information..
Examining the site's data analytics revealed interesting information. Movie information pages were among the pages with most time viewed. Bounce rates on these pages were equally high. I hypothesized that users were leaving the site from movie info pages instead of continuing to explore due to a lack of discover for additional movies.
Through conducting and synthesizing research, the design team synthesized some key takeaways.
This led to a guiding question:
How might we reduce user friction to increase ticket sales and customer satisfaction?
We streamlined the AAIFF website to instill discovery through ease of use on desktop and mobile platforms, decreasing the bounce rates on key pages and increasing overall ticket sales.
A key design maxim was to create multiple pathways toward content discovery. We aimed to foster exploration of the diverse catalog of films on offer as a conscious design choice to expose viewers to more content (in the same manner as Netflix) for increased engagement and thus improve overall ticket sales for a more robust digital experience. Due to feedback from user testing, a highly visual approach was decided early.
Combining the use of imagery with the multiple user flows helped decrease bounce rates on movie info pages by 29% and on the site overall by 7%.
Choosing modular design helped create consistency which ensured users could quickly understand the site and easily build mental models of how to use it. Buttons were implemented most purposefully for circumstances offering profit potential. By ensuring consistency, users could identify design elements with little cognitive effort. By making the language clear and concise, such as 'Buy,' 'Donate,' and 'Watch,' users could identify where and how to make an action, increasing AAIFF's conversions and profitability.
Improving the information architecture via sitemaps created less links offering more value per link. Additionally, it provided users persistent access to AAIFF's top priorities within the global navigation, such as the film program, calendar of live events and FAQ's.
Designing the footer was an opportunity to utilize less valuable space to highlight more specific information via links. I provided more access using more space, reasoning that users who navigate down a page to the footer are generally looking for it. Designing a fully-fleshed out footer was a great chance to design a counterbalance to the succinct global nav designed in the sitemap.
Asian CineVision (ACV) is a volunteer-run organization responsible for the Asian American International Film Festival (AAIFF) held annually in New York City.
After the global events of 2020, the organization was forced to reprioritize their entire event structure and shift their efforts towards online alternatives to the typical in-person film festival format.
The effects of that decision rippled through every corner of my role as UX designer. The project goal became providing more ways for fans to discover content on the digital-first AAIFF website.
At the outset, the design team met with stakeholders including the project manager and operations team to understand their perspectives and pain points. The switch to an online-only format the previous year generated unforeseen problems that we were tasked to alleviate through UX methodology.
A view of the complex pricing structure
Users contacted customer service most frequently due to a lack of understanding on the multiple available ticket packages. This specific issue accompanied an abundance of customers’ questions regarding other technical complications. These issues resulted in decreased sales.
Stakeholders' biggest pain point was a feature called geoblocking, a digital festival-prerequisite limiting viewership to the New York-region. In the previous festival year, this requirement caused a lot of customer confusion, resulting in refunds and lost revenue.
How might we reduce user friction to increase ticket sales and customer satisfaction?
My goal as UX designer was to examine and improve the layout for the AAIFF website across both desktop and mobile formats to address the persistent issues of customer confusion.
A clear understanding of business needs and the project scope emerged from these initial meetings. Discussing potential means of research, we settled on the following tools due to their value in understanding a product with prior customer engagement:
As a group of three designers, we individually followed Jakob Nielson's ten usability heuristic guidelines to identify common issues. Combining each analysis, issues regarding consistency and mismatches between real world and digital analogues became apparent.
Results of the combined heuristic evaluation (click to expand)
In conducting user tests, we interviewed five participants familiar with film festivals who had previously purchased movie tickets online. Given several sequential tasks, we timed their completions and followed up at the end with survey questions to rate their overall experience with the AAIFF website.
Designing this test uncovered a few oversights. We would be unable to test the full checkout flow due to technical limitations; the checkout process is inactive while the festival is on hiatus. We prioritized users who had interacted with adjacent products, such as other film festival sites or ticket sales site Fandango, to assess the user flow on the AAIFF website.
This constraint allowed us to test and gather info from users who understood the overall process and were viewing the AAIFF website for the first time.
"[The site is] charming but not perfect"
"If I was using it, I wouldn't think much about it"
"It's not hard but not that easy"
"If you didn't tell me to find [X event] I would have kept scrolling and missed a lot of details"
Examining site analytics (through the Google Analytics tool) in combination with the results of the heuristic evaluation and user testing, issues with the existing design further sharpened into focus.
The lack of discovery on individual film pages led to increased bounce rates. Users wanted to know about the movies offered; they were consistently among the site's longest-viewed pages via minutes spent on-page. However, by missing the opportunity to advertise additional options, users were leaving the site from the movie product pages, thus losing potential additional sales for the festival.
Users were visiting the site but not traveling around it.
The schedule of supplementary live events
Two of the top-visited pages, the schedule for supplementary live events (seen above) and the catalog of movies, were grouped together in the same drop-down bar within the global navigation. FAQ’s were buried under eight other links. A user’s first impression of live events was a schedule with nothing displayed. Vital festival information was concealed behind scrolling, extra clicks and empty space. This prevented many from accessing it or knowing it existed.
Finding important information could be hidden behind an unbalanced navigation structure and unintuitive design.
The FAQ's, hidden within the global navigation, featured unconventional language and no real visual hierarchy for text.
The Frequently Asked Questions (FAQ’s) were labeled as ‘How to Festival’ in the menu. Buttons lacked consistent copy and implementation throughout the site. The project manager noted ACV had experienced significant issues with customer confusion, especially with regards to the conditions around digital viewing. Therefore, it seemed wise to create better access to important help and troubleshooting resources.
Language used on the site made it more difficult to recognize and utilize help content.
We synthesized the research findings to uncover where our time could provide ACV the most ROI (return on investment) within the scope of our available resources and the approaching festival deadline. I guided my teammates through a workshop to quickly ideate potential designs for us to proceed building digitally. The workshop involved quickly sketching ideas on paper in a rapid manner to generate many ideas, using them to borrow the good and eliminate the bad.
In examining the handdrawn sketches, the need for consistency emerged as a guiding light. I utilized that beacon in coalescing the three separate visions into a unified, modular approach. Due to feedback received during user testing, we agreed to implement a very visual strategy utilizing movie stills and color as additional means to guide users.
I created two sitemaps, a retrospective map of the current design and a prospective design for an updated version. In doing so, I noticed the current design was very uneven. With nine items in one dropdown and two to four in others, some sections were very heavy while others were extremely light.
I aimed to condense pages with lower user interaction to create less links with more value per link. Additionally, I moved the most important pieces of information to the top of the global navigation to give users persistent access. This gave the movie program, event schedule and ticketing information status as top priorities for AAIFF.
By rearranging the global nav, I aimed to make site navigation easier. Less links in any drop-down menu facilitates the creation of users’ mental models. More important links given top-level access creates a quicker, more streamlined experience for the user with less need to learn the layout.
Reinforced by testing results and the restrictions of limited development resources, the design adopted a lot of modularity. Visual elements repeated themselves across multiple pages, supplementing the idea of a circuitous user journey with multiple pathways to increase film and event discovery.
A reimagined hero image on the homepage, the only item to stretch the full-page width, repeated its grid-breaking pattern throughout the banners of every feature- and event-detail page.
A lot of thought and iteration was invested into the rectangular tiles which populate the festival program. The tiles repeat on individual detail pages in the form of suggestions for further films / events, allowing the user's path exploring content to continue. Color was used in various ways to create visual repetition and add another layer to distinguish different product categories (ex: red for films, yellow for shorts).
Considerable thought and effort was spent ensuring consistent Call to Action buttons (CTA’s) throughout the site, as well as how and when to use them versus inline text links. CTA’s were implemented for functions with profit potential to highlight their importance. The goal was to make the user flow more obvious to encourage increased ticket sales.
In designing most pages, we wanted to ensure the user was exposed to as much vital information as possible without a need to scroll. This led to thinking: what can b display in columns to minimize wasted space?
Wireframe for the movie info page
A modular block was designed containing stats such as runtime, genre, region of origin, etc. This was chosen over other, more modern designs, such as the horizontal line of text seen on Netflix, to allow display of more info. I reasoned detailed movie stats are valuable to film buffs so we highlighted them using proximity, shape and color.
In addition to a reconfigured global navigation, building the sitemap allowed me to notice a glaring opportunity for improvement with the site footer. Previously sparse, I reasoned any user who scrolls to the footer does so with purpose. Therefore, I advocated to use it as opportunity to provide detailed anchor links directly to many specific, often help-related aspects of the site. Rather than being concise, the footer was an opportunity to be detailed.
Wireframe for the desktop footer
I designed two footers, one each for desktop and mobile. Whereas the desktop footer created a heavy counterbalance to our streamlined global nav, the mobile footer utilized collapsible menus to avoid excess scrolling due to lengthy pages. Whereas my logic for the footer still had merit, I did not want to create additional issues for the mobile experience without considering differences in interaction. All the same information was provided in a more streamlined package suited to touch screens.
The most evident progress in refining language was making text as readable as possible. There was significant struggle during user testing where tasks took longer than hypothesized. One key reason described by multiple users was an overload of information. Lines of text were difficult to scan due to the line length and different implementations used throughout the site.
One stakeholder’s biggest issue was customer confusion. To address this, we standardized font sizes, weights and their uses sitewite. By focusing on establishing scannable text through established standards of font size and line height alongside the logical use of anchor links, large sections of text were broken up into smaller, more digestible portions. Text was easier to scan and understand quickly.
One such area was the calendar of live events. Design had been tasked with creating a solution to solve for a distinct pain point: the existing design displayed an empty calendar unless the user scrolled down the page. This created a potential scenario where users think the calendar is empty of events. Additionally, it was an inefficient use of space.
We brainstormed three calendar options:
In demonstrating all three views to stakeholders, we concluded that each solution had value and provided unique benefits. However, one major constraint guiding the entire project was limited development resources. Features had to be assessed heavily based upon their ROI and feasibility.
The grid view embodied the site's existing design. Columns were assigned to each day with horizontal slices denoting hours. This pattern mimicked the calendar designed by Apple or Google. In an often-crowded festival lineup, this design offers the advantage of allowing users to easily understand which events abutted or overlapped others through a visual display. However, it offered implementation issues unique to the AAIFF website and a digital format festival.
Wireframe for the list view calendar
The second brainstormed proposal to solve the unused space was a list view, as seen above. Information displayed in a more user-friendly manner, borrowing patterns from the movie tiles used elsewhere in the design. This iteration solved the issue of wasted space, allowing multiple days and additional information to be displayed. The list shows three days at a time to lessen cognitive load and facilitate users' mental understanding of the calendar of events.
The third proposal to solve this issue was a more traditional view akin to a wall calendar. This perspective was successful in providing an alternate visual to the grid view. This solution is instantly understandable through familiarity to most users. Therefore we reasoned it would allow more intuitive interaction, thus decreasing time needed to find live events.
The grid view was already established via code leaving two potential options. One stakeholder wanted to include all three options which was not feasible. In moving towards one, I reasoned the list view offered the most value. It provided an interface unique from the grid whereas the calendar view fell somewhere in the middle.
Furthermore, the design team experienced issues when it came to the practical implementation of desired search functions using a calendar. We had been unable to find other examples of similar functionality. How would we implement this feature with speed and efficacy without precedent elsewhere?
Ultimately, we settled on a two-design solution which included the list view by default with a toggle to access the grid view. By setting the list to default, we removed the problem of unused negative space while retaining the value provided by the grid design.
In refining the design, I aimed to use microcopy which directly stated the action: buy, donate, watch. I wanted buttons to be as clear as possible to counteract users' direct feedback that the site was overwhelming and confusing. This was an intentional decision aimed at increasing sales conversions.
Pushback emerged in the form of festival circuit-specific language. Stakeholders wanted language such as ‘RSVP’ which can be vague and requires contextual understanding to use. Similarly, ‘How to Festival’ was another piece of festival-specific jargon that proved obfuscating (AKA confusing) to outsiders.
Stakeholders wanted to place access to the FAQ’s in the top level of global navigation, separate from my suggested placement in a ‘Support’ drop-down. I felt placing it in the global nav suggested the website was hard to use.
Ultimately, it did make more sense to give it persistent access within the global nav for the users’ direct benefit. It was a debate where losing meant a better user experience. I took the opportunity to consider my own biases towards allowing organization to guide design as opposed to allowing intuitiveness and user benefit to guide.
Reflecting back on the project, solutions were found for most of the design team's hypotheses.
Design was able to create an experience better suited to a hybrid festival. Language and access to helpful information was clearer and more immediate. The design also builds the framework that can be iterated more easily for following years. The updated design provides users with more ways to discover movies, therefore increasing the likelihood that users purchase more tickets.
Bounce rate on the website during the festival dates decreased 29% for movie info pages and 7% overall.
There are still some areas I see potential for improvement. These exist mainly within the engineering implementation of the design. Due to a lack of detailed annotations to accompany the finished wireframes, some choices were implemented by the engineers after handoff differently than our intentions. This is an oversight on my part as designer but also a limitation due to project timeframe and deadlines.
One such specific example is mobile navigation in the main dropdown menu and footer. Rather than the entire area selectable including text, the user can tap only the + icon to open and collapse menus. It is easily discoverable where to press but making this small adjustment would lead to a smoother experience overall.
Another similar example is the implementation of color to differentiate product categories. Throughout the design process, color use was always mentioned as “being in flux” until the graphic designers decided the year’s final color scheme. Pushing the project further, I would detail annotations for my intentions with color use so the design can be implemented easily no matter the color scheme chosen with regards to development and accessibility.
I would like to further iterate upon the sort and filter functionality for the calendar. We were forced to limit its potential due to time and development resources. The finished design allows users to find movies effectively. However, it is not a true sort and filter functionality. Further design thinking can polish the established ideas to an even better state.
Designing and implementing a better search function will involve design work and potentially significant development work. I would prefer to back up my hypothesis with research before starting; I believe giving users further tools to explore the AAIFF catalog would serve to generate increased interest in product offerings and thus increase ticket sales further. I would like to test this theory with further research before committing time and resources to it.
