La Petite Mort + Microsite

Getting to Know Our Client‍

The Nederlands Dans Theater is a Dutch contemporary dance company, whose original intention is to move away from the more traditionally oriented Dutch National Ballet (Het Nederlands Ballet) and focus on experimentations of alternating dance forms and techniques. The team decided to engage in the company's intention and focus on experimental design likewise.​​​​​​​

Making Design Decisions

Taking into account our established art direction and human considerations, such as ergonomics and cognitive capabilities, I incorporated team feedback and refined the wireframes. Once the wireframes were approved, I proceeded to develop interactive prototypes using Figma.

Engaging Interaction

I opted for a fixed navigation bar for its accessibility, offering a clear overview and interaction options for the audience to anticipate content. Linking navigation to typography adjustments serves as a visual cue, encouraging seamless scrolling for both deconstructing and reconstructing typographic elements.

Typographic Compartmentalization

I decided to divide each page into distinct quadrants to organize the displayed information. This division helps manage the audience's field of view effectively and contributes to a dynamic composition by separating it into thirds.

Surfacing the Grid

I utilized a consistent grid across the site to establish visual asymmetry and rhythm on the pages. Adjusting the grid line weight reduced visual weight on titles and content. Thin grid lines serve to anchor text for readability, while intentionally broken lines add a dynamic element to the composition.

Compelling Previews

I identified that providing the audience with a preview of the show before buying tickets is a key requirement. To address this, rehearsal clips pop up and play on hover, enabling the audience to quickly preview the content in a single interaction without waiting for loading or navigating to another page. Furthermore, I incorporated a design where rehearsal sections turn green on hover, and page elements flexibly move through different cells to enhance interactivity.

‍Transitioning From Print to Digital

Transiting from print to digital demanded a meticulous balance between experimental elements and usability factors. In the initial stages of the audience's journey, expressive elements and interactions were employed to generate intrigue about the show, guiding them toward the ticket page. As the audience's focus transitions to purchasing a ticket, they encounter a straightforward checkout process that adheres to the principles of the overall art direction.

Reducing Cognitive Load

The order summary remains visible as the audience scrolls down the page and persists across pages, enabling them to easily review and monitor changes to their purchase. To minimize cognitive load, I positioned the field titles above the input boxes. Additionally, I opted for bright chartreuse as the color for the call-to-action buttons, establishing a clear visual hierarchy for the primary action on the page itself.

Implementing the Microsite

The implementation of La Petite Mort and my animated GIFs of the prototyping can be found in this Keynote File.

Takeaways

My design approach is centered around steering the user towards ticket purchase, underscoring the pivotal role of user-centric design where the user is prioritized. I firmly believe that a good design empowers them to discern the appropriate actions to take.