Duration: September 2022 to October 2022
Role: UX&UI design
Frog Heroes
Figma
Adobe set
01 Project overview
The product
Frog Heroes website and app are based on the crisis of extinction of rare frog species. Both app and website are made to make people aware of the frog endangered situation. Since learning about frogs could be plain with the books for both adults and children the app is focused on interactive learning with AR activities. Website is focused on downloading app and getting new volunteers.
The problem
Frog populations have been declining worldwide at unprecedented rates, and nearly one-third of the world’s amphibian species are threatened with extinction. Up to 200 species have completely disappeared since 1980.
The goal
Design an app that will improve education on frogs with enjoyable and interactive learning and will make people aware of frog crisis about rapid frog species extinction .
02 Understanding the user
User research
I used research informations on frog extinction to develop interview questions, which were then used to conduct user interviews. Most interview participants reported that they didn’t know about frog extinction and wildlife habitat crisis. The feedback received through research made it very clear that users would be open and willing to work towards learning about frogs and its problem if there would exist an easy-to-use tool to help guide them.
Persona 1: Will
Problem statement: Will is 10-years-old curios student who wants to learn about amphibians in enjoyable way because he finds learning in school about amphibians boring.
Persona 2: Nicole
Nicole is 36-years-old art direction who want to preserve the natural habitat and wildlife because she wants nature & wildlife to survive for future generations.
Competitive audits
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Frog Heroes app.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on the type of the learning about frog to be enjoyable and fun.
03 Starting design
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Food Saver app. These designs focused on delivering interactive learning for users to learn about frog with fun experience.
Lo-FI prototype 1
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of learning about frogs in three different ways.
Usability study: parameters
Usability study: Findings
LO-FI prototype 2
According to the insights of usability
study I changed LO-FI prototype with use
flow that show how user would use AR frog
and interactive map.
🖙
LO-FI prototype
04 Refining the design
Mockups
Based on the insights from the usability studies, I applied huge design changes that app would mainly consist of interactive map with filter to enable frog species comparison and augmented reality button to learn about frogs
Based on the insights from the usability studies, I applied huge design changes that app would mainly consist of interactive map with filter to enable frog species comparison and augmented reality button to learn about frogs.
Visual styles
05 Website
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Frog heroes sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive designs
06 Going Forward
Impact
Users shared that the app Frog heroes seem
like would actually help the to learn more about
frogs and its crisis. One quote from peer feedback
was that “the Frog heroes app helps learn about frogs
in AR to a personal level in a way that’s easy and engaging.”
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.