Drag-and-Drop Interaction

Tools Used: Articulate Storyline, Figma

The Problem

As news of dwindling monarch butterfly numbers becomes more widespread, many residents who live along the migration routes have joined efforts to boost the butterfly population. Historically, native milkweed species along the migration route have served as the food source for hatching monarch caterpillars. As land development and herbicide use have continually reduced the availability of native milkweed plants in the wild, well-meaning butterfly enthusiasts have purchased milkweed at plant nurseries to provide host plants. Unfortunately, the non-native milkweed varieties typically available for purchase flourish year-round, which encourages butterflies to remain in place instead of continuing their migration. These “resident” monarchs are more susceptible to disease than their migrating counterparts, which poses a new threat to the monarch butterfly population.

The Solution

Entomologists stress the importance of native milkweed in the life cycle of the monarch butterfly in a natural environment. Many butterfly enthusiasts are attempting to raise awareness for preservation and propagation of native milkweed species by sharing seeds and planting instructions. Until these seeds and mature plants are more widely available for distribution, it is important to identify native milkweed plants in the wild so they can be preserved when possible or so seeds may be collected. The types of milkweed that are found in natural habitats varies by region, so I created a drag-and-drop interaction that is specific to plants that can be found in the upper Texas Gulf Coast region. When residents can accurately identify milkweed in local pastures, fields, and marshes, they can take steps for preservation. For example, even a slight delay in mowing a pasture can allow time for migrating monarchs to lay eggs on healthy milkweed plants.

Development

A drag-and-drop interaction was created in Articulate Storyline to allow users ease in matching labeled plant ID tags to photos of native milkweed. When a plant is incorrectly identified, a hint appears to give the user more information about the plant characteristics before making another attempt. The feedback provided through the hint serves to prepare users to correctly identify the plants in the natural environment.

A glassmorphism (frosted glass) effect was created in Figma to add visual interest to the slides in the interaction.