water saving app
Design for social good aims into solving global ethical and environmental matters. This project mission is focus on saving water.
Its goal is to help raise awareness and provide tool for everyone to track and limit daily water consumption, and in consequence minimize the water scarcity problem on the globe.
The project consists of two segments: mobile app that is a personalized and practical tool for a user to monitor his individual water consumption; and responsive website that would give an overall view on the water scarcity problem in the world, and also information and tips how to change daily habits. Mobile application must be simple and motivating users to check their daily progress.
(see: dropchop website in separate case study)
my responsibilities:
The project twas a part of Google's UX Designer certification program. Therefore throughout the process I have conducted all stages and functions of ux project, from ux research to final design.
Tools: Figma, Figma Mirror app
Our dropchop app will let conscious users adjust their daily habits and track their water usage
in order to reduce the consumption; and will also influence careless consumers by giving them information and ways to understand the difference they could make for the natural environment.
We will measure effectiveness by motivation to use the app on daily basis, and liters of water saved while using the application.
In foundational research, my goal was to find out users’ preferences regarding a tracking app, and how to design main features of the product so users are eager to use it on daily basis. User research data in the foundational research phase was collected through semi-structured interviews. The goal of these interviews was to find as much as possible about users’ experience regarding setting personal goals and methods used, which allow reaching these goals. I also referred myself to apps accessible online, and read users’ reviews that
referred to them. The data gained in this process helped, through empathizing with users, to define main issues for the functionality of the water saving app.
Next I had created journey maps to identify feelings and thoughts user might experience while trackig his own water cosumption on the daily basis performing typical household tasks.
I have compared features of three competitors (two direct and one indirect) that had launched an app similar to my project.
I have focused on functionality, features, tracking experience and reviewed visual aspects, complexity of apps and their navigation.
dropchop wants to develop a product that will encourage users to see their role in affecting positively natural environment;
and contribute to higher awareness thus more sustainable daily choices.
The app would allows users to quickly custom their goals for water consumption reduction, and see the actual progress.
I prepared the basic user flow diagram and then started with paper version of wireframes. Afterwards I transformed them into digital ones using Figma. I layouted my designs for iPhone 12, as I could test it afterwards accordingly on my device using Figma Mirror.
These basic wireframes were connected into simple prototype to estimate if the journey is easy to navigate, and main tasks easy to complete. After testing wireframes with a couple of users I came to some findings that I would apply in the next phase: high-fidelity mock-ups.
All elements and groups of elements were designed with the use of components, variants and auto layout to achieve desired responsiveness and seamless design process.
Affordances have got contrast applied to meet the AA standards of WCAG (World Wide Web Consortium).
This norm requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.
The UI of my app went through a few iteration rounds. First wireframes were too overloaded with icons, and it was difficult to apply proper hierarchy, even with usage of various colors.
Also there were too much written content as primarily tips and facts were supposed to be in the app, but after considerations they got moved to the landing page content.
After reducing the palette, increasing contrast by choosing black-white solution, mock-ups gained more modern and impactful design. This at the same time increased the accessibility.
After completing designing high-fidelity mock-ups I connected them into clickable prototype and chose animations that would enhance the performed action between screens. The ready prototype could be then verified by a group of potential users.
After creating the prototype I tested it on five users. The tasks and questions were so prepared to verify if app navigation is clearly understandable, all the sections are easy to access and intuitive in usage. It was unmoderated study where users had to perform tasks
of setting goals for water usage for household mediums and estimating time and liters of water used for the chosen one (shower or washing the dishes). The time of completion the task and conversion rate was measured. The methodology was based on KPIs: time
on task and success rate, and on System Usability Scale questions.
After the study I organized data and came out with some conclusions based on which I made the last small iterations on my design.
The first flow allows to define limit of water usage for each medium in the household by setting define goals for liters used.
Allows to check their virtual water footprint and adding them afterwards to personal products list.
If the product does not exist in a database, user has got an option to upload a comprehensive verified info about the product to app's database.
Exist in daily, weekly, monthly and quarterly format, and can be downloaded or shared.
The project was quite demanding, not only due to all roles I had to take over, but mostly because of attempt to find the most simple and efficient way to link mobile app and landing page with use of UX 4Cs: consistency, context, continuity and complementary aspect.
The app had to be interesting enough to encourage users to reach out for it on daily basis. It was also a challenging task to create personas and build context for application with educational character.
Regarding UI after many iterations the conclusion was: the least design possible is the best design.
HTML Website Creator