Pacific Salmon Foundation
Pacific Salmon Foundation is a scientific driven research and governing body that collectively looks at conservation, restoration and the historical documentation of the Salmonid population in British Columbia. I was brought on to revisualize key components in their new 'Pacific Salmon Explorer' that helps people make informed goverment level choices on infrastructure that could have impact on Pacific Salmon.
- Roles: Visual Design, User Interface Design, User Heuristic Designer, Mapbox Coding
- Tools: Adobe Illustrator, Adobe Photoshop, Mapbox, Figma
- Year: 2024
- Context: Client Internship (7 months)
- Deliverables: Website
Critical Question
*How can we design a better user experience for goverments to make informed choice on projects that could impact future salmon stocks?
Designing for the User
I proposed multiple solutions that looked at new features to color reworks that better streamlined how users of the tool interacted with the PSF. In the initial discovery phase I was brought on to look at color and patterns, but as the tool grew in size and scope I was asked to reinterpret data, form new user patterns and implement general design changes to sections that linked to other sites.
Some of my design contributions can be found in the list below:
- A complete redesign of how data is interpreted in client side graphs
- Revising Iconography and Color systems to lessen technical debt across the tool
- A ground-up rework of the Regional Overviews section that links with an externally developed site (State of Pacific Salmon).
Iconography
Working on an extended icon set that coupled with Mapbox was a way we tried to mitigate user friction. A notable problem we discovered early on was that there was a great deal of "technical debt" embedded in the tool with varying icon sizes and calls to now defunct decorator patterns. To standardize the icon set we set the icon sizing to a firm 36x36 square with a white border to optimize counting icons that were clustered together. In the icon redesign me and my senior team looked to group icons by color and key as well as redesigning the icons to read better at a low resolution.

All icons adhere to the 36x36 grid circle system in order to have consistency and reduce technical debt.
In our initial tests we grouped layer colors and icons by chroma. From the proposed selection of 72 colors we ran into a problem with the color system as it was not colorblind friendly. To work around this we adopted and implemented a new color palette that used contrast and pattern as the main way of conveying information. In this redesign our senior team grouped out layers and patterns by clusters to allow for easier pattern recognition. Shown are the proposed chromas adjusted for accessibility:

Regional Overviews
Regional Overviews were designed as a way to extend the tool capitalizing on a user's need to have quick easily digestible snapshots that helped relay quick statistics of salmon across all regions without having to do a deep dive. The intention was to situate the user quickly, providing a common narrative to help push past the complex data being presented. The initial designs featured a card system after front loading most of the auxiliary information as charts that pertained to the regions conservation units and its overall biological status.

A look at how we reduced cognitive overloading with text.
Internal testing revealed that users were less likely to read the front loaded information, so after some deliberation we simplified and focused data to be more visual. We replaced the introduction text with a card system that highlighted "glance-ability" so users could see immediately the impact across the region on all salmonid species. Across explorations we decided to speculate on more expressive ways of describing how users would interact with the data.

In our final iteration we looked at a funnel system that helped center the user. Similar to the Eames "power of 10", we wanted to give a scope in and out interaction that allowed users to look at status then assess salmon needs through a triage system. We built this system directly into the overviews to give a stronger presence to this extension of the PSE experience that also lays a narrative thread to an experiential status site called State of Salmon .
Biostatus Overhaul
Initially the incoming data showed biostatus as a mess of inflexible charts that created user friction. The information overhead was lengthy and full of jargon, as well as inconsistently formatted which impacted understanding. For the new re-design of biostatus across the tool we used a traffic light system to qualitatively apply an already consistent design pattern so users could recognize between good, moderate, and poor systems at play.

Biostatus is a fancy way of allowing salmon biologists to get a gist of the over all system health without having all the information on hand to do a deep research dive, it’s useful for allowing researchers to develop a game plan without stranding themselves in endless research and papers.
Our initial understanding was to use a bar chart to quantify interactions along with a trimetric badge (tribadge) to better facilitate dialogue between the different categorization systems. After some research and testing, we began to see faults with the bar chart as users wanted to see more granular information from each individual pressure.

In my redesign, data is sorted and displayed by confidence intervals in a 2D plot prioritizing mapping accuracy in the counted spawning salmon. In which, the variance in counting methods and the confidence intervals enables users to do a deeper dive through positioning the graphed information in 2d space. The flexibility given by providing options into the granular data helps lay-people using the tool to better reference changes in policy from external knowledge bases.
Consolidating the data into a more graphical iteration allowed us to solve problems of granularity and focus, giving researchers the ability to look at data changes over time, rather than observing status health one dimensionally.
PDF Rollups and Designs
A major point of user friction came from observing other users and their patterns navigating the site. The online portion was fine, but we observed a need for the information to be presented differently as a rapid printout. My team lead came to me to take a speculative look on how users would look at printouts of cogent information within the habitat panel and the biostatus panel.

We wanted to use the roll up as a way to rapidly access information, this could be helpful for news agencies, politicians or high level thought leaders.
We created a way for users to obtain crucial information highlighting the "at a glance" principle found in both Biostatus and Regional Overviews. During testing we observed variance in how people used documents to track their thoughts and research. This culminates in a printout that could be assessed rapidly, allowing users to get a definitive top level readout without having to parse through the site.∎