Save The Frogs

To redesign a non-profit website, Save The frogs was chosen due to it’s outdated/problematic design based on the usability testing results. The website design,look, and feel could be improved to bring in more awareness, volunteer interest, and donations for the betterment of amphibian conservation efforts. Based on the usability testing results, it became clear that to improve the UX key flows and refreshing the look, Save The Frogs needs redesigning.

My Role: UX Researcher/UI Designer

Platforms: Web & Mobile

Timeline: Three weeks


Based on the results of the survey, 'Web Design' was the highest rated category (77.8%) for needing improvement. Affinitizing the users' feedback, allowed to focus on the areas that spoke to users and the areas that could use improvement. Here are some of the painpoints of the users: too much information in all pages, inconsistency in cards, buttons, and spacing, irrelevant information in contact page, the background color design is distractive, redundant information everywhere, and irrelevant picture with the content, and more.

User Interface Design

Three pages were redesigned: Homepage, contact page, and a combination of donate and support pages. Designs were too similar to the original theme with gradients, inconsistent design and colors. User testing feedback - felt it was too focused on distracting colors and not on frogs. Iteration Improvements: Navigation bar, Hero image, White spaces, Cards Styles, Footer, Button colors, Font color, and Interactive Frog page components.

Considering the pain points of the users, the number of pages were reduced, content was consolidated to prevent redundancy, the hero image was decluttered so that users could focus on sections at a time, and the navigation bar was simplified(more inline with industry standard/user expectations).



Web and Mobile Prototype

Save The Frogs

Key Learning

Feedback, feedback, feedback - when staring at the work too long it’s hard to see where improvements need to be made, fresh eyes help! Simplification and targeted heuristics can make a big impact on the look and feel of a website, plus this can be low-cost option for nonprofits that are constrained by budgets. Nonprofits have to rely on the donations and volunteer efforts, most users were deterred right off the bat due to clunky navigation and color scheme, which ultimately hurts the nonprofit efforts.