Project Overview
Green Collab is a local community based social enterprise focused on improving the environment in local communities. The app will help local people become aware of environmental problems that are having an impact on their community. Local people can create, support, donate, and collaborate on environmental projects. This will give communities the power to build and invest in a sustainable future.
The Problem
A lack of awareness of environmental issues in local communities and a limited understanding of the impact on continued environmental problems which is preventing future sustainability.
The Goal
Design an app to help local communities build awareness, support environmental projects and invest in a sustainable future.
My Role
Avis Williams – Sole UX/UI Designer
Duration
May 2022 – Ongoing
Tools
Figma, Affinity Designer, Paper & pencil, Google Forms
Design Process
These are the steps used before working on the application or website. The design process helps to turn problems into solutions users would love. It also helps to keep me focused on designing user-centric products and, trying to achieve the goal.
Understanding The User – User Research
I conducted a research survey based in the UK. The majority of the participants were female and the age range was between 18-64. The majority of participants have environmental problems in their area and are not aware of the environmental projects in their area.
This user research survey confirmed that they wanted a platform that can help build awareness and be able to work together to solve environmental problems in local areas.
Survey Insights
User Pain Points
01.
Execution
People don’t know how to improve the environment in the community.
02.
Lack of Education
People do not have enough information on how to improve the environment in their area.
03.
Lack of awareness
People are not aware of environmental projects in their area.
04.
Accessibility
People do not know where to find people to collaborate with.
User Personas
Persona 1: Ava Williams
Persona 2: Mark Atkins
User Journey Map
A visual representation of the journey a user takes when interacting with the website or mobile app. The user journey goal is to determine how well the users navigate through the application and identify any new pain points.
Goal: Users can browse, select projects and make a donation.
Site Map
I created a sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Green Collab app. These designs focused on location-based search features to help users find and select projects in their local area.
Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow was to browse, select and make a donation for a project, so the prototype could be used in a usability study.
Usability Study
I conducted an unmoderated usability study using Maze – a remote testing platform. I analyse the user’s feedback as they completed the main prompts in the prototype to browse, select a project and make a donation.
These were the main findings uncovered by the usability study:
Anonymous
Users wanted an option to give an anonymous donation
Save & Share
PU wanted an option to save and share projects
Button
Users wanted to change the colour of the see all button.
Refining The Design
Based on the insights from the usability studies, users wanted to save and share projects. I added the save and share buttons on the project page screen.
The usability study also revealed that some users wanted to donate anonymously. I added a toggle button so that users can select to donate anonymously if wanted.
Mockups
Users can browse, view and select environmental projects. Users can also use the location-based search features to find and select projects in their local area.
Users can also make a donation to a project in their local area
High-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow was to browse, select and make a donation for a project, so the prototype could be used in a usability study.
Accessibility Considerations
Use landmarks to help
users navigate the site,
including users who rely on
assistive technologies
The app can have an option for multiple languages, making it accessible to non-English speaking users. Change the language of the app in profile settings.
Options to turn on or off text-to-speech voice narration (great for the blind or those with sight limitations).
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit the specific user needs of each device and screen size.
Mobile
Tablet
Desktop
Takeaways
Impact
Users shared that the app is a good idea and seems like something that could actually help solve environmental problems in local communities. One quote from peer feedback was that “the Green Collab app helps bring awareness about the environment and bring people together.”
What I Learn
I learned that my initial ideas for the app were just the beginning. The feedback from the research survey and the high fidelity prototype helped me to design an app based on the user’s needs.
Next Steps
Identify any additional
areas of need and ideate
on new features
Update the current version of the high–fidelity prototype
Run another usability study, to see if the
implemented changes in
the design address the
users’ needs