British Council Arts in China- digital information visualization

 

Project Scope:

Information architecture, Wireframe, Responsive web design, Interaction specifications, Technical specifications, WordPress-based development

Team:

UX designer/Project director, Art director, Web designer, Technical director, Full stack developer

My role:

My role as Project director and UX designer was to extract key information from the 73-page guideline and create a visual story.

  • data and categorization
  • define user profiles & goals
  • wireframe
  • visual research
  • technical specifications

Background

China Now is an online resource created by the British Council for UK arts and creative professionals with interest in China and Hong Kong. This project took place as a pilot to explore ways to visualize the numerous research reports and guidelines that are published each year by China Now and gain an understanding for future digital visualization possibilities of both quantitative and qualitative research.

The Goals

To create an interactive, 1-page digital visualization of the data and information contained in “A Guide to Arts and Culture Opportunities in China”- a 73-page guide to arts, culture and creative activities commissioned by the British Council in China that aims to help UK stakeholders access these opportunities.

All-to-often people tend to flock to China’s biggest cities, the ancillary goal of this project is to better orient people in creative industries to China’s lesser known cities and regional focuses, and spark ideas for opportunities and collaboration located all throughout the country.

The Challenge

Besides just the sheer amount of information, one of the biggest challenges was that the data was mainly qualitative and the research reporting varied between art forms. Another challenge was that larger cities naturally have more events and programs, but since one of the main goals is to promote lesser known cities, I needed to deemphasize number of activities and instead showcase unique city initiatives and opportunities outside of just the well-known cities.

Information extraction and grouping

As mentioned, the guideline does not contain large amounts of quantitative data, thus using traditional charts and graphs did not make sense. The guideline does contain a lot of information about the different activities and funding available for UK creatives so we needed a way to sort this and create a logical discovery of information. A map was a requirement of the brief, so I used this as my foundation reference point and began grouping data something like this:

  1. List out all cities mentioned in guideline and group them by geographical region (as defined by the British Council)
  2. Assign all activities/events/opportunities to the city/cities in which they take place
  3. Create labels by art form type, confirming these fit the BC target audience industry-types and the BC’s internal objectives
  4. Made note of any additional general facts and figures that could be used when creating the overall story

The map

The BC requested that the visualization include a map because much of their British audience is unfamiliar with the size, geography and population of China. We first built the map and then built the story around it.

Map visualization requirements:

  • Over 30 (and counting) city names, populations and introductions
  • 7 (with the potential for more) art types
  • 7 regions, populations and introductions
  • Endless art and cultural activities in China (this will continuously be populated)

The user is most likely to be interested in one particular art form, for example a film director will likely be most interested in activities related to film, so we needed to provide the opportunity for each user profile to quickly filter by art type.

Ideation 1- Heat map inspiration

My first approach was to place all of the activities/opportunities on a map of China in a way that resembled a heat map, giving each art form a color and systematically darkening the color where the activities were most concentrated. The largest cities naturally had the most activities, thus I quickly realized that this visualization would just reinforce people’s preconceptions to focus attention on the largest cities.

The "Heat map" ideation reinforced art concentration in large cities- exact opposite of the goal.
The "Heat map" ideation reinforced art concentration in large cities- exact opposite of the goal.

Ideation 2- Binary labels

My next approach was to label the map with all of the cities that the guideline mentions, placing color-coded dots, representing each art form (ie. Music, Film, etc.), on each city with binary labeling- there is an existing activity in that art form or there is not. The logic here is that if a user is looking for a specific art form, they can filter by that art form and have equal opportunity to discover cities of all sizes. Placing all the city names on the map, became too crowded so we divided them by BC-defined regions.

We quickly realized that this layout placed the responsibility of finding the information on the users and did not promote natural discovery. We counted the clicks it took for the user to arrive on substantive content (too many!) and knew that that the UX was not optimal.

Ideation 3 – Simplified layers

We kept the regionalization of ideation 2, but instead of navigating to regions by click, the user could now simply mouseover. This enables users to “explore” the map without quickly funneling into an unknown region.

The art types are selected by radio buttons. This simplifies the map and gives clearer visual for the singular, selected art type.

We maintained the “drill-down” approach of the second ideation, but provided more information pre-click. We gave an introduction to the region, population and other art types that exist in the region- visualized in relational bar graphs.

It was a big decision to remove city names from the main map, knowing that the target audience isn’t likely to be very familiar with the geography of China, but labeling every city name was overly cluttered and I realized that even if a lesser-know city’s name appeared on the map, it would not enhance recognition for the user.

Information hierarchy and interactions

Many prototype iterations (in low fidelity and high) were created to understand how to layer the map and at what levels to present each information type. We wanted to get the user to the activity detail as quickly as possible, yet we didn’t want them to arrive at it without having an understanding of where the activities are located, the population and general information on what that region specializes in from an arts and cultural standpoint (the Chinese government has designated specific regions for focus on different industries). In order to encourage the users to play with the map we started broad and used a drilldown approach fueled by the user’s selections. At first we tried to keep all information on the map itself, but eventually chose to utilize a three column popup, contained within the map frame. Though the user can no longer see the map in the popup, it is self-contained so that the user can easily navigate between regions, cities and art types without closing it.

Storytelling

Once the map was completed, I began building the story around it. The main purpose was to compare the size and population differences between China and the UK and give people orientation to the numbers- numbers of people, cities, museums, venues, libraries, etc. Additionally the British Council project director wanted to shine light on the amount of money that is spent on arts and cultural activities within the overall Chinese economy.  I pulled out key figures from the guideline and worked with the Art director to make these numbers meaningful.

 

Mobile version

The two biggest challenges for the mobile version was to ensure the best possible UX for the map and to simplify the story animations while still maintaining the integrity of the key information.

The mobile map has similar functionality in that the user must choose an art type (one is automatically selected at arrival) and can see where the art form is most focused on the map. We removed the regional information from the map level. Once the user clicks on the map they are shown the different regions highlighted on small maps of China. From there, information is presented at similar hierarchies as the desktop version, with the addition of a popup within the popup to display activities in fullscreen. User can navigate “back” within the popup or close the popup altogether at any point.

The result

In February 2020 the beta site was shown to thousands of arts and culture professionals across the UK with a very positive response. Because of this pilot, China Now was able to secure additional funding for information visualizations.

The content population and publication is scheduled to be complete (by the client) for the summer 2020 festival season. I recommended to the client that moderated usability testing, heat mapping, and true-intent studies are conducted in beta publication and after publication.