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.

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 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.

Our Story

The header carousel on the dashboard was removed to only focus on 20 Liters’ story. As well as a “donate” button for those that want to support the cause.

Statistics

The statistics were kept squared with the individual stats being in a dark grey and the “Total Impact” in the bright yellow to draw in the viewer’s eye to that final number.

Future Plans

Within the timeline, a “Future Plans” page was added so you may keep up to date for what is stored next.

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?