0.1
BRIEF
Our client Arturo Vittori wanted us to redesign Warka Water’s website to improve communication. Give a better user experience for users who wanted to know more about this award-winning project. The client asked for a minimal and well organized website similar to google’s product style.
0.2
UNIQUE SOLUTION
Improve the site’s user experience through a storytelling of the Warka Water’s project using illustrations.
We wanted to help anyone who entered the site to understand the purpose of this innovative structure in a simple and pleasant way. We also improved the interaction that pushes users to donate by leading them to the “Donate” Call To Action and reformulating the “donate form”.
0.3
CHALLENGES
We analyzed the website’s problems and found errors and non secure links in several pages. The team immediately started working on the IA (Information Architecture) and reorganized the existing textual and visual elements of the old website. We created unique wireframes to study the user flow, the architecture map, project scope and interaction guidelines. Micro interactions with code files attached and ready to use for developers.
0.4
SERVICES
IA
Wireframing
UX design
UI design
Prototype
0.5
YEAR
October 2019 – January 2020
0.6
TEAM
Irene Lai
Lorenzo Solina
THE TOWER OF LIFE
Warka Water project
Warka Water is a nonprofit organization focused on innovative and sustainable solutions to some of humanity’s most enduring problems: drinkable water. The Warka Tower is a structure designed to harvest water from the atmosphere (rain, fog, dew) to provide an alternative water source for rural populations that face challenges to find drinkable water.
IT CAN HARVEST
100 litres
PER DAY
THE EQUIVALENT OF
100 BOTTLES
Houston we have a problem
After analysing the current site’s workflow, we realized there were problems on many pages that led to a high bounce rate, by doing so losing users after visiting the first page.
Wireframes
I created 32 pages with no design style to test and assess the organization and the hierarchy of the contents with the client
HELP EFFICIENCY WITH
Design System
Complete design system ready for developers.
0.1
COLOR PALETTE
0.2
TYPOGRPAPHY
0.3
CHARACTER STYLE
0.3
BUTTONS
0.5
FORMS
0.6
TOOLTIPS & STEPPERS
Splash Screen
Animation combined with unique illustrations
Homepage
A great story told through facts