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
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.
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:
- "Happening Now" component: This feature provides a brief overview of events occurring onsite and online within the current hour or next.
- Enhanced search functionality: The search feature now includes popular search queries and categorises results for quicker navigation, improving user experience and efficiency.
- 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
- Integrated with SISTIC and the membership system to streamline membership account creation, login, and checkout processes, simplifying the overall user experience.
- Introduced features for tracking expenditure and progress towards the next membership tier.
- 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.
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…