Information and Mapping: Shark Bay (UNESCO World Heritage Site)

C Studio IV — Project 2

Project Overview

The following is a documentation of my process for an information and mapping project. This was completed as part of the class Communications Studio IV (51–330) at Carnegie Mellon University in Spring 2023 — Instructed by Kelsey Elder.

Project Prompt

Task: Create a collection of map-like artifacts which can communicate the data, memory, and history of a place.

Location: This project’s possible sites are restricted to UNESCO World Heritage sites.

Who: The audience for this project is the general public who would visit this site; people of all ages who may be a local or a visitor.

Main Deliverables:

1. ZINE: What is the relation between memory, maps, and truth and how can sequence (or not) provide an experience of these things for others? Forage an account (story) related to your site. Extending from the visual language of your tool-kit, create a print publication with (the equivalent of) 16 pages excluding covers in a multiple of 5–10 copies.
2. INTERACTIVE: Create a single-page website which uses scrolling to provide an interactive and dynamic experience of your site for others to experience. This single-page website might be a prototype (Figma) or coded (HTML/CSS/JavaScript).

Milestone 1: Selection & Inspiration

Tuesday, March 12th — Thursday, March 14th

Tasks:

1. Select a UNESCO World Heritage Site, making sure to factor in the availability of information, and the final deliverables. Share some key context and what you find interesting.
2. Find inspiration and examples of mapping and data design to share.

For my World Heritage Site, I ended up choosing Shark Bay in Western Australia, as it was a very large site, and had a lot of information available. Additionally, I thought it’s landscapes and biodiversity were very interesting.

I then found some mapping design examples, including nature examples such as geology and animal related artifacts.

Mapping/Data Inspiration

Milestone 2: Collection & Research

Thursday, March 14th — Thursday, March 21st

Task:

Get to know your site through curiosity-driven research. Perform a mapping (action of data-collecting and researching) of your site. Gather as much data (content) in the following categories as possible over the next week. Consider all the ways in which you can collect and visualize the data as you collect. Aim to have content for the following key factors:

• Language: What are the linguistic needs of your site? What languages do locals and visitors speak? What are the concerns of those scripts? If you can, dig past today to find out what languages were spoken before the ones of today.
• Physical/Key Features: What is the data of the land itself? How big? How tall? What are other physical features you can quantify?
• Record/Memory: What is an intriguing story (past/present/future) related to your site? Find sources and collect this story, including information about those involved.
• History/Timeline: What has happened at your site? Find sources and collect these dates and descriptions.

In order to research the site, I mainly used Shark Bay’s website, as it was a great direct source of information. I created a document with bulleted lists for different aspects like history, climate/geology, each location listed within the site, etc. I tried to focus on aspects which might lend themselves to data visualization and mapping, but I also just took extensive notes on everything so that I could determine what to focus on.

Milestone 3: Plan & Identity

Thursday, March 21st — Tuesday, April 2nd

Task:

1. Stemming from your feedback and own interests, identify and make a project plan for the two major final deliverables (print and interactive)
2. Extending from your learning from P1, and in combination with unique needs identified for your site in the prior milestone, identify core graphic standards your project can pull from and use, including: Typefaces, Stylings, Hierarchies; Colors; Icons, Textures, Patterns; Images, Image Treatments
3. Create/edit copy to work with and explore all the ways you can make information visible. Specifically: Collect, trim, curate, edit text that you can use for your print and interactive outcome; Sketch and generate illustrations, spot graphics, diagrams, visual aids, information visualizations, etc… that supports your ideas and project plan.

Much of this milestone was spent on curating text and content for the zines (which could also possibly be used for interactive), as well as determining a format for the zines. I wanted to be more experimental with form, and decided on a pair of accordion zines which would fold out into posters.

I also had a lot of trouble deciding on the scope for this project. I wanted to include so much information, but realized I wouldn’t even have room for it all, and not enough time to do it justice. I eventually settled on one zine for the landscape and geology of the area, and one for the animals and plants (since this is what drew me to the area in the first place). I was still undecided about the interactive content, but I knew after starting to work on the zine I would have more ideas.

I also did a bit of exploring colors and type and other visual considerations. I knew as a starting point that I didn’t want to do any strong editing to the photos, and also wanted them to be prominently featured. In terms of color, I wanted to use something similar to the website, which reflects the landscape of the area. For type, I started by using the website’s font for headings and finding good pairings.

Milestone 4: Zines

Tuesday, April 2nd — Tuesday, April 16th

I was still figuring everything out stylistically when I started with the zines, but I knew that jumping into things would help me make some decisions. I started by changing my typography decisions after some feedback, and went with Urbana for the headings and Elizeth for body text and captions (bottom left option). This allowed for both a more unique header font, and also a very legible body copy even at smaller sizes due to a high x-height.

Next, I just started putting all of my body copy into a document with the layout I decided on earlier (which folds from a slightly less than 11x17 page). For a while, I felt stuck here because I didn’t feel like i had much room for much else. However, after discussing with others and printing some text out, I realized I could get away with smaller text and leading and still have it be very readable. Then I just kept going, keeping both zines very similar in layout and style. I really wanted to find ways to highlight the photos I had, and also work with the format.

After feedback, I was also able to make a few adjustments such as adding some bold/underlined so readers could skim the content, and making the captions consistent.

For the timeline poster, I spent a while figuring out how to scale everything. At first I tried to add all events since 1850 (European settlement beginning). However, there were too many that they barely fit without any timeline and just as events. So I instead decided to start with the first restoration event in 1990 — the start of Francois Peron National Park. This allowed for enough room to include the graphical timeline I wanted, and still provided a reasonable starting date. After some feedback and self-reflection, I added in dates on all the events, and tweaked the header to be aligned with the paper’s folds.

I also made sleeves to pair both zines together, and then went into production mode, making sure everything was printing right, and folding neatly.

Milestone 5: Interactive Experience

Tuesday, April 16th — Tuesday, April 30th

After finishing the majority of the zines besides some minor edits, I started thinking about my interactive content. I knew at this point that I wanted a scrolling timeline (with more events that my poster, going back further and including geology). However, I still needed to figure out how to format it.

I started out with sketching since I would be coding, and decided on a format of a winding line with images on one side and descriptions on the other. I also took this time to figure out how to best structure the HTML, and then jumped into coding.

I then worked by incrementally adding features before our first demos where I got some helpful ideas and suggestions (such as filtering the events by using the key at the top or adding in images with detail (like in the zines). I also personally wanted to make the site responsive and mobile-friendly, even though this wasn’t a requirement.