Home
Product Overview
About the Product
FrogLogger is a mobile app for iOS with a responsive companion website that connects frog enthusiasts to researchers at the University of Florida. By facilitating the collection of crowdsourced data on frog populations and allowing researchers easy access, its aim is to help save Florida's endangered frogs. We set out to create an experience that works seamlessly across mobile devices out in the field and desktop computers in research labs.
My Role
Lead UX designer on the FroggLogger app team and responsive website team, responsible for user research, ideation, wireframing, prototyping, and leading visual design.
The Problem
Researchers at the University of Florida and frog enthusiasts needed a native app and responsive website to provide crowdsourced research data on endangered frog populations in Florida.
The Goal
Design an experience that makes as much sense and works just as well out on a trail on your phone as it does on a desktop computer in a lab.
Understanding the User
Antonia Green
The Researcher
Age
25
Education
Master's Degree
Hometown
Deerfield, FL
Family
Pet Turtle
Occupation
Graduate Student, Biology
"There are a lot of native frog species in Florida, and the more people to help catalog them, the better!"
Goals
- Gather and interpret data on frog populations
- Communicate with volunteers who spot frogs outside the lab
Frustrations
- Difficulty recruiting volunteers
- No way to standardize frog reports
- Quality of data from volunteers can be poor
Bio
Antonia is a grad student who is writing her thesis on frog conservation in Florida. She relies on crowdsourced data to inform her research and strategize initiatives for frog conservation. She primarily conducts her work and studies on her laptop and on computers at the university.
Tessa Rockport
The Gardener
Age
31
Education
Bachelor’s Degree
Hometown
Pensacola, FL
Family
Husband, Pet Cat
Occupation
Personal Accountant
“These adorable creatures make me happy, so I want to help them in any way I can!”
Goals
- Learn more about frogs
- Assist with conservation efforts and research
Frustrations
- Can’t always look up a frog because outside and hands are full
- No easy way to collaborate with conservationists
Bio
Tessa is an avid gardener who spends a lot of time outdoors around her Florida home. She also enjoys being out in nature, walking trails and visiting parks and botanical gardens. Tessa is interested in reptiles and amphibians for the impact they have on the environment and wants to help out with research.
Starting the Design
My design process starts with creating paper wireframes. I find this is a great way to come up with as many ideas as possible in a low-commitment format. For FrogLogger, I first focused on empathizing with my user persona Tessa, who uses a mobile device. I wanted to come up with ideas that would make it as easy as possible to get out your phone and start identifying a frog right away.
I chose the ideas I thought best suited users' needs from the paper wireframes and used them to create digital wireframes in Adobe XD. When you sign in to the app, the visual search feature is highlighted on the home page with a camera preview and a large call to action to initiate the camera. This makes it easy for users to quickly shoot an image of a frog to identify. Because this is the main user flow of the app, I wanted it to be front-and center. The other search methods are available right under the visual search as large calls to action with corresponding icons.
I connected the digital wireframes in Adobe XD to create a user flow in a low-fidelity prototype to use for user testing. User feedback from the initial testing was used in later iterations of the design.
I iterated on the low-fidelity prototypes from user feedback. For example, it became clear that users needed a way to try the app without logging in. After creating the final round of low-fidelity designs, I started a new file to create high-fidelity app screen mockups. These incorporate the FrogLogger brand colors, fonts, and imagery as well as animations and realistic copy text.
Finalizing the Design
I connected the high-fidelity mockup screens in Adobe XD according to the user flow for FrogLogger. Now, I have a high-fidelity prototype to test with users. After the final rounds of testing and design iterations, I will annotate the high-fidelity prototype to hand off to the development team. I wait until the prototype very closely represents the intended, final design for the product before handing it off, and I'm sure to document and annotate meticulously so that the features and look of the app are implemented correctly.
Key Takeaways
Since launching the new app and website, the University of Florida has gathered more than 100,000 reports on frog species in Florida.
While designing FrogLogger, I researched accessibility best practices for experiences that are primarily visual. I found that it was important to provide audio descriptions for the camera, and add alt text to images, so that people with vision impairments can get the full experience of these amazing frogs. Along the way, I also picked up some great Adobe XD knowledge. I'm loving using auto-layout now for things like buttons, instead of having to manually resize things for different screens.
For FrogLogger's future, I recommend:
- Conducting at least one accessibility centered usability study that includes people with vision impairments of different levels. This is important to gain insights about how easy or difficult it is for these individuals to submit frog reports.
- Conducting user research to see if the scope of the application could be expanded to include other types of animals or even plants. Collecting conservation data is important to researchers, so this could be a great help to them in the future.
- Conducting user research to see if FrogLogger can be expanded to other locations in the United States besides Florida, or worldwide.
Back to Top