Nesti

Creating an app and responsive website for social good — helping Floridians help sea turtles

Task: Create a 0-to-1 app and responsive website design to help save sea turtles

Timeline: November – December 2021

Role: UX researcher, UX designer, Visual designer, Interaction designer, Graphic designer

In this case study, I share my process for a 0-to-1 app and responsive web project aimed at providing tools and resources to help beach-going and environmentally conscious Floridians take action to help sea turtles.

Here’s how we got there.

1. Context, Goals, & Constraints

2. Understanding the Problem

3. Defining the Problem

4. Potential Solutions

5. Testing the Design

6. Results & Next Steps

7. Key takeaways

8. Toolstack

Context

Marine life of all kinds is increasingly endangered by climate change and other threats. As a longtime resident of Florida’s Space Coast — where thousands of sea turtles nest each year — I have personally seen how beach erosion alone negatively affects wildlife. So when tasked with designing a 0-to-1 app for social good as part of a UX certification, I chose to explore how to help sea turtles.

Project Goals

“Help save sea turtles” is a huge, ambiguous and difficult goal to achieve with just an app and a website, but that’s where I started. The idea had to quickly get reduced in scope to be manageable, so the goal became how to:

• Help Floridian beachgoers help sea turtle researchers;

• Increase overall awareness of the threats to sea turtles;

• Create more conservation community and possibilities for action; and

• Aid researchers in collecting data

Exploring the complex problem space of environment, wildlife, and people

. . . and finding the need to reduce project scope

Beginning from the complex, vague idea of “helping save sea turtles,” I first explored the many issues facing sea turtles worldwide to better understand and define the problem space. Among the many, many issues I found were:

• Harvesting for consumption, and the shell trade

• Fisheries (trawling, nets)

• Marine debris, pollution, and oil spills

• Artificial lighting, coastal armoring, over-development

• Beach erosion

• Predation

• Climate change

Digging in, I learned that the threats facing sea turtles are so numerous, complicated, entwined, and difficult to address, that even professional conservationists struggle to deal with trying to approach them singly, much less in a systematic way.

This was going to be far harder than I thought — I had to simplify the scope of the project.

Narrowing the focus

The number and size of the problems affecting sea turtles were (are) overwhelming — I had to narrow the project’s scope.

Focusing on “just” Florida — with its more than 8,400 miles of coastline and home to tens of thousands of nesting sea turtles — seemed a slightly more manageable idea. The Sunshine State state also posed many archetypal challenges to sea turtles, with its explosive popular growth along its coasts over the past few decades, and its susceptibility to climate change.

Interviews with Floridians reveal a love of nature, but frustrations

With a new focus, I conducted more targeted research:

• First I contacted several Florida-based conservationist organizations and asked if I could survey members on a range of issues, including attitudes toward conservation, feedback on local efforts, and best methods to help and support sea turtles

• Next, I interviewed a half dozen regular beachgoers from Brevard County and two sea turtle researchers from the Archie Carr Wildlife Center. I discovere sea turtle communities are splintered and there were no easy ways to coordinate help

Personas

Based on this research and interviews, I created two proto-personas for the app:

🏝️ Carl, the regular beach-goer

• loves the beach

• but doesn't have easy ways to help his beach or sea turtles

• conservation feels like hard work for professionals

🚤 Isabella, the environmental activist, and marine biology student

• feels that many Floridians are far too indifferent;

• conservation efforts seem outdated,

• missing the urgency needed

Analyzing current sea-turtle-related apps

Competitive analysis shows many groups just solicit donations

I also conducted an extensive review of environmental and conservation-oriented organizations, websites and apps

• from established groups like the World Wildlife Fund

• to more science-driven outfits like Florida’s own Sea Turtle Conservancy.

Some groups, like the Sea Turtle Conservancy, are dedicated to providing practical help on a number of issues. But I discovered that, somewhat depressingly, the main action many other sites promoted was for people to send them money, or book a nature-related trip. In fact, there appear to be a number of fraudulent “environmental” sites that solicit donations without providing any help to wildlife

Defining the tasks needed to help sea turtles

Incorporating user research, I analyzed tasks people could do that could have a practical impact on helping save sea turtles, using the “jobs to be done” framework. People did not have an easy way to help “professional” conservationists, be involved during nesting season more, or share with the community.

Key tasks along the user journey

Matching these pain points to solutions I created a series of tasks that would closely follow the original user journey. The main scenario went like this:

🚶‍♂️🏝️ Carl is walking along the beach. He sees a sea turtle nesting and wants to document it.

📱Using the Nesti app he takes a photo, using the app’s built-in red-light filter so as not to startle the turtle.

✏️ Then he adds identification info — from a quick app ID section, he can tell from its tracks that it’s a green turtle — and sends a notice to sea turtle researchers.

💬 Then he posts the post to the community and spends time watching the nesting sea turtle safely from a distance.

Incorporating all the information and tasks into a user journey helped us understand our primary user’s pain points.

Tasks then become app’s information architecture

We could then use the pain points to create solutions — actions that would become the foundation of the app’s information architecture.

📷 Document — photo/video encounters

🖋️ Report — help researchers by submitting data

💬 Share — create community through posts

🎓 Learn — provide important information to take further action

Creating user flows helped map out and fill in gaps in the site architecture. And, later, after we discovered some legal issues, the task flows would help indicate where changes needed to be made.

Documenting and sharing encounters

The tasks helped me create the information architecture for this app that now had a name — Nesti — and with that structure in place I could start sketching solutions for the app and desktop.

The key user flow was: document > report > share

Focusing on this, I created a home page design that would mirror a beach-goer’s journey, starting with document at the top and sharing at the end. Initially, I included a scrolling series of social posts but this proved confusing to users so it was simplified.

App first, then web

Requirements for the project stipulated creating both a mobile app and a responsive website. I decided to focus on designing and testing the app first, to get the functionality worked out, then turn to the website. My rationale:

• 📱 App — designed for Carl (our primary persona), to highlight the most important tasks and functionality; outdoor use, on the beach

• 💻 Website — designed for Isabella (secondary persona), to focus on activism, learning, community ;indoor use, at home

User testing reveals legal issues and unintended consequences

I tested a low-fidelity prototype of the mobile app with a half dozen people I had interviewed earlier in the process — Brevard County beach-goers and a pair of volunteer sea turtle researchers.

In addition to a few smaller UI issues, the user testing uncovered some serious legal issues I had overlooked: by Florida law, it is illegal to bother sea turtles or their nests.

One of the researchers pointed out that an unintended consequence of Nesti could be that it might encourage people to bother sea turtles — ironically, the exact opposite of what we intended to do!

I added some warnings:

• the document screen to warn users before they took photos of sea turtles, and

• sightings page that maps encounters

My v1 for the warnings used a standard Apple warning component, but from a design standpoint I would make it friendlier in a revision.

Final app designs and onboarding

I iterated on the design from the low-fidelity prototype and created mockups, including a style guide and design system.

Onboarding for the app mirrored the same key tasks and functionality that drove my earlier decisions for information architecture and home page design:

• document sightings

• report encounters to researchers, and

• share with a community

Responsive Web — Sightings Become the Focus

With an app MVP design finished and tested, I moved to the responsive web part of the project and focused on indoor desktop users, where the app had been designed primarily for documenting encounters outdoors.

Much of the heavy lifting had already been done so it was fairly simple and fast to repurpose app designs to the new objective.

Results & Next Steps

Testing proves design is intuitive

• We had a 100% success rate in the mission blocks, which indicated that users were able to perform the mission without any issues.

• The specific questions on the key concepts also returned positive answers, with nearly all test participants answering correctly. The test also proved that the navigation and design of the screens were sufficiently intuitive.

Positive testing responses included :

“I walk on the beach all the time and would definitely use an app like this to send in photos and when I see nests to help out.”

— Eric Y., Melbourne Beach resident

“This app would be a great way to get more people involved in marine conservation. I hope it gets built!”

— Emily L., marine biology student

Interest from a conservation organization

When I shared the final prototype with research assistants volunteering at the Sea Turtle Conservancy, who have their own turtle-tracking apps. They expressed interest in developing a version of Nesti that could collect data and drive engagement over environmental issues.

One environmental science student intern said :

“[It] would be great to create more awareness.”

Key Takeaways

Involve key stakeholders early on

If I had involved sea turtle researchers earlier in the process, I might have avoided (or found better solutions to) the legal issues of nest-disturbing that put the entire project at risk.

User research worth the effort

However, the good news is that I did involve them at some point, learned important lessons, and modified the design to be successful. User research takes a lot of time and energy, but it’s worth it.

Conducting user testing needs practice

I would’ve recorded users talking through their thoughts out loud as they were browsing the prototype and current site version. Next time I’ll plan differently.

Toolstack

• Figma — design

• FigJam — whiteboarding

• Pen and Paper — to draft first sketches

• Maze — user-testing

• Zoom — interviewing, presentations with marine researchers

• Google Suite (Forms, Sheets, Slides) — surveys, presentations, analysis
  

^ Back to top

> More projects