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 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 a tool that not only helps their Rwanda staff plan and execute their work, but to share this exciting data with the world.
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.
The wireframe I began designing was similar in design to what 20 Liters provide with some subtle changes.
To highlight key stories.
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.
Allows the user to select the year and month in a fixed timeline instead of scrolling indefinitely.
Colors & Material
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.
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.
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.
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.
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?