top of page

Allison Skinner

Allison Skinner 

IS.PNG

Invasive Species

2023

Web Design, UI, Low-Code Development

Screenshot 2025-10-16 165919.png

Invasive Species

2023

Web Design, UI, Low-Code Development

Screenshot 2025-10-16 165735.png

Invasive Species

2023

Web Design, UI, Low-Code Development

Objective

The objective of this project was to transform a static informational document about invasive species in Massachusetts into an interactive, user-friendly web experience. The goal was to educate the public on the threats posed by invasive species while improving accessibility, engagement, and usability.

Problem

The original document was a static, scroll-heavy layout listing species and links to external PDFs hosted on Google Drive.


Key Issues Identified:

  • Low interactivity: Users had to download PDFs to get more info

  • Disjointed navigation: External links opened new tabs, disrupting the experience

  • No visual hierarchy: All species were listed uniformly, with no grouping or filtering

  • Wall of text: Long text blocks without images or callouts made it hard to digest

  • No preview: Users couldn’t visually identify species before clicking

Goals

  • Improve information accessibility and engagement.

  • Make the educational content scannable and visually appealing.

  • Enable users to explore species categories efficiently.

  • Align visual design with environmental and educational tone.

Mockup

Solution

Visual Hierarchy & Design System

  • Clear sections were introduced for the intro, species cards, and taxonomy filters.

  • Consistent card design with readable font hierarchy and gentle color backgrounds.

Species Card Layout

  • Each species now has a thumbnail image, a dropdown info selector, and a short description on hover/click — making it engaging and scannable.

  • Users get quick visual identification and condensed educational info without needing external downloads.

Integrated Learning

  • Clicking on a card reveals info inline, encouraging deeper engagement without navigating away.

  • External presentations are still available but subtly linked to avoid clutter.

Impact Summary

Category
Original Mockup
Designed Page
Layout
Dense scroll, no visual hierarchy
Sectioned, responsive, and scannable
Content
Text-heavy, hard to scan
Bite-sized, digestible summaries
Imagery
No images or previews
Thumbnail photos on each card
Interactivity
Static, external PDF links
Expandable cards, inline info
Clarity
Long list of links, no grouping
Categorized cards with filters
Category
Original Mockup
Designed Page
Layout
Dense scroll, no visual hierarchy
Sectioned, responsive, and scannable
Page 1 of 5

Outcome

  • Streamlined over 20+ species into an intuitive card-based interface.

  • Boosted educational value and time-on-page through interactive exploration.

  • Achieved the project’s goal to make invasive species awareness engaging, accessible, and informative for a general audience.

Final Designed Page

bottom of page