Save the Whale-shark:
a UX/UI Design case study
Design a cross-platform tool that educates users about the endangered Whale-shark, facilitates contributions, and tracks the progress of conservation actions.
Role: Lead UX Designer, responsible for the design of the mobile app and responsive website
Platforms: Mobile app (iOS and Android), web desktop, tablet, and mobile
Project Duration: June 2023 to july 2023
Tools Used: Figma and Adobe XD
This project was created as part of a UX Design professional certificate, with the goal of using design for social good.
As an ocean lover, I was drawn to this cause, which motivated me to develop a solution that could make a tangible difference.
Problem
Statement
Problem: The Whale-shark, along with many other shark species, is endangered due to overfishing, habitat destruction, and climate change. There’s a significant gap in public knowledge and awareness of how to help these species.
Goal: Develop an intuitive app and responsive website that not only educates users about Whale-sharks but also provides clear pathways for involvement through donations, volunteering, and tracking the status of their contributions.
UX Process
Learn more about each stage of the design thinking.
User
Research
Methodology: Conducted user interviews and created empathy maps to understand the needs of users interested in wildlife conservation.
Key insights:
Lack of information: Users expressed a desire for more comprehensive information about Whale-sharks and conservation efforts.
Desire for involvement: Many users wanted to contribute but were unsure how to do so effectively.
Need for tracking: Users who were already contributing wanted a clear, transparent way to track the impact of their actions.
Design
Goals
Educational: Provide easily accessible and engaging information about Whale-sharks.
Engagement: Facilitate user involvement through donations, volunteering, and real-time updates on conservation efforts.
Transparency: Ensure users can track their contributions and see the impact of their actions.
Consistency: Create a consistent and cohesive user experience across all devices (mobile, tablet, desktop).
Responsive
Design
Design approach: Each screen size (mobile, tablet, desktop) was designed with specific user needs in mind, ensuring that the experience was seamless across all devices.
Implementation: Used a consistent design system, including color schemes, typography, and UI elements, to maintain a cohesive experience.
Design
Systems
Consistent UI elements for a good user experience.
Color palette chosen considering the colors of the ocean and the Whale-shark itself. Use of accessible web color combinations and contrast.
Buttons have their specific color to highlight a call to action.
Colors, Icons &
Typography
Logo:
Final
Outcomes
Impact: Users reported that the app and website made them feel empowered to contribute to the conservation of Whale-sharks. The intuitive design and easy navigation were highlighted as key factors in their positive experience.
Peer feedback: "The UX is fantastic! I can go back and forth, confirm, and go home with ease. Great job!"
Metrics: While exact metrics weren’t tracked during this educational project, peer feedback and usability testing confirmed that the design met its goals of education, engagement, and contribution tracking.
Lessons
Learned
Iterative design: Small design changes, like language options and consistent button styles, can have a significant impact on user experience.
User-centered approach: Regular usability testing and user feedback are crucial for identifying and mitigating potential issues, ensuring the final product is both functional and user-friendly.
Responsive design: Adapting designs for different devices requires careful consideration of how users interact with each platform, highlighting the importance of a flexible yet consistent design system.
Next Steps
Post-launch Research:
Conduct research to measure the effectiveness of the app and website in achieving conservation goals.
1
Enhanced educational resources:
Add more content about Whale-sharks and other endangered species to further engage users.
2
Feature expansion:
Identify additional user needs and develop new features, such as a community forum or live streaming of conservation efforts.
3
