top of page
Hiking in Forest

Spottd

My Role:

Product Designer

The Problem:

How can we track invasive species in real time?

The Audience

Everyday citizens who enjoy keeping the environment healthy

Final Delverables

  • High-Fidelity Prototype

  • Component Library

  • Branding and Styling

  • Future Changes

The Inspiration

The Spotted Lantern Fly is an invasive species in the United States. It is indigenous to China and Vietnam and is believed to be introduced in the North East region of the United States in 2014.

​

As we will see, many people can recognize the insect, but many don’t know it is considered highly invasive and just how destructive it is to regional trees.

Spotted Lantern Fly Adult

The Design Problems

Many of our users are technically limited, how can we create a design flow that allows people of all skill levels to help us track invasive species?

 
How can we create one source of content that is accessible, informative, and empowers users to take care of their world?

The Proposed Solution

A mobile app that provides a single source of knowledge for invasive species and and allows users to track them in real time. 
 

SpeciesInformationSketch.jpg

Timeline

Week 1 - Discover

User Surveys and Interviews, Competitive Analysis

Week 2 - Define

Personas, User Journey, and User Stories

Week 3 - Develop

User Flows, Sketches, Wireframes, Specification Guide, Branding

Week 4 - Deliver and Test

Component Library, High Fidelity Prototype, Usability Testing, Future Tweaks and Features Based on Feedback

Discover

Who are our users?

Most of our users (80%) want to identify a plant or insect once a week.

​

63% say they interact with invasive species at least once a week!

80 percent of users want to identify a plant or insect at least once a week
63 percent of users interact with an invasive species once a week

Despite being a highly publicized threat in Pennsylvania, most people only know the common name for the Spotted Lantern Fly.​

87 percent of users surveyed are not familiar with the name lycorma delicatula
86 percent of users surveyed are familar with the spotted lantern fly

Users are most comfortable sharing their Zip Code and least comfortable sharing their address.

SharingZipCode.png
SharingCity.png
SharingCoordinates.png
SharingAddress.png

User interviews - What else should we know?

  • 3 of 5 people interviewed do not consider themselves 'Tech Savvy.' Some even insisted we meet in person because they don't do video calls.

  • People want to help but get lost researching because information is highly disconnected

  • Interviewees could name the Spotted Lantern Fly but could only name 1 or 2 other invasive species

  • Some people want to search by keyword

  • People want to help!

Someone taking photos of nature

How are people finding information?

Survey Results: Where do people find information? 48 percent of people use search engines. 25 percent use mobile identification apps. 13 percent ask family and friends.
Plant Net Logo
Plant Snap Logo
iNaturalist logo
Facebook logo
Google Logo

What do these apps do well?

  • Species information

  • Search by image

  • Scientific names

  • Save to collection

Where can we improve?

  • Local Field Guide

  • Identify plants and bugs in the same app

  • Provide multiple search results

  • Provide invasive status

  • Track sightings

“If a website or app is too complicated, or designed poorly, I won't use it. I will use something else.”

Define

Personas

Persona 1 - The conservationist. 40 year old woman with a bachelor's degree, a large family, who spends time in the city and in nature, who is low tech. She gardens, helps maintains family green space and is curious about nature. She uses identification apps and needs threat levels for species, different stages of growth, danger levels of species as well as benefits, and possible replacements. Her goal is to remove invasive species, identify them at any stage of development, and wants to know their history.
Persona 2 - The Tech Impaired Intellectual. 25 to 40 year old woman with a bachelor’s degree that lives in the city and has low technical knowledge. She interacts with nature when hiking and looking for wildflowers and wants to learn about topics deeply. This person needs to search by botanical keyword, needs prove matches, minimal pain points, and to see different stages of growth. She wants a percentage quality for image searches and to know if something is naturalized and cannot be eliminated.
Persona 3 - Curious City Dweller. College aged man who spends time in the city but loves to hike and camp. Is always taking photos of nature and using apps to identify plants. Needs to know what other people are seeing around him and be able to report an invasive species at any time. Wants to know high threat levels and also see a field guide of all species to look for. Wants to be able to plan ahead for his hike, know if something is dangerous, and help us track invasive species.

The User Journey

Every user we spoke with talked about collecting information from different sources. Many simply gave up because how hard it was to find detailed, consistent information.

Only the most dedicated users were able to navigate all of the sources listed below to fully understand a species invasive status and impact.

The Data Journey: Step 1 find a specimen. Step 2 Ask friends, family, online groups. Step 3 ask apps. Step 4 information research through wikipedia or google. Step 5 formal research from government sources

MVP User Stories

  • As a user I want to look up a bug based on a picture

  • As a user I want to look up a plant based on a picture

  • As a user I want to search for an invasive species by keyword

  • As a user I want to report an invasive species

  • As a user I want a catalog of invasive species in my area

  • As a user I want to know if a bug or plant is invasive

  • As a user I want to see a map of where an invasive species has been tracked (limited, needs additional research for future features)

Develop

Tools Used

Figma Logo
Google Suite Logo
Zoom Logo
Linearity Curve Logo

Development Cycle

Click Images to Expand

User Flows

User Flows for looking up a plant and reporting a bug or plant location

Sketches

Sketches of species information page
Sketch of possible home pages
Sketches of Catalog Page
Sketches of Analyze Photo screens
Sketches of image search results

Wireframes and Specification Guide

SpottdWireframe
Specification Guide.png

Component Library

Component Library

Branding

Spottd Logo Hand drawn by Will Hall
Colors for Spottd App

High Fidelity Prototype

Where it all comes together:
The Species Information Page

Species Information Page

Common name first

'Spot it' functionality in header for invasive species

Tagging system for quick information

Tags used in the app to display information about invasive species

Stage of growth examples

Threats to the local ecosystem

Heat map of where the species has been spotted so far

Bottom of Species Information Page

Test and Iterate

Feedback from Usability Tests

Verify Image Page

Verify Image Screen - Prototype

Users understood the flow to the Verify Image Page and appreciated multiple search results.

Users were unsure if the image search results linked to the species information page.

Users appreciate the warning graphic helping them understand that some results were inconclusive, but they could still research them.

Species Information Page

Users understood the yellow 'Spot button in time, but didn't know it was functional at first.

The information tags were often confused for links to information on the page.

Species Information Page Header - Prototype Screen

My Spots Page

My Spots Prototype Screen

Users understood the 'My Spots' logo once it was pointed out to them, but did not immediately know where the button would lead them.

There was a lot of interest in this feature, but users strongly opposed the app becoming a social media app.

Field Guide Page

There was excitement for the Field Guide and what it could be. Many users were inspired and came up with features they would want to see on this page including:

​

  • Filter by location

  • Offline Mode for off-grid use

  • New content libraries for different categories like fish, mushrooms, and birds

FieldGuideGraphic.png

"Sometimes I don't even know what I'm looking at on Pl@ntNet... But I like this, it's not overwhelming."

Refining in the Future

Final Prototype Home Screen

Tweaks:

  • Update icon for 'Spot' on Species Information Page to be more clear​

  • Change 'My Spots' and 'Spot' icon to be more clear

  • Add 'Location' filter to Field Guide

  • Link Species Information Pages together when possible

  • Offline mode for Field Guid

Future Updates to Research:​

  • Accessibility Markups so the app is compliant with the ADA and Screen Reader Technology

  • Explore making Information Tags link to content on the Species Information page

  • Redo content to show not just stages of growth, but distinct characteristics for each species and look alike

  • In depth map feature for exploration

The Future of 'Spots'

Encourage users to track using coordinate data by allowing them to share Spots.

​

Similar to Pins on Google Maps, users will be able to place a spot directly where they are and share it with their friends, families, and networks to help control invasive species.

Share Spots Graphic
Sending Spot to family groupchat graphic

Conclusion

Final Deliverable

Final Prototype Home Screen

Our prototype was created with these thoughts in mind:

​

  • Make identifying a plant or insect by image seamless and intuitive

  • Develop a model for a robust content system that can be expanded

  • Allow users to search based on keyword

  • Save users history by utilizing 'Spots' and 'My Spots'

  • Allow users to 'Spot' and species from the corresponding information page

Final Thoughts

Most people I talked to throughout this process want to help tackle the invasive species problem. But there is so much information that the hurdle to understanding the situation is a major pain point.

​

By consolidating data in one centralized location and providing tracking features when users are actively engaged with a species, we can give them the knowledge to better understand the situation and the tools to help us track these species in real time.

Other Projects

Happy Hippie Beeswax

Mobile First Wholesale Store for a Local Small Business

HHB Final Prototype Screen

Bus Buddy

Taking the guess work out of getting there

bottom of page