Responsibilities
Wireframing and UI design
Project length
1 month
Wireframing and UI design
1 month
New Diorama Theatre is a theatre company based in London, UK. Opened in 2010, NDT is a ‘must-visit destination for London theatre-goers’*.
New Diorama Theatre approached London agency Feast Creative to redesign their website. The redesign would reflect their rebranding and reconnect audiences through social media with the objective of increasing online ticket sales.
*Time Out
We start our web design projects by understanding the problem and looking at the business objectives and needs of the user.
© 2022 New Diorama
Without measurable goals its difficult to ascertain whether a project has been successful or not. Smart goals are relevant, realistic and attainable and help guide your business to success within an agreed timeframe.
New Diorama Theatre aimed at reconnecting with users through social media and increase online ticket sales by 10-15% within 6 months of their rebranded website going live.
What are the features or content that this website should include?
We agreed to redesign their existing website reflecting the new direction of the NDT brand, focusing on shows and social media to encourage customer reviews, sharing and online buzz around shows.
Ticket purchasing would be dealt with by the existing booking system.
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 and search engine optimised.
Find out more about our web design process
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.
A storyboard helps to communicate key moments of a customer experience with stakeholders
(1) Theatre-goer sees advertisement 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.
We focused on theatre-goers and used this information to design the website experience.
For the purposes of this website redesign we segmented the audience into ‘newcomers’ and ‘regular theatre-goers’.
We could further segment the audience but constraints such as budget and time did not allow for it.
Having defined the website’s users, we considered user stories to determine what tasks people may want to accomplish when visiting the landing page.
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:
From user stories like these we were able to summarise the needs of the user and the tasks they will need to perform on the website:
People go to the theatre to pursue ‘believable emotional experiences’*.
There are also cognitive emotions that users need to feel when visiting the website:
Theatre-goers needs and motives for going to the theatre
This website experience aimed to arouse these cognitive emotions so that the user was able to achieve their goals.
Help to 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.
Core user journey for mobile from homepage, product page, product details, basket and checkout.
Core user journey actions:
With the discovery stage complete we move to the visual design stage which involves the creation of sitemaps, wireframes and website mockups.
Following the core user journey we created wireframes to help communicate page layout and functionality with stakeholders and developers.
Wireframes focus on:
Wireframes shows early thoughts that are refined and developed as the project progresses.
Wireframes for desktop show page layouts and proposed functionalities.
Find out more about our web design process
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
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
Grabs user’s attention and directs them to find out more/buy tickets. Looped video can be used here to further engage user.
3
Focus on ‘Book tickets’. Ghost button less important and styled accordingly.
4
Attracts more attention than horizontal navigation. Stacked navigation with larger buttons was thought favorable to horizontal navigation with smaller cluttered links.
prominent and allows NDT to reconnect with site users. Essential for marketing and promotions.
5
Showcases shows in a horizontal carousel.
6
Opportunity to connect with users socially and provide social proof of customer experiences. Inspired by user research.
7
Keeps site updated and creates more traffic.
8
Social proof validates experiences and leads to more ticket sales.
9
When the user gets to the end of the page give them something to do…
10
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
Allows users to narrow down on shows of specific interest.
2
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
Buttons for frequently made selections. ‘Find Events’ displays overlay and further options. (Hidden initially to avoid overwhelming the user)
2-4
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 - 7):
1
Clear title with dates and booking link.
2
Highlighted ticket prices for price sensitive first time visitors. Access info for customers with disabilities.
3
Takes user back to What’s On.
4
Informs the user and provides content appealing to user’s interests.
5
Accordion shortens page, reduces scrolling and promotes scannability of page.
6
Generates feedback and buzz around shows.
7
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
Cards with high res imagery and text arouse interest.
2
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
Clear hierarchy of information promotes quick scannability and reading of pages.
2
Provides links to other pages promoting better website navigability.
Lower level page categories are displayed in menus on content pages.
1
On desktop the menu is visible.
2
On mobile 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.
Once the website information architecture was completed we created prototypes to test user interaction with the website.
• Prototypes test user interactions with the website and ensure there are no hidden problems.
• This approach reduces costs and saves time and is carried out before any code is written.
• The website was built using Feast's in house content management system and 3rd party integrated ticket booking system.
Although not quite a complete website, the prototype tests the core user journey from viewing a show to purchasing a ticket.
The website redesign was well received by users leading to an increase in ticket sales of 6%.
© 2022 New Diorama
User generated feedback in the form of tweets has created an extra level of authenticity and buzz around shows leading to greater bookings and engagement with the 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.
Need a consultation? We can advise
Whatever your business needs, we’ll create a great looking website that works for you.
Be first to receive offers and latest articles
