DISPLAYS AND ROOMS
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.
- Product manager
- 3 developers
- Discovery research
- Archetype creation
- Recruitment and planning for 2 rounds of user testing
- User testing facilitation
- User testing analysis
- UI design
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.
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.
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.
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?
I created some problem statements based on the user needs. I then brainstormed potential solutions using the Crazy-8s ideation technique.
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.
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.
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.
- 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.
- 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?
Key information such as location, dates and price were not easily discoverable.
- 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.
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.
- 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.
Users didn't realise that rooms could be clicked on and visited.
Added a "Go to room" CTA to all room cards.
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.
- 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.
- 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.
I had involved the developers from an early stage. The main developer who worked on the project was involved in the guerrilla discovery research, and saw my sketches, wireframes and prototypes as they were developing. At the prototype phase we started having weekly catch ups so that he could scope out the work and assess the technical feasibility. He was also involved in note taking for the user testing sessions.
I worked on the UI design in Axure, exported them to PDFs and annotated them before handing the design files over to the developers. In the annotations I included details such as behaviour, padding, and image sizes. For animations and micro-transitions that I couldn't do in Axure, I referred the developers to other websites that used the same effects or created examples in After Effects. Tate has a UI library which is very basic but covers typography, colour, and button styles. During the build phase Axure rolled out a new feature where elements can be inspected, very similarly to Zeplin, so I was able to refer the developers to this.
Fortunately I work next to all the developers so we were able to work very closely on the implementation and build. They were easily able to reach over to me about any questions and asked me to look over their shoulder while they adjusted the CSS.
A major 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.
Another challenge I had was the very limited UI library. A lot of my design was creating new patterns. Tate doesn't have any hover states aside from buttons, so I introduced new patterns for hover states and transitions on imagery. I added new iconography, new patterns for the "tube stops" and bolder lines (a result of the feedback from user testing). I created most of these patterns by assessing the rest of the website and designing the elements to be consistent with the existing design. This was reviewed with the design department. However, the bold lines could have been thought through more thoroughly. I have since had a discussion with my manager about improving the UI library. We are in the early stages of discussion with the senior digital designer about incrementally rolling out new components in the UI library.
Despite these challenges, the design has been successful so far. Watch this space for more data as it comes through!
I love it."
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."
FEATURED ON FORBES
The online displays at Tate Modern and Tate Britain were featured on Forbes' list of virtual exhibitions.
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.