Project Menu
Water Fact Cards: From Launch to Expansion
Collaborated across teams to support a new educational initiative, focusing on designing interactive and engaging content. Led the design efforts for the Water Fact card page, ensuring accessibility and clarity. Conducted user research to inform design decisions and completed the full process from initial concept to developer handoff.
Collaborated across teams to support a new educational initiative, focusing on designing interactive and engaging content. Led the design efforts for the Water Fact card page, ensuring accessibility and clarity. Conducted user research to inform design decisions and completed the full process from initial concept to developer handoff.
Collaborated across teams to support a new educational initiative, focusing on designing interactive and engaging content. Led the design efforts for the Water Fact card page, ensuring accessibility and clarity. Conducted user research to inform design decisions and completed the full process from initial concept to developer handoff.
Collaborated across teams to support a new educational initiative, focusing on designing interactive and engaging content. Led the design efforts for the Water Fact card page, ensuring accessibility and clarity. Conducted user research to inform design decisions and completed the full process from initial concept to developer handoff.
Responsibilities
- Coordinated cross-functional collaboration - Defined strategic design approach & user flow - Led UX & UI Design for the Water Fact Cards experience
Team
- Partnered with the Technology and Education groups to align design, development, and content strategy - Acted as key liaison to ensure smooth communication and execution
- Partnered with the Technology and Education groups to align design, development, and content strategy - Acted as key liaison to ensure smooth communication and execution
Project Details
- Duration: April 2024 – June 2024 (3 months) - Sector: Education, Nonprofit Organization
Problem Statement
Problem Statement
Problem Statement
The education team had an initial set of water facts and images but needed a collaborative approach with the technology team to design an engaging way to present 100 water facts on the website. The goal was to make these educational resources accessible to the public, ensuring a structured, interactive, and user-friendly learning experience for those seeking knowledge about water conservation and science.
The education team had an initial set of water facts and images but needed a collaborative approach with the technology team to design an engaging way to present 100 water facts on the website. The goal was to make these educational resources accessible to the public, ensuring a structured, interactive, and user-friendly learning experience for those seeking knowledge about water conservation and science.
The education team had an initial set of water facts and images but needed a collaborative approach with the technology team to design an engaging way to present 100 water facts on the website. The goal was to make these educational resources accessible to the public, ensuring a structured, interactive, and user-friendly learning experience for those seeking knowledge about water conservation and science.
Education Team Handoff
Original Water Facts Content
The education team had text-based water facts with no structured format.
Project Goal
Collaboration & Planning Discussions
Design an interactive platform that makes water facts more engaging, structured, and accessible.
Education Team Handoff
Original Water Facts Content
The education team had text-based water facts with no structured format.
Project Goal
Collaboration & Planning Discussions
Design an interactive platform that makes water facts more engaging, structured, and accessible.
Education Team Handoff
Original Water Facts Content
The education team had text-based water facts with no structured format.
Project Goal
Collaboration & Planning Discussions
Design an interactive platform that makes water facts more engaging, structured, and accessible.
Education Team Handoff
Original Water Facts Content
The education team had text-based water facts with no structured format.
Project Goal
Collaboration & Planning Discussions
Design an interactive platform that makes water facts more engaging, structured, and accessible.
Water Fact Early-Stage Pain Point Map
Design Constrains
Design Constrains
Design Constrains
About Project Constraints
Sticky all the constraints that we need consider before designing.
Sticky all the constraints that we need consider before designing.
User Research
User Research
User Research
User Behavior Analysis
We examined how users interact with educational content, focusing on readability and navigation patterns.
We examined how users interact with educational content, focusing on readability and navigation patterns.
See Full Data Visualization
Design Decisions
Design Decisions
Design Decisions
Water Fact Landing Page & Future Sidebar System
Why We Chose This Approach: Based on user research and design constraints, we needed an effective way to present Water Facts that scales as more facts become available. Our two-phase approach ensures a structured rollout:
Why We Chose This Approach: Based on user research and design constraints, we needed an effective way to present Water Facts that scales as more facts become available. Our two-phase approach ensures a structured rollout:
UX Process
UX Process
UX Process
User Flow Breakdown
What we include for Water Fact section on the homepage as an additional entry point to the Water Fact system. This ensures users can access the landing page either via the navigation bar or directly from the homepage feature section.
What we include for Water Fact section on the homepage as an additional entry point to the Water Fact system. This ensures users can access the landing page either via the navigation bar or directly from the homepage feature section.
Responsive Wireframes & Layout Adaptations
To ensure an optimal user experience, the Water Fact Landing Page and Cards need to be accessible and visually effective across different screen sizes. A responsive design approach allows users to engage with content seamlessly, whether they are using mobile, tablet, or desktop devices.
To ensure an optimal user experience, the Water Fact Landing Page and Cards need to be accessible and visually effective across different screen sizes. A responsive design approach allows users to engage with content seamlessly, whether they are using mobile, tablet, or desktop devices.
UI Design
UI Design
UI Design
Bridge from UX to UI
With the research, wireframes, and user flow finalized, we moved into UI design to bring the Water Fact Cards to life.
With the research, wireframes, and user flow finalized, we moved into UI design to bring the Water Fact Cards to life.
Phase 1 focuses on delivering a clean and interactive UI for the Water Fact Cards, ensuring accessibility and user engagement.
Phase 1 focuses on delivering a clean and interactive UI for the Water Fact Cards, ensuring accessibility and user engagement.
Design System Essentials
Include Typography, Color, Grid, Spacing, and Card Components & UI Elements
Include Typography, Color, Grid, Spacing, and Card Components & UI Elements
Responsive Design with Accessibility in Mind
Responsive Design with Accessibility in Mind
Large Screen to Medium Screen.
Adapting layouts for every device while ensuring an inclusive, accessible experience for all end users and devices.
Large Screen to Medium Screen.
Adapting layouts for every device while ensuring an inclusive, accessible experience for all users.
Large Screen to Medium Screen.
Adapting layouts for every device while ensuring an inclusive, accessible experience for all end users and devices.
From Homepage to Water Facts
From Homepage to Water Facts
A simple navigation flow that shows how students, teachers, and curious minds can find and access the Water Fact learning content.
A simple navigation flow that shows how students, teachers, and curious minds can find and access the Water Fact learning content.
A simple navigation flow that shows how students, teachers, and curious minds can find and access the Water Fact learning content.
Design Notes
Design Notes
Design Notes
Design Annotation
This page provides detailed design annotations for the Water Fact Landing Page (Web view), including specifications for layout, typography, colors, component dimensions, and interaction states.
Key elements like the hero section, content grid, callout box, and card hover states are clearly labeled to support accurate developer implementation. The annotation ensures that spacing, alignment, and visual hierarchy are maintained across breakpoints, and interaction feedback (like hover behavior) is fully documented.
This page provides detailed design annotations for the Water Fact Landing Page (Web view), including specifications for layout, typography, colors, component dimensions, and interaction states.
Key elements like the hero section, content grid, callout box, and card hover states are clearly labeled to support accurate developer implementation. The annotation ensures that spacing, alignment, and visual hierarchy are maintained across breakpoints, and interaction feedback (like hover behavior) is fully documented.
Viewport Size >1200px
Viewport Size 678px -1199px
Viewport Size < 678px
Handover Documents
Handover Documents
Handover Documents
Design Handoff
This section provides all necessary assets and design documentation for implementation. Developers can refer to the GitHub Repo for downloadable files, and use the visual spec to match layout, spacing, and interaction styles. Hover states and card behaviors are also annotated for consistency.
This section provides all necessary assets and design documentation for implementation. Developers can refer to the GitHub Repo for downloadable files, and use the visual spec to match layout, spacing, and interaction styles. Hover states and card behaviors are also annotated for consistency.
Final Outcome
Final Outcome
Final Outcome
Phase 1 Launch
After release, the Water Facts landing page achieved a strong engagement rate of 79.35%, with 134 views and 73 engaged sessions across 9 countries.
Top traffic sources included Direct and Organic Search, showing early discovery traction.
After release, the Water Facts landing page achieved a strong engagement rate of 79.35%, with 134 views and 73 engaged sessions across 9 countries.
Top traffic sources included Direct and Organic Search, showing early discovery traction.
