LINH NGUYEN
Digital Product Designer

DISPLAYS AND ROOMS

DISPLAYS AND ROOMS
PROJECT DETAILS

Tate includes some of the most visited art museums in the world (including Tate Modern and Tate Britain). In 2019, Tate had over 8 million total annual visitors, and over 19 million website visitors. The displays and rooms pages on tate.org.uk had over 1 million unique page views in 2019 and showcase information and art in the displays and rooms at Tate.

The existing displays and rooms templates

The existing displays and rooms templates

PROJECT BRIEF

The original displays and rooms templates were built quickly on the site with little to no user research and design thinking. Consequently there were an array of issues with the pages.

  • Visually, the templates were not engaging or striking. 
  • The template pages were lined with multiple 4 column strips, with no visual differentiation between the different modules. 
  • Art was not given enough prominence. 
  • The displays were not optimised for mobile or tablet. 
  • The templates were not working for Tate staff who needed to publish content because they didn’t pull artwork through for orphan displays (displays which were not part of a "parent theme”).

Tate had previously provided an app that allowed its users to experience audio tours, however, this approach didn’t prove to be financially viable and therefore was decommissioned. It was felt that a redesign of the displays and rooms templates could help to fill this gap by replicating the experience of a tour.

I was tasked with redesigning the displays and rooms templates to help users enjoy and learn about art, feel inspired, and entice them to visit the galleries.

TEAM

  • Product manager
  • 3 developers

CONTRIBUTIONS

  • Discovery research
  • Archetype creation
  • Ideation
  • Wireframing
  • Prototyping
  • Recruitment and planning for 2 rounds of user testing
  • User testing facilitation
  • User testing analysis
  • UI design

DESIGN PROCESS
1. EMPATHISE
I ran heat maps and scroll maps on the existing pages to assess user behaviour.

I ran heat maps and scroll maps on the existing pages to assess user behaviour.

I started from the research previously conducted at Tate. This involved reviewing reports and gathering requirements and insights from the product manager who had already conducted a substantial amount of user research over the years. I held meetings with producers and content managers who were also users of the templates, since they would be adding content to the pages. I then filled in my knowledge gaps by conducting guerrilla research with gallery visitors at Tate Modern and Tate Britain.

USER NEEDS IDENTIFIED FROM DISCOVERY RESEARCH

  • Users wanted to know what art they could see and what was free, but didn't care about the difference between displays and exhibitions, or understand the distinction between the two terms.

  • Visitors wanted to know which artworks were on display, and were particularly interested in more famous artworks.

  • Users wanted to quickly find key details such as location, dates and price.

  • Users wanted more detail in CTAs such as a "see more" button. They wanted to know what they were seeing, and in what number.

  • Users expected artworks to expand into a light box when clicked, and also that there would be more information provided about each artwork.

  • Users found masonry layouts and multi-image carousels easier to navigate, and generally preferred them over 4 column strips.

  • While the journey through the displays in the gallery was straight forward, it was not so straight forward online. The rooms appeared to have no association with each other, or the order was seemingly random. Users wanted to have a journey to follow.

  • Users found the display titles confusing and needed more context.

ANALYTICS

  • The pages had low click-through rates on the room selector drop down and users were not engaging further with the pages. In March 2019, out of 35,413 page views, there were only 2,302 artwork views and 4,550 room visits from these page views.

  • The page was the main entry point to explore the rooms in each display, however the rooms were located far down the page and scroll maps revealed that only 40-45% of users were scrolling down far enough to view the rooms module.

2. DEFINE AND IDEATE

ARCHETYPES

Based on the user research, I identified two main audiences: Art researchers and tourists. I created an archetypal user for each of these audiences so that stakeholders could better empathise with users, and to keep me in check during the design process.

DISPLAYS AND ROOMS

I framed the problems as:

How might we help users easily find content and replicate the feeling of visiting the displays and rooms?

How might we help users quickly find key information and showcase the art better so that they are inspired to visit?

Some of the sketches

Some of the sketches

IDEATION

I created some problem statements based on the user needs. I then brainstormed potential solutions using the Crazy-8s ideation technique.

SOLUTIONS

  • Design a "tube-map" of the rooms in displays, with each room being a "tube stop" so that users can feel as if they are on a journey, much like in the gallery.

  • Add a progress bar for loading more artworks.

  • Add more detail in CTAs.

  • Add a lightbox that provides information about an artwork when it is clicked on.

  • Showcase highlights or featured art, rather than all of the art in the parent displays pages.

  • Add sub-navigation so that users can find information more quickly.

  • Move key information to the top of the page.

SKETCHING

Before creating digital wireframes, I always sketch on paper to ensure my ideas are viable from a design point of view. I also use them to communicate my ideas to colleagues and stakeholders.

3. WIREFRAME AND PROTOTYPE
DISPLAYS AND ROOMS

WIREFRAMING

I created wireframes for displays and rooms using Axure so that I could present these early stage concepts to the rest of the team and stakeholders for feedback.

Mobile prototype created in Axure. Feel free to interact with it. Please click the arrow in the top left corner to close the sitemap.

PROTOTYPING

After feedback from stakeholders and several rounds of iteration, I turned the wireframes into prototypes in Axure for user testing.

View the desktop prototype

(opens in a new tab)

4. USER TEST AND ANALYSE
Some of the synthesis from user testing on Miro.

Some of the synthesis from user testing on Miro.

I then took the prototypes to conduct user testing. I created the recruitment and testing plan myself, including the screener, recruitment admin, and research script.


  • I recruited 6 participants for 60 minute one-to-one moderated usability tests - 2 in London, 1 in Germany, 1 in the US, 1 in Australia and 1 in the Philippines. These were the most visited audiences to the website, aside from the Philippines, which was the most visited Asian country to the website.
  • I conducted an additional 2 guerrilla usability tests at Tate Modern, bringing the total number of participants to 8.
  • Participants ranged from those with an art background through to those who had less interest in art, and those who had visited Tate multiple times through to those who had never visited.
  • Remote user testing was conducted via Whereby.
  • User testing involved both desktop and mobile.
  • I facilitated all the sessions, with a notetaker to help me.
Desktop version tested in user testing

Desktop version tested in user testing

MAJOR INSIGHTS

  • Highlights were correctly interpreted as the most popular or featured artworks selected by curators or editors.
  • Users liked the straight line design on mobile.
  • It was clear that each room page was a "child" of the "parent display."
  • The lightbox did what users expected it to do.
  • Key information such as location, dates and price were not easily discoverable.
  • Users liked the idea of an animated line.
  • Users liked the new hover states as they reassured them that the items were clickable.
  • Users didn't find the photos of people in the gallery particularly helpful. Some users even expressed strong opinions against them.
  • Users didn't find the reviews helpful either, as there was an inherent lack of trust in featured reviews.
  • Users couldn't easily differentiate between the sections of the page.
  • Users didn't realise that rooms could be clicked on and visited.
  • Users didn't realise that each room had an image that would appear when the room card was hovered over. As a result, a lot of users wanted more colour on the page.
  • Half of the participants thought the winding tube map design was a map of the gallery.
  • The majority of participants preferred the winding tube map design over the straight line design.

"HOW MIGHT WE" PROBLEM STATEMENTS

Based on the user testing, I framed the problems as:

  • How might we make the page look more interesting and engaging in order to draw the user in?
  • How might we show that the rooms can be visited/clicked on from the winding line?
  • How might we prevent users from thinking the winding line reflects the layout of the gallery?
  • How might we make details such as dates, location and price more obvious?

"I can see people anytime, but in a museum I want to see the art."
Ann, Philippines
IDEATION ROUND 2
Based on the problem statements, I sketched ideas for design changes.

Based on the problem statements, I sketched ideas for design changes.

DISPLAYS AND ROOMS

PAINPOINT 1

Key information such as location, dates and price were not easily discoverable.

Design solutions

  • Moved key information to where users expected it to be.
  • Added icons to make key information more recognisable and discoverable.
  • Gave key information its own space on the page, rather than hidden with the title.

DISPLAYS AND ROOMS

PAINPOINTS 2 & 3

The majority of participants preferred the random winding tube map design over the straight line design, but half of the participants incorrectly thought the random winding tube map design was a map of the gallery.

Users didn't realise that each room had an image that would appear when the room card was hovered over. As a result, a lot of users wanted more colour on the page.

Design solutions

  • Changed the tube map design with its randomly winding path to a more systematic path so that it looked less like a map.
  • Changed images so that they were always showing, instead of only appearing on hover.

DISPLAYS AND ROOMS

PAINPOINT 4

Users didn't realise that rooms could be clicked on and visited.

Design solution

Added a "Go to room" CTA to all room cards.

PROTOTYPING ROUND 2

The second version of the mobile prototype. Please click on the arrow in the top left hand corner to close the sitemap. Feel free to interact with it.

PROTOTYPING

I made the changes to my prototype in Axure across both desktop and mobile.

View the desktop prototype

(opens in a new tab)

USER TEST AND ANALYSE, ROUND 2
Synthesis for round 2 of user testing, done on Miro.

Synthesis for round 2 of user testing, done on Miro.

Since there were still a lot of uncertainties, I decided to conduct another round of user testing. This time I conducted guerrilla  testing at Tate Modern and Tate Britain. I created another script and facilitated all the sessions, and had a notetaker present. We recruited 6 participants.

Some of these uncertainties included not knowing if the design still made sense with another themed display, and if the new rooms module design still looked like a map.

MAJOR INSIGHTS

  • Key details such as location, dates and cost were easily discoverable - both in the displays and rooms designs.
  • Users understood the rooms module, even though the display that the prototype was based on was no longer a chronological timeline.
  • Users were still easily able to browse the rooms despite the new prototype not being based on a chronological order.
  • Users were able to distinguish which artworks were associated with their corresponding rooms.
  • Users more readily clicked on the room cards as they now looked clickable.
  • Users didn't think the new rooms module resembled a map, but correctly believed it to resemble a journey.
  • Users believed that the old rooms module/winding line resembled a map.
  • With another theme display in the prototype, users didn't understand the title of the theme display and its context.
  • The majority of users preferred the new rooms module design.

FURTHER IMPROVEMENTS

  • Moved the introductory copy to sit below the title of the display so that there was more context, and to help users understand what the display was about.
  • Implemented the new rooms module design.


5. UI DESIGN AND BUILD

I worked on the UI design in Axure, exported them to PDFs and annotated them before handing the design files over to the developers. For animations and micro-transitions that I couldn't do in Axure, I referred the developers to other websites that used the same effects.

6. LEARNINGS AND RESULTS

One of the main challenges that I had in this project was working in a team with new developers, particularly some developers who had never worked with designers before. The main developer I worked with reassured me that I didn't need to send him any annotations as the specifications were in the CSS and UI library, however I realised that I needed to send him annotations as there were initially some padding issues. Looking back I've realised that it's important to use a program like Zeplin to save time later on. Thankfully Axure introduced a new feature which specifies all the CSS for developers.

Another challenge I had working on this project was designing templates. I had to ensure that the design would work across different displays and rooms and their corresponding content and images. The design needed to work with both landscape or portrait images, long copy vs short copy, and still make sense across different contexts. 

Tate has strict copyright policies, so I was unable to alter images, for instance, by cropping or overlaying them. This necessitated balancing pros and cons of potential layouts so that I could identify a design that would be the best fit overall.

Despite these challenges, the design has been successful so far. Watch this space for more data as it comes through!

Visit the Walk Through British Art display

19x
number of artwork views from the displays and room pages compared to pre-release
5x
number of room visits from parent display pages compared to pre-release
3x
number of "getting here" CTA clicks from parent and room pages compared to pre-release
4.1/5
rating from the Hotjar incoming feedback tool (site average is 3.3)
"On my bookmarks. I come 'round daily.
I love it."
Displays online visitor from Spain, Hotjar incoming feedback
DISPLAYS AND ROOMS

FEATURED ON BBC ARTS

The Walk Through British Art display was featured on bbc.co.uk/arts, where it was described as "A virtual walk through... digital journey."

“I'm researching for a degree. It's easy to search images and find out more."
Displays online visitor from UK, Hotjar incoming feedback
DISPLAYS AND ROOMS

FEATURED ON FORBES

The online displays at Tate Modern and Tate Britain were featured on Forbes' list of virtual exhibitions.

DISPLAYS AND ROOMS

FEATURED ON HOUSE BEAUTIFUL

The Walk Through British Art display was featured on House Beautiful's list of 11 best virtual museums and art gallery tours.

"Easily click your way through... see a clear overview of British art."
House Beautiful's list of 11 best virtual museums and art gallery tours