Date: 13 November 2019
Type: UX/UI, Brand Identity
Cleanitap is an app that keeps track of polluted areas in cities, parks and beaches. People who care about our planet and are committed to the cause may use the features included to discover and clean up the areas in a tap.
Read on for further details and insights.
As a true Earth lover, I have always respected its nature. I have always been concerned with reducing waste and not polluting, along with convincing others to do the same. The idea of designing an app to help reduce the quantity of waste in public areas came to me last year as I was considering the potential of mankind. Thousands of people have been motivated to take action and embrace the Planet’s cause just by listening to other people on tv shows or social networks. The app was meant to be the tool through which people met up and worked together to clean up filthy spots.
This project is mainly focused on UI, although I had to deal with some UX as regards the design of the app itself. I also took my time to craft the style guides in detail including the app’s name and logo. In this case study, I am going to briefly illustrate each of the following steps:
I started by defining the app’s purpose in 6 simple questions:
This app aims to bring people physically together to increase awareness related to pollution. It includes 3 main sections: explore, report, and map. The explore area allows users to access sites' information and access various features to clean up the sites. The report area takes advantage of the device's camera to capture and report filthy sites. The map section displays filthy spots nearby reported by users. No registration is required, but encouraged for maximum transparency. Users can access their profile area to keep track of their clean up history.
In order to design meaningful screens, I put down the process a user had to go through in order to achieve a task. In this phase I realized some of the processes I imagined ended up nowhere, so I sometimes I had to think them over. Putting down user flows was useful to help me plan in detail the components on every screen.
Once the general idea and the user flows were well defined, I started putting down a few initial sketches.
Initial ideas included features like a carousel displaying filthy spots nearby users, a detailed map, a way to add cleaners, a checklist to help users keep track of the tools needed for cleaning.
Wireframes were developed from sketches to bring rough drafts to the next level of detail. This included defining alignment, white space, proportion and content for each screen. Size and spacing standards were also established, such as keeping buttons between 44 and 48 px and spacing in proportion with other components. This helps define the rest of the UI.
The app’s name Cleanitap comes from the blending of the words cleaning and tapping. The first word defines the purpose of the project, the second refers to the means of achieving it. A third element targets the user itself by telling him/her to clean up a specific area: clean it up!. Clean-it-up became Clean-it-tap and finally, simplifying, Cleanitap.
My research focused on three key concepts: nature, energy, and health. I created a mood board to capture the desired energy and look of the project. My chosen colors reflected these themes: green for nature, orange/red for energy, and blue for the sky and oceans. The tone of voice had to be energetic and the visuals should be friendly and inviting.
I defined a palette of 3 colors: primary green, secondary orange, tertiary blue based on my research. I adjusted the values of the colors to achieve the right balance and contrast. I added success and error colors along with a greyscale for copy, backgrounds and dividers.
I chose Poppins for its rounded letters and clarity, with Open Sans as a good accompaniment for the body copy. A type scale was created specifically for the UI. I also made line icons to be used in dropdown menus and the profile page. Buttons and other UI parts were given rounded edges to give a more approachable feel.
Animation has always been the part I enjoyed the most when designing an interface. I love bringing my mockups to life and seeing those components interact with each other. Below are some examples of micro-interactions happening between Bruce's phone and his friends' devices.
