Designing an Educational App for Coral Reef Awareness & Action: UX/UI Case Study
Coral is a mobile app designed to help people understand coral reefs and take tangible actions to protect them. The project focuses on transforming environmental awareness into meaningful, accessible actions through an intuitive and engaging digital experience.
Programs used: Figma, Adobe Illustrator, Adobe Photoshop, Adobe Lightroom
The Goal
Educate users about coral reefs in an engaging and accessible way
Encourage small, actionable behaviors that contribute to reef protection
Build emotional connection and awareness through thoughtful UX/UI design
Create a simple and motivating user experience
My Role
UX Research
User Flow & Information Architecture
UI Design
Prototyping
The Problem
While many people care about ocean conservation, they often lack clear, practical guidance on how to help. Existing resources are either too technical, overwhelming, or disconnected from everyday actions, making it difficult for users to stay engaged or feel that their efforts matter.
Want to help but don’t know where to start
Prefer short, visual, and easy-to-understand content
Feel more motivated when actions feel achievable and impactful
Research & Insights
Use storytelling and visuals to build emotional engagement
Break down complex environmental topics into digestible content
Highlight actionable steps users can take in their daily lives
Design a calm, ocean-inspired interface to reinforce the theme & Insights
Design Strategy
The persona
Karen represents environmentally conscious users who care deeply about ocean conservation but feel overwhelmed by information and unsure how to take meaningful action. She is motivated to help protect coral reefs but needs clear guidance, education, and practical steps that fit into her daily life.
Frustrations
Coral reefs are dying, and she doesn’t know how to stop coral bleaching
Uncertainty about which daily actions truly have an impact
Name: Ana Martínez
Age: 28–40
Occupation: Professional / Entrepreneur
Location: Urban area
Devices: Mobile-first, occasional desktop use
Goals
Understand what is happening to coral reefs
Learn clear and actionable ways she can help protect them
Wireframes
Wireframes were created to define user flows, content hierarchy, and core interactions. Interactive prototypes were then used to validate usability and ensure that learning and action felt natural and intuitive.
Digital Wireframes
With the hand sketched done I was able to move to the first wireframes in Figma
The Product
UI & Visual Design
Soft, ocean-inspired color palette
Clean, minimal interface to avoid cognitive overload
Visual cues and images to support learning
Friendly typography for accessibility and readability
Outcome
The final design delivers an engaging and educational experience that empowers users to learn about coral reefs while encouraging real-world actions. Coral bridges the gap between awareness and impact by making environmental responsibility feel approachable and achievable.