The microsite balances between expressive elements to intrigue the audience and functional elements to provide essential information about the show, ultimately directing them toward purchasing a ticket.
Are
Are
you
you
ready?
ready?
STAKEHOLDER
STAKEHOLDER
Nederlands Dans Theater
ROLE
Website Designer
Website Designer
TOOLS
TOOLS
Figma + Adobe Photoshop
Figma + Adobe Photoshop
Figma + Adobe Photoshop
SPAN
SPAN
± 2 Weeks
± 2 Weeks
± 2 Weeks
Inside La Petite Mort + Microsite
Understanding the Client
The Nederlands Dans Theater is a Dutch contemporary dance company known for breaking away from traditional ballet and embracing experimental dance forms. Inspired by this spirit of innovation, our design approach focused on blending experimental aesthetics with usability, creating a microsite that both captivates audiences and facilitates seamless ticket purchases.
The Nederlands Dans Theater is a Dutch contemporary dance company known for breaking away from traditional ballet and embracing experimental dance forms. Inspired by this spirit of innovation, our design approach focused on blending experimental aesthetics with usability, creating a microsite that both captivates audiences and facilitates seamless ticket purchases.
The Nederlands Dans Theater is a Dutch contemporary dance company known for breaking away from traditional ballet and embracing experimental dance forms. Inspired by this spirit of innovation, our design approach focused on blending experimental aesthetics with usability, creating a microsite that both captivates audiences and facilitates seamless ticket purchases.
Designing for Engagement and Functionality
The microsite balances expressive elements that intrigue visitors with functional elements that provide essential information. This dual approach ensures that users are engaged while being smoothly guided toward purchasing tickets.
REFINING WIREFRAMES & PROTOTYPING
Taking into account the art direction, user ergonomics, and cognitive considerations, I refined the wireframes based on team feedback. Once approved, I developed interactive prototypes in Figma, ensuring a smooth and engaging user journey.
Initial Wireframes
The microsite balances expressive elements that intrigue visitors with functional elements that provide essential information. This dual approach ensures that users are engaged while being smoothly guided toward purchasing tickets.
REFINING WIREFRAMES & PROTOTYPING
Taking into account the art direction, user ergonomics, and cognitive considerations, I refined the wireframes based on team feedback. Once approved, I developed interactive prototypes in Figma, ensuring a smooth and engaging user journey.
Initial Wireframes
The microsite balances expressive elements that intrigue visitors with functional elements that provide essential information. This dual approach ensures that users are engaged while being smoothly guided toward purchasing tickets.
REFINING WIREFRAMES & PROTOTYPING
Taking into account the art direction, user ergonomics, and cognitive considerations, I refined the wireframes based on team feedback. Once approved, I developed interactive prototypes in Figma, ensuring a smooth and engaging user journey.
Initial Wireframes
Enhancing Interaction Through Navigation
To maximize accessibility and engagement, I opted for a fixed navigation bar that offers a clear overview of content and interactive options.
Additionally, I linked navigation elements to typography adjustments, using subtle animations as visual cues to encourage seamless scrolling. These interactions deconstruct and reconstruct typographic elements, creating a dynamic and immersive experience.
Reconstruction of Typographic Elements on Home Page
To maximize accessibility and engagement, I opted for a fixed navigation bar that offers a clear overview of content and interactive options.
Additionally, I linked navigation elements to typography adjustments, using subtle animations as visual cues to encourage seamless scrolling. These interactions deconstruct and reconstruct typographic elements, creating a dynamic and immersive experience.
Reconstruction of Typographic Elements on Home Page
To maximize accessibility and engagement, I opted for a fixed navigation bar that offers a clear overview of content and interactive options.
Additionally, I linked navigation elements to typography adjustments, using subtle animations as visual cues to encourage seamless scrolling. These interactions deconstruct and reconstruct typographic elements, creating a dynamic and immersive experience.
Reconstruction of Typographic Elements on Home Page
Structuring Content Through Typographic Compartmentalization
To organize information effectively, I divided each page into quadrants, creating a structured and visually engaging composition. This design choice improves the field of view for users navigating the site, ensuring clarity while maintaining a sense of exploration. Additionally, the layout aligns with the experimental nature of the production, embracing both structure and creativity. This approach keeps content intuitive yet visually dynamic, reinforcing the artistic identity of the show.
Information Compartmentalization on Le Concept (Concept) Page
To organize information effectively, I divided each page into quadrants, creating a structured and visually engaging composition. This design choice improves the field of view for users navigating the site, ensuring clarity while maintaining a sense of exploration. Additionally, the layout aligns with the experimental nature of the production, embracing both structure and creativity. This approach keeps content intuitive yet visually dynamic, reinforcing the artistic identity of the show.
Information Compartmentalization on Le Concept (Concept) Page
To organize information effectively, I divided each page into quadrants, creating a structured and visually engaging composition. This design choice improves the field of view for users navigating the site, ensuring clarity while maintaining a sense of exploration. Additionally, the layout aligns with the experimental nature of the production, embracing both structure and creativity. This approach keeps content intuitive yet visually dynamic, reinforcing the artistic identity of the show.
Information Compartmentalization on Le Concept (Concept) Page
Building Rhythm with Grid-Based Design
A consistent grid system was implemented across the site to establish visual rhythm and asymmetry. To optimize readability while maintaining a balance between structure and fluidity, thin grid lines were used to anchor text, ensuring clarity without overpowering the design. Additionally, deliberate breaks in the grid introduced dynamic movement across pages, creating a sense of controlled spontaneity. This method enhances the expressive yet structured aesthetic of the microsite, reinforcing both usability and artistic intent.
Anchored Information on Le Concept (Concept) Page
A consistent grid system was implemented across the site to establish visual rhythm and asymmetry. To optimize readability while maintaining a balance between structure and fluidity, thin grid lines were used to anchor text, ensuring clarity without overpowering the design. Additionally, deliberate breaks in the grid introduced dynamic movement across pages, creating a sense of controlled spontaneity. This method enhances the expressive yet structured aesthetic of the microsite, reinforcing both usability and artistic intent.
Anchored Information on Le Concept (Concept) Page
A consistent grid system was implemented across the site to establish visual rhythm and asymmetry. To optimize readability while maintaining a balance between structure and fluidity, thin grid lines were used to anchor text, ensuring clarity without overpowering the design. Additionally, deliberate breaks in the grid introduced dynamic movement across pages, creating a sense of controlled spontaneity. This method enhances the expressive yet structured aesthetic of the microsite, reinforcing both usability and artistic intent.
Anchored Information on Le Concept (Concept) Page
Compelling Previews for Immersive Engagement
A key insight from audience research revealed the need to preview the performance before purchasing tickets. To address this, I integrated hover-triggered rehearsal clips, allowing users to instantly preview content without loading delays or navigating away from the page. Additionally, interactive hover effects were introduced, where rehearsal sections turn green on hover, signaling interactivity and drawing attention to key elements. To further enhance engagement, I incorporated fluid movement of page elements, creating a browsing experience that feels dynamic and exploratory. These interactions provide an intuitive and immersive preview experience, increasing audience excitement and encouraging deeper engagement with the content.
Hover Effect on L' Aperçu (Rehearsals) Page
A key insight from audience research revealed the need to preview the performance before purchasing tickets. To address this, I integrated hover-triggered rehearsal clips, allowing users to instantly preview content without loading delays or navigating away from the page. Additionally, interactive hover effects were introduced, where rehearsal sections turn green on hover, signaling interactivity and drawing attention to key elements. To further enhance engagement, I incorporated fluid movement of page elements, creating a browsing experience that feels dynamic and exploratory. These interactions provide an intuitive and immersive preview experience, increasing audience excitement and encouraging deeper engagement with the content.
Hover Effect on L' Aperçu (Rehearsals) Page
A key insight from audience research revealed the need to preview the performance before purchasing tickets. To address this, I integrated hover-triggered rehearsal clips, allowing users to instantly preview content without loading delays or navigating away from the page. Additionally, interactive hover effects were introduced, where rehearsal sections turn green on hover, signaling interactivity and drawing attention to key elements. To further enhance engagement, I incorporated fluid movement of page elements, creating a browsing experience that feels dynamic and exploratory. These interactions provide an intuitive and immersive preview experience, increasing audience excitement and encouraging deeper engagement with the content.
Hover Effect on L' Aperçu (Rehearsals) Page
Transitioning from Print to Digital
Bringing a dance performance from print promotion to a digital format required a careful balance of aesthetics and usability. At the start of the user journey, expressive visual elements and interactions generate intrigue and excitement about the show. As users move toward purchasing a ticket, the interface becomes more structured, ensuring a smooth and distraction-free checkout process.
This transition allows for a seamless blend of artistic storytelling and functional usability, reflecting the nature of the performance itself.
Bringing a dance performance from print promotion to a digital format required a careful balance of aesthetics and usability. At the start of the user journey, expressive visual elements and interactions generate intrigue and excitement about the show. As users move toward purchasing a ticket, the interface becomes more structured, ensuring a smooth and distraction-free checkout process.
This transition allows for a seamless blend of artistic storytelling and functional usability, reflecting the nature of the performance itself.
Bringing a dance performance from print promotion to a digital format required a careful balance of aesthetics and usability. At the start of the user journey, expressive visual elements and interactions generate intrigue and excitement about the show. As users move toward purchasing a ticket, the interface becomes more structured, ensuring a smooth and distraction-free checkout process.
This transition allows for a seamless blend of artistic storytelling and functional usability, reflecting the nature of the performance itself.
Optimizing the Ticket Purchase Experience
To minimize friction and enhance usability, I designed the ticket purchase flow with a focus on clarity and efficiency. A persistent order summary remains visible as users scroll, allowing them to track their selections in real time without needing to navigate away. To reduce cognitive load, field titles are placed above input boxes, ensuring effortless form completion. Additionally, bright chartreuse call-to-action buttons establish a clear visual hierarchy, making the primary action instantly recognizable. This design keeps users in control, reducing frustration and guiding them smoothly toward completing their ticket purchase.
Selecting A Ticket on Billets (Ticket) Page
Filling User Information on Billets (Ticket) Page
Order Confirmation After Purchasing a Ticket on Billets (Ticket) Page
To minimize friction and enhance usability, I designed the ticket purchase flow with a focus on clarity and efficiency. A persistent order summary remains visible as users scroll, allowing them to track their selections in real time without needing to navigate away. To reduce cognitive load, field titles are placed above input boxes, ensuring effortless form completion. Additionally, bright chartreuse call-to-action buttons establish a clear visual hierarchy, making the primary action instantly recognizable. This design keeps users in control, reducing frustration and guiding them smoothly toward completing their ticket purchase.
Selecting A Ticket on Billets (Ticket) Page
Filling User Information on Billets (Ticket) Page
Order Confirmation After Purchasing a Ticket on Billets (Ticket) Page
To minimize friction and enhance usability, I designed the ticket purchase flow with a focus on clarity and efficiency. A persistent order summary remains visible as users scroll, allowing them to track their selections in real time without needing to navigate away. To reduce cognitive load, field titles are placed above input boxes, ensuring effortless form completion. Additionally, bright chartreuse call-to-action buttons establish a clear visual hierarchy, making the primary action instantly recognizable. This design keeps users in control, reducing frustration and guiding them smoothly toward completing their ticket purchase.
Selecting A Ticket on Billets (Ticket) Page
Filling User Information on Billets (Ticket) Page
Order Confirmation After Purchasing a Ticket on Billets (Ticket) Page
Implementation & Prototyping
The final design for La Petite Mort was implemented alongside animated GIFs of the prototypes, which can be found in the Keynote file for presentation.
The final design for La Petite Mort was implemented alongside animated GIFs of the prototypes, which can be found in the Keynote file for presentation.
The final design for La Petite Mort was implemented alongside animated GIFs of the prototypes, which can be found in the Keynote file for presentation.
Takeaways
This project reinforced my belief that great design guides users toward the right actions naturally. By prioritizing both artistic expression and usability, the microsite successfully engaged audiences, enhanced interaction, and streamlined ticket purchases.
A well-designed experience does more than just present information—it guides, informs, and inspires action.
This project reinforced my belief that great design guides users toward the right actions naturally. By prioritizing both artistic expression and usability, the microsite successfully engaged audiences, enhanced interaction, and streamlined ticket purchases.
A well-designed experience does more than just present information—it guides, informs, and inspires action.
This project reinforced my belief that great design guides users toward the right actions naturally. By prioritizing both artistic expression and usability, the microsite successfully engaged audiences, enhanced interaction, and streamlined ticket purchases.
A well-designed experience does more than just present information—it guides, informs, and inspires action.
Smooth Scroll
This will hide itself!
This will hide itself!
Smooth Scroll
This will hide itself!
This will hide itself!
Smooth Scroll
This will hide itself!
This will hide itself!