Save the Water™
Save the Water™
Save the Water™
Water Facts Page
Water Facts Page
Background
Background
Background
Save the Water™ is on a mission to make water safer for everyone. Their research and education efforts stretch beyond North America, offering global insights.
By raising public awareness, they hope to inspire change in how people think about water safety.
Save the Water™ is on a mission to make water safer for everyone. Their research and education efforts stretch beyond North America, offering global insights.
By raising public awareness, they hope to inspire change in how people think about water safety.
Team
Team
Team
Director, Project Leader, Developers, Marketing Specialists, UI/UX Designers
Director, Project Leader, Developers, Marketing Specialists, UI/UX Designers
Director, Project Leader, Developers, Marketing Specialists, UI/UX Designers
My Role
My Role
My Role
UI/UX Designer
UI/UX Designer
UI/UX Designer
Scroll Reduced by
Scroll Reduced by
Scroll Reduced by
75%
75%
75%
Duration
Duration
Duration
6 weeks
6 weeks
6 weeks
Problem
Problem
Problem
The Education Department had big plans to engage users with important water facts. But when version one and two launched, users had to click endlessly, and the design felt stuck in the past.
This outdated experience made it hard to capture the attention of a modern audience.
The Education Department had big plans to engage users with important water facts. But when version one and two launched, users had to click endlessly, and the design felt stuck in the past.
This outdated experience made it hard to capture the attention of a modern audience.
The Education Department had big plans to engage users with important water facts. But when version one and two launched, users had to click endlessly, and the design felt stuck in the past.
This outdated experience made it hard to capture the attention of a modern audience.
The Old Experience
The Old Experience
The Old Experience
Users find endless clicking tedious.
Users find endless clicking tedious.
Users find endless clicking tedious.
The Solution & Impact
The Solution & Impact
The Solution & Impact
From complexity to simplicity.
From complexity to simplicity.
From complexity to simplicity.
📈
+85%
+85%
Team Satisfaction Increased
Team Satisfaction Increased
📃
75%
75%
Scroll Reduced by
Scroll Reduced by
👆
100%
100%
Click Reduced by
Click Reduced by
📈
+85%
Team Satisfaction Increased
📃
75%
Scroll Reduced by
👆
100%
Click Reduced by
Design Process
Design Process
Design Process
I collaborated closely with stakeholders and users at each stage to refine the concepts, ensuring the final solution was both effective and user-centric.
I collaborated closely with stakeholders and users at each stage to refine the concepts, ensuring the final solution was both effective and user-centric.
I collaborated closely with stakeholders and users at each stage to refine the concepts, ensuring the final solution was both effective and user-centric.
Design Decisions
Design Decisions
Design Decisions
To make the right design choices, I first listened to users, uncovering their pain points and frustrations.
Then, I aligned these insights with the goals of the marketing and education departments, bringing the team together to discuss and finalize decisions that balanced user needs with organizational priorities.
To make the right design choices, I first listened to users, uncovering their pain points and frustrations.
Then, I aligned these insights with the goals of the marketing and education departments, bringing the team together to discuss and finalize decisions that balanced user needs with organizational priorities.
To make the right design choices, I first listened to users, uncovering their pain points and frustrations.
Then, I aligned these insights with the goals of the marketing and education departments, bringing the team together to discuss and finalize decisions that balanced user needs with organizational priorities.
Constrains & Trade-offs
Constrains & Trade-offs
Constrains & Trade-offs
Given Quibit’s early stage and limited budget:
Given Quibit’s early stage and limited budget:
Given Quibit’s early stage and limited budget:
Initial proposed design not feasible without adequate water data.
Initial proposed design not feasible without adequate water data.
Initial proposed design not feasible without adequate water data.
User testing impractical due to time and budget limitations.
User testing impractical due to time and budget limitations.
User testing impractical due to time and budget limitations.
Therefore, I embraced the opportunity to innovate and developed a new plan, as detailed in the design iterations below.
Therefore, I embraced the opportunity to innovate and developed a new plan, as detailed in the design iterations below.
Therefore, I embraced the opportunity to innovate and developed a new plan, as detailed in the design iterations below.
Constrain Handling 01: Design Evolution
Constrain Handling 01: Design Evolution
Constrain Handling 01: Design Evolution
Since the Education Department initially planned to present only 8 water facts, the proposed design has been deferred to the next update, which will include over 100 categorized water facts.
Therefore, I came up with a new design that not only focuses on reducing the click and scroll rate but also aligns with the company’s goals.
Since the Education Department initially planned to present only 8 water facts, the proposed design has been deferred to the next update, which will include over 100 categorized water facts.
Therefore, I came up with a new design that not only focuses on reducing the click and scroll rate but also aligns with the company’s goals.
Since the Education Department initially planned to present only 8 water facts, the proposed design has been deferred to the next update, which will include over 100 categorized water facts.
Therefore, I came up with a new design that not only focuses on reducing the click and scroll rate but also aligns with the company’s goals.
Old Design
1 click & 4 scrolls
Based on 8 facts
Proposed Design
0 clicks & 2 scroll
Based on 8 facts
Best with categorized facts
Approved Design
0 clicks & 1 scroll
Based on 8 facts
Old Design
1 click & 4 scrolls
Based on 8 facts
Proposed Design
0 clicks & 2 scroll
Based on 8 facts
Best with categorized facts
Approved Design
0 clicks & 1 scroll
Based on 8 facts
Constrain Handling 02: User Testing
Constrain Handling 02: User Testing
Constrain Handling 02: User Testing
Despite constraints on user testing, I successfully collaborated with colleagues from the Tech, Education, and Marketing teams to test and refine the design.
Despite constraints on user testing, I successfully collaborated with colleagues from the Tech, Education, and Marketing teams to test and refine the design.
Despite constraints on user testing, I successfully collaborated with colleagues from the Tech, Education, and Marketing teams to test and refine the design.
Old Design
Iteration 1
Iteration 2
Iteration 3
Iteration 4
Iteration 5 (Approved)
Old Design
Iteration 1
Iteration 2
Iteration 3
Iteration 4
Iteration 5 (Approved)
Why Iteration 5?
Why Iteration 5?
Why Iteration 5?
Among various iterations, iteration 5 achieves the lowest interaction rate, requiring only one scroll and zero clicks to access all 8 water facts.
Among various iterations, iteration 5 achieves the lowest interaction rate, requiring only one scroll and zero clicks to access all 8 water facts.
Among various iterations, iteration 5 achieves the lowest interaction rate, requiring only one scroll and zero clicks to access all 8 water facts.
Final Design
Final Design
Final Design
The old process took 1 click and 4 scrolls; now, it only takes 1 scroll. This solution not only cuts down on steps but also appeals to users with the updated interface.
The old process took 1 click and 4 scrolls; now, it only takes 1 scroll. This solution not only cuts down on steps but also appeals to users with the updated interface.
The old process took 1 click and 4 scrolls; now, it only takes 1 scroll. This solution not only cuts down on steps but also appeals to users with the updated interface.
Before
Before
Before
2 facts in a page
2 facts in a page
2 facts in a page
1 click & 4 scrolls
1 click & 4 scrolls
1 click & 4 scrolls
Outdated user interface
Outdated user interface
Outdated user interface
After
After
After
8 facts in a page
8 facts in a page
8 facts in a page
0 clicks & 1 scroll
0 clicks & 1 scroll
0 clicks & 1 scroll
Modern user interface
Modern user interface
Modern user interface
What the Leader Says
What the Leader Says
What the Leader Says
You have a unique ability to translate ideas into beautiful, user-centered designs.
You have a unique ability to translate ideas into beautiful, user-centered designs.
You have a unique ability to translate ideas into beautiful, user-centered designs.
Linjun - Project Lead at STW
Linjun - Project Lead at STW
Linjun - Project Lead at STW
Attribution
Attribution
Attribution
Special thanks to our Director, Project Leader, Developers, Marketing Specialists, and UI/UX Designers for their invaluable contributions to this project.
Special thanks to our Director, Project Leader, Developers, Marketing Specialists, and UI/UX Designers for their invaluable contributions to this project.
Special thanks to our Director, Project Leader, Developers, Marketing Specialists, and UI/UX Designers for their invaluable contributions to this project.
View Live Page
View Live Page
View Live Page
