UX

The Show Starts Online:
Reimagining Esplanade’s Digital Stage

Esplanade.com, as the digital window to Singapore’s National Performing Arts Centre, plays a crucial role in shaping first impressions. Beyond driving event marketing, the website also serves as a comprehensive hub for information and education.

For this project, the task is to reimagined the design to create a seamless, inclusive, and welcoming experience that sets the tone for every visitor’s journey.

Role UX Designer, Project Lead (UI/UX & Workflow)
Employment The Esplanade Co Ltd
Agency Partner GrowthOps Asia

Scope Cross-functional Collaboration, Competitor Analysis, Design Sprint, Usability Testing, Rapid Prototyping

THE PROBLEM

It's been more than half a decade

The pre-revamp edition of Esplanade.com was launched in 2016. Over time, an accumulation of data led to slower performance, while evolving audience behaviours, especially during the COVID-19 pandemic, created a marked shift towards digital consumption.

The new design aims to refresh the platform, addressing performance issues and reimagining the experience to better showcase Esplanade’s vision as a performing arts centre for everyone, internationally recognised for its creativity, adventurous spirit, and exceptional standards of service.

Original Design
SOLUTION

Tackling the Challenge

01. Seamless Event Discovery

Esplanade is a sprawling platform that hosts an impressive lineup of over 100 events each month, featuring various festivals and series that run simultaneously. While this extensive array of events instills confidence and offers abundant options to potential audiences, it also necessitates a more curated and personalized approach to encourage seamless event discovery.

Saying Yes to Side-scrolling

Side-scrolling in web design was once discouraged but is now widely accepted, especially on mobile devices due to responsive design and the prevalence of smart devices. Streaming sites and apps have adopted it for better content presentation, and users are now accustomed to it. This has informed our decision to adopt more side-scroll browsing throughout the website.

The sorting logic for the website has been carefully designed to boost the visibility and prioritise current key events. This strategic arrangement ensures that users can easily find the most relevant and timely offerings, enhancing their browsing experience.

Striking the Balance between Persuasion and Overload

Prior research has shown that users prioritise events based on appealing visuals, relevant genres, pricing, and timing. Given the extensive array of offerings at Esplanade, we have strategically positioned key information to minimise clutter while ensuring that users receive sufficient details to encourage further exploration.

Offering more ways to discover events

New features that were introduced in the new site includes:

  1. "Happening Now" component: This feature provides a brief overview of events occurring onsite and online within the current hour or next.
  2. Enhanced search functionality: The search feature now includes popular search queries and categorises results for quicker navigation, improving user experience and efficiency.
  3. Broadened event filters: Users can now tailor their event searches by date range, genre, venue, pricing (including free events), and various accessibility needs, thereby optimising event discovery to suit individual preferences. While there is potential to further expand these filters, we are mindful that additional criteria could affect indexing speed and system performance.

02. Enhanced Digital Content Experience

Considering the shift in user behaviors due to COVID-19, the platform was redesigned to offer an enriching experience to consume digital content, accommodating users’ preferences for online engagement. This includes considerations of displaying livestream performances and seamless transition to Esplanade Offstage where accompanying educational articles and evergreen video content are hosted.

Livestream behaviour

Users can access free livestreams directly on the event page, eliminating the need to leave the website to view content.

The new 'Back' component

On Esplanade Offstage, a "Recently Visited" component appears at the top (mobile) or right side of the screen (desktop) when users navigate from Esplanade.com to an Offstage page, facilitating their return to the previous location.

Improve visibility of relevant pages

The 'Cross-sell' component. A seamless way to incorporate a component into both Esplanade.com and Offstage to promote events and Offstage content, enhancing the discoverability of relevant content.

03. Optimised for Conversion

We introduced streamlined user journeys to boost relevant event discoverability, purchases, sign-ups, and viewership of free content, both digitally and onsite. Key efforts included:

Improved Membership Journeys
  1. Integrated with SISTIC and the membership system to streamline membership account creation, login, and checkout processes, simplifying the overall user experience.
  2. Introduced features for tracking expenditure and progress towards the next membership tier.
  3. Enabled digital cards on the website for easier utilisation of promotions around the center.
Content Personalisation

We developed a sophisticated personalization logic using cookies and analyzing post-login behaviors of E&Me members. This innovative approach tailors content delivery to individual preferences, serving users with more relevant information and recommendations based on their unique browsing behaviors. This targeted strategy not only improves user engagement but also enhances the overall digital experience, making it more intuitive and responsive to user needs.

Improve content management efficiency

Improvements to the event listing workflow have been implemented, ensuring quicker content refreshes to keep the platform relevant and engaging. Enhancements to the archival process have also been made, which will boost system performance and improve the website’s loading speed. Together, these adjustments significantly enhance the overall workflow, maintaining consistently fresh content and ensuring a smooth, efficient user experience.

04. Relatable and Welcoming Brand Perception

Strategic use of colours and typography helps foster a welcoming brand perception. The redesign prioritises showcasing Esplanade’s diverse and impressive event offerings while also dedicating prominent space to highlight the organisation’s social initiatives, thereby illustrating the positive community impact.

Furthermore, a key objective of the redesign is to improve the website’s accessibility, ensuring it is inclusive and user-friendly for all, regardless of their abilities or disabilities.

RESULTS & ACCOLADES

What was achieved in this project

The redesigned Esplanade website has been thoroughly modernised, featuring streamlined content management to ensure optimal performance and quicker updates. The introduction of new features has improved browsing behaviour, enhancing event discoverability.

This redesign aims to educate users more effectively about free and accessible events. Pricing information made prominent on the first fold to highlight affordability. Furthermore, the redesign accommodates new digital consumption behaviours, reflecting the shift in user engagement preferences.

Additionally, placing social initiatives at the forefront of the site allows patrons to understand the positive community impact made by Esplanade, reinforcing its not-for-profit status. These strategic updates have significantly enhanced user interaction and accessibility, setting new benchmarks in line with contemporary web standards.

Comparing the statistics to the period prior to COVID-19, when the center was operating in optimal circumstances, the new website achieved impressive results a year after launch

88%

Increase in New Users

51%

Increase in Page Views

19%

Reduction in Bounce Rate
— lowest in 5 years

30%

Time Savings
to develop an event page

HealthHub: Bridging the Age Gap in Digital Healthcare

A look into HealthHub and efforts to craft a simpler, more intuitive way for users to manage appointments, prescriptions, and medical records.

The Show Starts Online: Reimagining Esplanade’s Digital Stage

Reimagining Esplanade.com to offer a seamless, inclusive experience for everyone, and to optimise conversions and operational efficiency.

Designing Singapore’s National Performing Arts Digital Concierge Experience

The Digital Concierge serves as a welcoming beacon, offering interactive guidance that helps visitors quickly and comprehensively discover the richness of Esplanade’s offerings.

Baybeats Festival Instagram Filters

I developed two interactive Instagram filters for the Baybeats Festival, an annual indie rock and alternative music festival at Esplanade.

Esplanade&Me Promotional Video

Produced an engaging promotional video for the ‘Esplanade&Me’ membership program, highlighting its various tiers and benefits such as ticketing specials, exclusive promotions, and special…

Walking the Talk: Reinventing the Digital Footprint of Care

An overhaul of The Foot Practice’s digital presence enhancing usability and functionality to better serve a diverse clientele and drive online engagement.

Lai Lai Tour Collaterals

Designed a culturally tailored travel booklet and print pamphlet for Japanese tourists, enhancing their experience in Singapore with visually engaging itineraries from Lai Lai…

DNAD – Pantone: Recolour Your Hometown

Recoloured Singapore’s hometown essence through a creative project focusing on its diverse food culture, using colors to weave a narrative that connects food, packaging,…

SCREAMO – Interactive Typography

Screamo is an interactive typography that visually transforms in response to sound, programmed to challenge users to influence and observe the dynamic changes their…

Experimental Photography: Perfect Imperfections

To challenge the norms of perfection in art by embracing and exploring the inherent imperfections of analog photography processes, and to combat the creative…

Singtel Promotional Videos

Back

HealthHub: Bridging the Age Gap in Digital Healthcare

A look into HealthHub and efforts to craft a simpler, more intuitive way for users to manage appointments, prescriptions, and medical records.

View Project

The Show Starts Online: Reimagining Esplanade’s Digital Stage

Reimagining Esplanade.com to offer a seamless, inclusive experience for everyone, and to optimise conversions and operational efficiency.

View Project

Designing Singapore’s National Performing Arts Digital Concierge Experience

The Digital Concierge serves as a welcoming beacon, offering interactive guidance that helps visitors quickly and comprehensively discover the richness of Esplanade’s offerings.

View Project

Baybeats Festival Instagram Filters

I developed two interactive Instagram filters for the Baybeats Festival, an annual indie rock and alternative music festival at Esplanade.

View Project

Esplanade&Me Promotional Video

Produced an engaging promotional video for the ‘Esplanade&Me’ membership program, highlighting its various tiers and benefits such as ticketing specials, exclusive promotions, and special…

View Project

Walking the Talk: Reinventing the Digital Footprint of Care

An overhaul of The Foot Practice’s digital presence enhancing usability and functionality to better serve a diverse clientele and drive online engagement.

View Project

Lai Lai Tour Collaterals

Designed a culturally tailored travel booklet and print pamphlet for Japanese tourists, enhancing their experience in Singapore with visually engaging itineraries from Lai Lai…

View Project

DNAD – Pantone: Recolour Your Hometown

Recoloured Singapore’s hometown essence through a creative project focusing on its diverse food culture, using colors to weave a narrative that connects food, packaging,…

View Project

SCREAMO – Interactive Typography

Screamo is an interactive typography that visually transforms in response to sound, programmed to challenge users to influence and observe the dynamic changes their…

View Project

Experimental Photography: Perfect Imperfections

To challenge the norms of perfection in art by embracing and exploring the inherent imperfections of analog photography processes, and to combat the creative…

View Project

Singtel Promotional Videos

View Project