Evolving Web has partnered with renowned Montreal-based nonprofit, Million Peacemakers, to design their youth volunteer website.
This project is design-focused, giving both organizations the freedom and flexibility to move quickly and push the limits of web design within the constraints of the WIX platform. The shared goals promoted their organization through a MP Youth subsite without relying on developers to make it happen.
Services: Web Design, Brand Development
About the Client
Million Peacemakers (MP) is a nonprofit organization with a mission to empower youth, families, and businesses worldwide to co-create a culture of peace using Nonflict.
The Nonflict method is a simple and effective 3-step method that provides a structured approach to conflict resolution. Since launching just 5 years ago, MP has trained over 225,000 people across 23 countries, appearing at universities and business schools worldwide.
The scope of this project was to create an impactful website, generating more exposure and momentum for Million Peacemakers. But where to begin?
The MP Youth volunteer training program is a sought-after offering for MP and deserving of its own prominent space on the main website. After conducting discovery with stakeholders, Evolving Web's UX and design team members worked closely with MP to identify content and design objectives for the new MP Youth subsite.
An 8-week timeline.
With only a few short weeks to build a subsite from scratch, the teams worked fast, pitching ideas quickly with minimal rounds of feedback.
More than a redesign.
Once the relationship was established, it became clear that the existing brand style was in need of an update. And some existing content needed to be restructured and rewritten.
This project was led and innovated by UX/UI Designers. While it was difficult to have a Developer-free zone for a site-build, it was an opportunity to unlock the potential of design.
Site builder limited.
Based on its usability, WIX was the platform of choice for Evolving Web’s team. But since WIX isn’t as powerful or flexible as Drupal, it had its limits: a simple block-by-block build with no customizing or dynamic layouts.
Since MP’s main website, caters to so many audiences, Evolving Web decided to hone in on one audience segment and design a site for their sub-organization, MP Youth.
Evolving Web’s team of designers went to work with a clear focus on the youth audience. This made the project more feasible, efficient and impactful.
After the initial discovery phase, a creative concept emerged:
“Because youth volunteers are like heroes, let’s structure this website like a hero's journey.”
This youth-as-heroes concept unlocked potential for more story, more images and more approachable calls-to-action.
Authentic Brand Story
A style-scape was created to establish the visuals for the mock-up. This includes a sort of collaged mood board which illustrates a holistic vision about how a brand manifests itself, using shapes, compositions, photography, icons, etc. For MP, this looked like simplified blues, using yellow and white to emphasize the most important calls-to-action. The contrasting colours capture a spirit of motion, growth, vitality, community and connection.
The designers worked with MP’s established brand font for continuity. The graphics and icons were open, inviting and approachable - the lines between them were round, soft and friendly.
To humanize the website even further, designers leveraged stories and testimonials and included them front-and-center in the design. Contour drawings were used to animate MP’s youthful energy, along with the messiness and beauty of conflict resolution.
One of MP’s biggest missions is to acquire volunteers. Since this is an ambitious ask for some, Evolving Web’s team brought smaller requests to the forefront, like “join a workshop” and “begin with Nonflict”. This helped capture interest more efficiently so that the organization can spend time building long-term, trusting relationships.
With MP’s rapid growth and global reach, the design team assessed that the existing images of volunteers dressed in blue wouldn’t always be sustainable for the visual identity.
To make the photography visuals more evergreen, the design team used images of people in street clothes to capture the effortless “everyday hero” vibe that MP hoped for. As a welcomed bonus, almost any photo taken by a volunteer could jive with the new brand visuals.
MP came ready to flex their easy-to-incorporate brand guidelines and visual design, so it was easy for the Evolving Web’s designers to pitch new and exciting ideas that required little to no technical maintenance.
While it was a challenge to work without developers, the benefit of this sub-site is that all components are user-friendly and accessible, so the client can continue building independently.
Our designers are experts in working with the limitations of a template. With MP, they turned the challenge of a “no developer zone” into a creative advantage. By understanding how the template and components work, they were able to adapt the design to integrate seamlessly with the preexisting template.
The result is a digital experience where design and messaging of Nonflict align in harmony. It makes use of the advantages of well-designed components such as news, an event calendar and social media integrations.
The MP Youth style guide and visual identity that Evolving Web created was so compelling and easy to use that Million Peacemakers adopted the same treatment to their main website.
A Beautiful Partnership
Given our passion for a peaceful future, this project felt close to home for us at Evolving Web.
This fast-paced project came together in an efficient, dynamic way. We credit Million Peacemakers collaborative drive, teamwork and trust that allowed their vision to come to fruition.
We’re pleased with not only the quality that you’ve done, but how you delivered it. You under-promised and over-delivered, and you did it with kindness and heart. Thank you on behalf of our team.