Case Study: How a website redesign can reengage a theatre brand

USING SOCIAL MEDIA TO RECONNECT AUDIENCES

New Diorama Theatre is a theatre company based in London, UK. Opened in 2010, NDT is a ‘must-visit destination for London theatre-goers’*.

* Time Out

New Diorama Theatre approached London agency Brackets.digital to redesign their website. The redesign would reflect their rebranding and reconnect audiences through social media with the objective of increasing online ticket sales. 

  • Agency

    Brackets.digital

  • Client

    New Diorama Theatre

  • Responsibilites

    UX and UI design

  • Software

    Figma, Adobe XD, Photoshop

  • Project timeframe

    1 month (5 days allocated to UX/UI design)

www.newdiorama.com

The homepage is a place to connect with the theatre and its shows, get excited and buy tickets
BRAND AND USER PROBLEMS

With the abundance of theatre choice in London finding a theatre experience that fulfills the emotional needs of the theatre-goer is difficult. 

BUSINESS OBJECTIVE

Reconnect with users through social media and increase online ticket sales by 10-15%.

USER PROBLEM / NEED

Find a theatre production that satisfies the theatre-goer.*

*People go to the theatre for a number of reasons:

  1. Pursuit of believable emotional experiences.
  2. Escapism.
  3. Learning. 
  4. Enhanced socialisation.
  5. Fun.  
PROJECT SCOPE

Redesign existing website reflecting the new direction of the NDT brand.

Focus on shows and social media to encourage customer reviews, sharing and online buzz around shows. Ticket purchasing will be dealt with by the existing booking system.

What we aimed to deliver:

  • Rebranded responsive website with client CMS.
  • Website optimised for mobile audiences.
  • Improved user experience, content strategy hierarchy of information with focus on ticket sales and social media integration. (Checkout provided by 3rd party).
  • Customer reviews to add feedback, buzz, authenticity and personality to website. 
  • Simple and intuitive navigation.
  • Modern creative style.
  • Search engine optimised.
UNDERSTAND THE EXPERIENCE

A Storyboard helps to understand the key moments in the user experience from landing on the website to purchasing a ticket.


It reveals emotions that users may be experiencing and issues that can be addressed later on.

Reviewing the storyboard (1 – 6)

  1. Theatre-goer sees ad on underground for NDT show appealing to her interests.
  2. Visits website to find out more and see what else is on.
  3. Reads customer reviews and likes what she sees.
  4. Watches video trailer and triggers her emotions. She adds to cart and purchases tickets.
  5. Meets friend for social pre-theatre drink.
  6. Arrives at the theatre and is excited to see the show.
USER RESEARCH

The primary audience for this project are London theatre goers with the secondary audience theatre companies and ensembles.

Let’s focus on the primary audience and use this information to design the website experience to help them fulfill their tasks and information requirements.

DEFINE USER GROUPS / USER PERSONAS

For the purposes of this website design we segmented the audience into ‘newcomers’ and ‘regular theatre-goers’

We could further segment the audience but constraints such as budget and time do not allow for it.

USER STORIES

Having defined the project’s users, we brainstormed user stories to determine what tasks a user may want to accomplish by using the website.

User stories help to understand user needs, pain points, emotions and opportunities and how best to respond to them as website design features.

Example user stories:

  • As a newcomer I want to read reviews from people that have already seen the show so that I know its worth seeing.
  • As a newcomer I want to watch videos, see photos and cast information so I can know what to expect.
  • As a regular theatre-goer I want to share my experience with others so that I can connect with people like me.
  • As a regular theatre-goer I want to view videos so that I can get excited prior to my evening out.

Read more user stories

From the user stories we can summarise the needs of the user:

Key tasks that users need to perform:

  • Buy tickets.
  • View shows.
  • View ticket prices.
  • Sign up to newsletter.
  • Read user reviews.
  • Contribute feedback.
  • Contact theatre.
  • Read theatre venue information.
  • View latest news.
  • View theatre map and how to get there.
  • Connect via social media.
  • View photos of shows and videos.
  • Make a donation.
  • Read information about theatre companies and ensembles.
  • Read about Cafe/Bar.

Cognitive emotions that users need to feel when visiting website:

  • Connected emotionally and socially.
  • Excited.
  • Informed.
  • Entertained.

People go to the theatre to pursue ‘believable emotional experiences’*.

*Source

Theatre-goers needs and motives

  1. Pursuit of believable emotional experiences.
  2. Escapism.
  3. Learning.
  4. Enhanced socialisation.
  5. Fun. 

This website experience will aim to arouse these cognitive emotions so that the user is able to achieve their goals and ours.

USER JOURNEYS

User journeys help us identify key actions within the website and what screens to focus on first.

The core user journey is defined first. It describes what the user needs to do in order to accomplish their primary goal of buying a ticket.

The core user journey actions:

  1. Land on homepage.
  2. See what’s on.
  3. Find out more about as show.
  4. Buy tickets and checkout. (3rd party provider)

Following the core user journey we created wireframes to help communicate design ideas with stakeholders and developers.

Wireframes focus on:

  • Content – What is displayed.
  • Structure How it is displayed.
  • Hierarchy Size of elements.
  • Functionality How elements work together. 

The initial wireframes shows early thoughts that are refined and developed as the project progresses.

New Diorama Theatre
Initial wireframes for desktop show content layouts and proposed functionalities.

With the wireframes completed and a framework and website layout in place we start visual design.


Visual design is the look and feel of a website communicating a company’s brand, identity and voice.

High fidelity prototype communicates and validates page concepts for UI design

The purpose of the homepage is to drive traffic to conversion by showcasing shows, building trust, excitement and creating returning customers.

Callouts (1 – 9):

  1. Box office/Search/Book tickets – Positioned top right for better usability. Search helps users to find information they might not find navigating pages. Box office number for those wishing to talk to a human and preferring to book in this way. ‘Book tickets’ CTA top right directs users to view shows/book.
  2. Hero – Grabs user’s attention and directs them to find out more/buy tickets. Looped video can be used here to further engage user.
  3. Clear and consistent calls to action – Focus on ‘Book tickets’. Ghost button less important and styled accordingly.
  4. a) Fixed Vertical navigation – Attracts more attention than horizontal navigation. Stacked navigation with larger buttons was thought favorable to horizontal navigation with smaller cluttered links.
    b) Mailing List Sign-up prominent and allows NDT to reconnect with site users. Essential for marketing and promotions.
  5. What’s On – Showcases shows in a horizontal carousel.
  6. Your visit  Opportunity to connect with users socially and provide social proof of customer experiences. Inspired by user research.
  7. Latest News – Keeps site updated and creates more traffic.
  8. What you think – Social proof validates experiences and leads to more ticket sales.
  9. Find out more – When the user gets to the end of the page give them something to do…
  10. Footer – Displaying sponsors that users may care about makes a positive connection between the user and the NST brand.

What’s On displays current shows in a simple and unbloated layout promoting scannability and show evaluation

Callouts (1 – 2):

  1. Filter – Allows users to narrow down on shows of specific interest.
  2. Card open – Extra layer of hover-enabled textual information improves the user’s ability to scan and evaluate what shows to find out more on. Source: Baymard

What’s On show filter provides guidance to show selection

Callouts (1 – 4):

  1. Quick filter – Buttons for frequently made selections.
    ‘Find Events’ displays overlay and further options. (Hidden initially to avoid overwhelming user)
  2. – 3. Time of day/Paid/Unpaid/Date range – Additional filters to help users find what they are looking for.

Show details page informs, excites and provides assurances for user’s ticket buying decision

Callouts (1 – 9):

  1. Show header – Clear title with dates and booking link.
  2. Ticket info – Highlighted ticket prices for price sensitive first time visitors. Access info for customers with disabilities.
  3. All Events – Takes user back to What’s On.
  4. Show information – Informs the user and provides content appealing to user’s interests.
  5. Ticket info (Mobile) – Accordion shortens page, reduces scrolling and promotes scannability of page.
  6. Your reactions Generates feedback and buzz around shows.
  7. Other events – Helps user to navigate website when they have finished reading the page. Better usability promotes increase in dwell times.
*YOUR REACTIONS

Generate feedback and buzz around shows.

In response to the client’s objective to reconnect with its customers we aggregated tweets on show and news pages to add authenticity to website content.

The content is further amplified online when users read, share and provide their own feedback on shows they have been to.

Latest news helps inform and generate traffic

Callouts (1 – 2):

  1. News items  – Cards with high res imagery and text arouse interest.
  2. Find out more  – Helps user to navigate website when they have finished reading the page. Better usability promotes increase in dwell times.

Latest news details

Callouts (1 – 2):

  1. News content – Clear hierarchy of information promotes quick scannability and reading of pages.
  2. Other news – Provides links to other pages promoting better website navigability.
ABOUT US

Lower level page categories are displayed in menus on content pages.

On desktop (1) the menu is visible but on mobile (2) menus are hidden to reduce page lengths. Users can easily navigate to subcategories by tapping the menu button.

ND Cafe & Bar uses a similar page template to its parent offering no surprises to the user when visiting the page.

NSDF Funding provides easily scannable and attention grabbing content by using icons.

PROTOTYPING

Prototypes test user interaction and establish a more realistic experience with the website to encourage useful stakeholder feedback.

Although not quite a complete website, the prototype tests the core user journey from selecting a venue to purchasing a ticket.

THE OUTCOME

The website redesign was well received by website users with an increase in ticket sales of 6%.

User generated feedback in the form of tweets has created an extra level of authenticity and buzz around shows adding personality to the NDT brand.

By embracing user generated feedback and aggregating it on the website users can make more informed decisions on the shows that they see and help others by providing reviews of their own experiences.

I can help your business to improve the effectiveness of its website and increase conversions.