Each month, 20 Liters builds rainwater harvesting systems, a community system, and close to 200 household filters. They also train all recipients on basic health and hygiene before receiving the filters and proceed with follow-ups for 6 months after they receive their filters.
20 Liters
Case Study
20 Liters is a Non-Profit organization with a mission of making dirty water clean to the most vulnerable through long-lasting and innovative solutions.
20 Liters wanted to tell that story in real-time. They wanted to show where the distributions are happening, where they’re building the systems, and every month they get a village-by-village breakdown of their progress.
20 Liters wanted a tool that not only helps their Rwanda staff plan and execute their work, but to share this exciting data with the world.
The Dashboard
The original wireframes that 20 Liters provided for the dashboard had all the components that they were looking for: a timeline, infinity scroll of images that link out to articles, and statistics of the overall impact that they have had on the Rwanda Community.
With the support of a team-lead and three developers, I was tasked with designing the UI for this new dashboard showcasing 20 Liter’s mission, statistics, and a timeline news feed.
Planning Stage
The wireframe I began designing was similar in design to what 20 Liters provide with some subtle changes.
Carousel Header
To highlight key stories.
Mosaic Feed
This was to compel the user to scroll through the articles, creating an infinite scroll effect under the restrictions of a maximum 31 articles a month.
Timeline
Allows the user to select the year and month in a fixed timeline instead of scrolling indefinitely.
Colors & Material
Grey
#4A4A4A
Yellow
#FCE000
Light Blue
#9BB4C8
Typography
DINPro Regular
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Above image are previous iterations of the new dashboard and articles.
Final Design
As the dashboard UI continued to be developed, it began to have a sleeker and cleaner design. There were a few key features that stand out in the new design.
Dashboard
Article Page
Read an in-depth story about the 20 Liters’ happenings within the Rwanda community.
“Related stories” were included at the end of the page to keep the user engaged and on the website. Any stories that stood out to the user can be easily shared through the social icons.
Future Plans
Stay within the know of what is coming up next at 20 Liters through the “Future Plans” page. The content is broken up in two categories: Facilities and Village. This lets the user see what is in-stored for the US location along with Rwanda.
Conclusion
Over the course of the project, this dashboard was developed into a live page that 20 Liters keeps updated to this day. While the final product is not 100% to the wires I created, you can see where the wires influenced the design and functionality in ensuring that 20 Liters can tell the story that they want to tell to visitors.
What are you waiting for?