Cleair
A cross platform community to fight against air pollution.
UX designer and researcher leading the design and research of the dedicated mobile app and responsive website from conception to delivery.
My Role
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Responsibilities
Adults and young adults between the ages of 16-55 who are interested in getting involved in the fight against air pollution.
Target Audience
Background
Cleair is a global organization focused on rebuilding communities affected by air pollution. With the help of social media, more individuals are getting involved in the cause and Cleair needs a platform that allows visitors to donate or volunteer online through the various options the organization offers.
Air pollution affects over 90% of the world’s population. Cleair wants to help rebuild communities most affected. Their data suggests that a high number of individuals are willing to help the cause however, there are no platforms readily available to allow users to donate to a specific branch or region or choose how to help a community. Cleair also determined that younger generations want to be able to access more information about the problem and solutions and see their impact.
Problem
User Research
I used Cleair’s data from previous surveys and interviews to determine common actions taken by their donors. Using this data, I prepared interview questions for user interviews to determine users’ desired functionalities. Participants who had no previous relationship with Cleair but expressed an interest in helping communities affected by air pollution also participated in these interviews. Most users stated that they wanted to be actively helping communities in need but expressed concerns such as cost and time commitments as well as lack of easy and reliable access to facts and data.
This feedback made it clear that donors would be more active in helping communities in need if they had a tool that made it fast, easy and reliable to do so.
User Pain Points
1
It’s hard to find trustworthy sites that fully explain the situations around the world in a way that’s easy to understand and take action.
What’s going on?
2
“I don’t know what I should be doing to address different issues, I know I need to cut down on emissions and recycle, but is that enough? Is there more I could do? How do I become involved and more active?”
Users have the motivation but lack clear guidance on actions that can be taken to join the campaign against air pollution.
What can I do?
3
Users want to know how they will be helping by performing any of the recommended actions. What will be their impact on the world?
How will I help?
Personas
Lia is an astronomy student who frequently raises awareness for air pollution. She needs a reliable, fast and easy way to donate to affected communities so she can keep up with her schoolwork and still be involved with the cause.
Karl is a museum curator who regularly hosts galas and donates to charities to fight air pollution. He needs an easy way to learn more about how different regions are impacted, because he wants to help communities around the world.
Competitive Audit
After compiling a group of personas, I performed a competitive audit with two direct and one indirect competitor to show gaps and opportunities for the Cleair app. View the report by clicking here or on the image.
Key Challenges
Designing an interface that effectively educates users without feeling cluttered and bulky.
Building a social aspect that tracks user contributions and allows them to see how their actions are helping the cause.
Connecting users with regions of their choice.
Goal
Design an app and responsive website that will allow users to easily donate online in order to rebuild communities affected by air pollution.
Ideation
Before beginning the wireframing process, I completed an ideation exercise using the crazy eights method to come up with designs addressing user needs identified in interviews and personas and gaps from the competitive audit. My focus was on easy to digest forms of relaying information and quick donation methods.
Digital Wireframes
After ideating using the crazy eights method and drafting paper wireframes, I prepared the digital wireframes for Cleair. The designs focused on the process of planting a tree for a community in need.
In order to prepare for usability testing, I put together a low-fidelity prototype of the user flow.
User Testing
Study Type
Unmoderated usability study
Location
Global, remote
Participants
5
Length
30 - 60 minutes
Findings
Personal Impact
Users wanted to see how their donations are making an impact.
Information
Users preferred knowing about how a specific action would help the environment while they were scrolling through options.
Local Data
Users expressed interest in learning about the air quality around them.
Interpreting the Data
To effectively analyze and address user responses from the usability study, I made an affinity chart by organizing responses into themes then grouped similar responses under a common theme.
I used the affinity chart to extract critical insights to guide my designs.
Insights
Theme: Users want to see a story behind each donation method and understand their impact.
Insight: Donation pages should tell a story through videos and images followed by a confirmation page that shows how a donation helps the cause.
Theme: Users want a secure way to pay with multiple payment options.
Insight: Credit cards, third party payment methods and physical donation should be made available with an option to remain anonymous.
Theme: Users want to keep track of their donations.
Insight: An account feature should be made for returning users to be able to sign in.
Theme: Users want to invite others to donate with them.
Insight: Users should be able to share to contacts and/or social media from the donation pages.
High Fidelity Designs
Based on the insights from the usability studies, I applied design changes like a label displaying the air quality index of the user’s location as well as an interactive button that displays the user’s impact and leads to the “My Impact” page.
Additional design changes included adding descriptions to the available donation methods in order to allow users to better understand the impact of each action at a quick glance.
Sitemap
After completing the app designs, I began working on designing the responsive website. I used the Cleair sitemap in order to generate cohesive and consistent designs across devices.
Responsive Designs
Various designs were made for mobile, tablet, and desktop versions of the site. I optimized the designs to fit the user needs of each device and screen size while accounting for accessibility.
Branding
Accessibility Considerations
All colors follow WCAG standards.
The platform is available in multiple languages.
Clear labels and navigation for screen readers.
Next Steps
Conduct research to determine the success of the app in increasing aid to global communities.
Add more and unique educational resources to make the app an easy to understand standalone resource for knowledge needed about air pollution and how to fight it.
Build partnerships across the world to bring organizations together to fight air pollution.
Impact
Users excitedly expressed that they have been able to make more donations and the number of first time donors has more than doubled.
What I Learned
The fight against air pollution being a major battle that requires action from everyone on the planet, making the stakes of this project quite high. I was able to come up with a feasible and impactful design by working through the steps of the design process and checking in with real users along the way. When tackling large and important tasks like the Cleair app, it’s important to follow a set procedure but always adapt the design and process around the users.
Tools used: Adobe XD
Thank You
Thank you for your interest in my work on the Cleair platform. For more details or questions on the project or to get in touch regarding your own project, please feel free to contact me using the link below.