PROBLEM STATEMENT
Project Aware—an ocean advocacy non-profit with a mission of public outreach—wanted to bring awareness to a pivotal United Nations report (a 200+ page technical document) summarizing the global market for shark and ray products to an audience of ocean lovers and dive enthusiasts.
Time frame: 4 months
My roles: Creative direction, content synthesis, UI, UX, illustration, infographic design
Partners: Project AWARE (scientific consultants), Joshua D. Stewart Ph.D. (data viz), Reliable (code)
HIGH LEVEL SOLUTION & RESULTS
Synthesized complex data findings into an easily-digestible interactive infographic microsite (Active: 2017-2021)
4-week reveal campaign building to final launch
Created a suite of branded assets for ongoing outreach
Discovery & Inspiration
One of Project Aware's program managers initially approached me to propose ideas for how we could translate this critical UN report into an easily-digestible public outreach product.
How Might We distill a 200+ page technical document for a non-technical audience?
How Might We translate the scientific findings of a complex shark fin and meat industry to divers and ocean lovers?
How Might We create a rich educational experience for users of various incoming knowledge levels?
We wanted to communicate a large amount of complex data in a way that empathized with users' interest levels ... for some users that meant high-level broad strokes, while others wanted to drill down into all the nitty details.
- notes from the project
research & UX design
I collaborated with consulting scientists (who were contributors to the UN report) to understand the scale of the report's findings. (Spoiler–it was huge!) After a number of calls and a thorough distillation of the long technical report, I proposed a four-panel interactive infographic that was organized around four of the report's main themes. An important part of this solution was that it allowed users with varying degrees of existing knowledge on the topic to engage at the corresponding level of detail.
Wireframes
Low fidelity wireframes exploring the four main screens of the infographic:
1) Market overview
2) Country-by-country breakdowns
3) Gaps in the data
4) Recommendations
prototype
An early prototype I shared with the scientific consultants.
This prototype helped us to identify an important topic that we had previously overlooked and subsequently added to the scope – the challenge of knowledge gaps due to the way in which the data (and most field data!) was collected.
data visualization
Another very important aspect of synthesizing the report's finding was visualizing the market data accurately. For this aspect of the product, I collaborated with a data scientist to create these market flow visualizations, which users could interactive with in real time to gain a sense of the import and export flows of shark fin and meat products globally.
Frequent, low fidelity mockups allowed us to work agilely with the rest of the team— including scientific and policy experts.
Data visualization
Dry spreadsheet
becomes beautiful data viz!
Ee transformed raw data into interactive visualizations for users to engage with. spreadsheets of global import and export data became flow plots organized by country.
visual storytelling & UI
Most of the users were coming from non-technical backgrounds and therefore one of our primary product goals was to make it an engaging educational tool. Therefore, it was important that the visual language of this complex information was approachable and conversational in tone. I was inspired by the color palettes and illustrated elements of children's picture books, such as those by Richard Scarry.
the 'UseR' in UI
users were primarily non-scientific and spanned a range of ages, so I looked to the inclusive style of illustrated children's books for visual design inspiration.
style exploration swatches for the custom iconography.
color palette
I developed a project-specific color system, which is harmonious with the organization's brand palette.
Additional supporting assets
In addition to the microsite, I created additional brand assets for ongoing outreach and education that followed the visual brand and guidelines.
supporting assets
I created supporting assets including social art and a press kit–adding additional value and continuing the story.
Final product
It was so satisfying to see this long, technical report come to life through a full visual language, data synthesis and interactive microsite. By collaborating with marine scientists, policy experts, program managers and data scientists, we were able to breath life (and, most importantly, raise awareness of) an important and otherwise highly-scientific publication. It was fulfilling to see the excitement surrounding the 4-week launch campaign and we received great feedback from various user groups.
