Inspiring Mutual Aid
As a web designer I led the creation of a brand that exuded humanity, experimenting with original illustrations and dynamic visual elements with CSS. As the project evolved, I also designed a template system and web editor, offering clients customizable landing pages to receive donations.
Defining the why
In the realm of donations, we sought to explore a niche that transcended the limits of existing platforms based on campaigns with an expiration date. From our previous experience on a platform of this type, we identified that there were associations with another type of need: integrating a payment platform for spontaneous contributions. As a team we were motivated not by monetary benefit; but to facilitate doing good and maintaining meaningful connections with those who shared our passion for making a difference. We knew that people involved in causes and associations wouldn't necessarily handle new technologies with ease, so it was important to offer them an accessible option to manage their donations.
Analysis of possible flows from different users
At the time we started this project we had extensive experience with payment systems, web design and a network of altruistic people we knew. Thanks to this, we embarked on a journey to create a platform that not only processed donations but resonated with the human essence of giving. Our priority was clear: contribute positively to causes, foster relationships with like-minded people, and sustain the project through passive income.
Visualizing where we want to go
In our brand strategy we focused on simplicity with a touch of joy. We wanted to exude a human touch that I sought to demonstrate with the design of the graphics, the website interface and, in general, how much fun I allowed myself to have with this brand.
logo_dark
logo_light
Full color logo and white logo for dark background
Website Mockup
Original illustrations became the cornerstone of our communication, fostering a sense of trust and empathy. With the style I sought to use simple shapes that we could reuse in various illustrations, in addition to reinforcing the color scheme that we had chosen for our identity.
Examples of illustrations used on the website
For the website design I chose to keep the text very clean and give prominence to the images. I also got involved in frontend development with Lumen, where I allowed myself to experiment with animations, transitions and parallax with SASS/CSS to bring the site to life.
Test to animate the SVG logo with CSS animation
Handing over control to our clients
Halfway through the project, an idea arose that prompted us to go in a new direction: we could offer customization of a landing page through a template system and a simple web editor. This would allow us to offer customers payment pages that are perfectly integrated into their brand identity. Our goal was to inspire confidence, whether our clients had a strong online presence or were taking their first steps into the digital realm; In addition to giving greater control to the administrators of the cases and minimizing the need for us to intervene in the creation of each site.
Proposal for the template editor
Mockup for custom site for a cause
Lessons and Growth
This effort served as a valuable lesson in refining our development practices and aligning personal and professional goals. The project underlined our strength in synergy with clients, prompting us to further strengthen this aspect in our business projects. Beyond the unrealized launch, it was a testament to our technical prowess, showcasing the creative and technical heights we were able to achieve.
In the ebb and flow of project priorities, ideas emerged that transcended the team's boundaries. Understanding where our strengths truly lie (within the collaborative synergy with our clients) became a guiding principle. These insights became catalysts, driving our evolution as professionals and amplifying the impact of our subsequent efforts.
