The project is a second part of water saving application - design for social good project. This part presents a landing page that is connected to the mobile app.
Goal: Designing a responsive website to help users easily understand a problem of water scarcity on the globe. The website aims into raising awareness and providing basic information that could serve as encouragement to start using the water saving app and limit daily water consumption.
Project duration: Mobile app design and landing page: December 2022 - January 2023
Tools: Figma
My role: UX researcher, UI/UX designer
The project twas a part of Google's UX Designer certification program. Therefore throughout the process I have completed all stages and of ux project, from research to final user interface design. To refer to all the content of each stage please see dropchop app case study.
The first step in the process of mapping out a design was to prepare a structured sitemap with all the subpages.
That was the necessary stage before preparing low fidelity wireframes of desktop and mobile version of the website.
I have used four colors previously defined for the project, and palette of tones based on the primary branding violet.
I have chosen a set of icons for the website sections to illustrate certain categories connected to water scarcity issue.
Hi Fidelity Prototype | Animations
I based my design on numerous animations to give a modern feel to a website, connect it with the app design and its dynamic character. Each sub-page opened with menu and elements sliding animation. For that effect Ihave used multiple component variants and delay smart animate function. The website itself would self-scroll to designated sub-page after pressing one of the menu sections.
Once the low fidelity prototype was ready and all sub-pages linked into clickable prototype, I asked a couple of users to give me a feedback on the website functionality and intuitiveness. It was important to verify if the landing page shows clearly the mission of the dropchop project and can connect and inspire a potential user to download the app.
No Code Website Builder