Project:
Community's Responsive Website
Role:
Concept, Research, Visuals
Duration:
November 2022
The problem
Few consciousness about community’s projects in need of help;
NGOs lacking resources.
The goal
Increase awareness of local projects in the user's communities;
Boost human resources of NGO;
Support companies on achieving Corporate Social Responsibility Goals.
Kick-off
For initiating the project, I have started with an UX Research to validate the Project's goals and discover other pains and needs users might have to enrich the product. I conducted interviews and collected qualitative and quantitative data.
After the research, personas were drawn. To start the ideation process, I runned a competitive analysis with direct and indirect competitors.
Meet the users
Information Architecture
Paper Wireframes
Before going to Adobe XD and initiate the project digitally, it is a best-practice to brainstorm in papersheets what you will be taking forward.
This allows easier and faster iterations in your projects and also promotes cooperation in between teams.
Wireflow
Adobe XD is a powerful tool for prototyping. I created animations in between screens, buttons and other components to enhance the users's interactions with it. Iterations were made after the second usability study to improve the designs on the High-Fidelity prototypes.
You can check both prototypes through the following links:
🖥️ Check the High-Fidelity Prototype for Desktop.
📱 Check the High-Fidelity Prototype for Mobile.
The amount of connections and animations created for the prototype are showed on the image below.
CHALLENGE 1
Accessible for all
It doesn't matter whether you are accessing it from your mobile, tablet or desktop: our website adapts to you offering an easy experience for you to support your community's available projects.
CHALLENGE 2
"Is volunteering a thing for me?"
On Community you will find different projects contributing to different societal problems. From animal care to gender equality and fighting hunger. All projects also support the Sustainable Development Goals for 2030, you are impacting your community while contributing for global goals.
CHALLENGE 3
What about money?
The platform is designed to support NGOs, some of which have few resources to invest in getting more people. Community aims to raising money in conjuction with Corporate Social Responsibility Partners.
Governments offer taxes cuts for companies investing in their communities. Also, a company's brand is better perceived by the population when they are making a powerful impact in society.
CHALLENGE 4
Creating a reliable platform
To increase reliability from both B2C and B2B customers, we have added a Sponsor's highlight on selected pages. Also, we have created the community blog for volunteers to showcase their experience.
Style Guide
Colors
Typography
Buttons
Takeaways
Mobile phone usage has increased in the past decade. More people nowadays find it easier to navigate through their cell phones. Digital product designers have to adapt themselves to it. Responsiveness is not a bonus anymore, it is a must.
I created an Atomic Design System to make it easier to manage responsiveness. Focusing on componentization made it easier to think about how the same component would behave in different screen sizes. When handing off the work to the engineering team, componentization and their reutilization will also fasten their work.
Designing a website that feels the same either in a desktop and in a mobile is a challenge, although a fruitful one: user experience will always be the center of all we do.
Thank you for reading until here!
interested in working together? i'd love to hear from you.
