bringing a brand back together
The Design System that unified SOS Children's Villages
With a presence in over 130 countries SOS Children’s Villages is a renowned international non-profit for children in need. Didify, established internally in 2002, focuses on developing innovative fundraising products to support the organization’s mission of building families for children in need.
HOW MANY: 40+ countries
WHEN: March 2016 – today (8 years old)
WHO: A global team of 150 fundraisers + design practitioners
WHAT: 150+ Touchpoints with 5 themes
always in fire fighting mode
The Before
Upon joining the organization, we faced a fragmented landscape with over 40+ and 150 instances utilizing custom products. The proliferation of custom solutions led to a high volume of change requests and inconsistencies across platforms.
- Fundraising CMS Platform
- Online Shop
- Blog
- Global Map API
- Crowdfunding Platform
- Sponsorship App (PWA)
- Email CMS
the token-based design system
The Only Way Forward
To address the challenges posed by fragmentation and to bolster operational efficiency, we made a strategic decision to unify the organization’s digital presence. This involved consolidating disparate platforms and custom solutions into a cohesive ecosystem through the implementation of a comprehensive design system and theming strategy.
By adopting this approach, we aimed to streamline processes, improve consistency across platforms, and facilitate more efficient management of digital assets and resources. This concerted effort was crucial in aligning the organization’s digital identity and reinforcing its commitment.
Poor design decisions are expensive
Why they chose me?
Having previously worked as a freelancer within SOS Children’s Villages and being a vocal advocate for design systems, my deep understanding of the organization’s needs and commitment to cohesive design principles made me the ideal candidate for the project.
- Pitchdeck preparation
- Developer Buy-in
- Stakeholder Buy-in
- End-to-End Project Management
July 1, 2016 – march 31, 2017
The Transformation
Over a period of approximately 8 months, I collaborated closely with SOS Kinderdorf Österreich, the brand owner – to implement the redesign initiative. Despite managing stakeholder requests from 4 continents, we remained focused on the goal of unifying the brand’s digital identity.
In order to enforce the adoption of the new brand identity we incorporated an isolated model of development where the driving force was the brand owner, which is not ideal, but in this particular case was the only reasonable way to move forward.
Challenges
1. Stakeholder management
This challenge stemmed from the need for extensive discussions and negotiations to align diverse stakeholder perspectives on design decisions. With stakeholders spread across 40 countries, coordinating feedback and reaching consensus on design elements proved to be a time-consuming process.
2. Lack of Brand Assets
The absence of updated brand assets since the 80s posed a significant challenge. This meant that we had to develop a cohesive design system from scratch, lacking modern brand guidelines or visual references, which required substantial research and creative interpretation.
3. Migrating legacy content
Migrating legacy content presented its own set of challenges, particularly ensuring that thousands of pages were migrated correctly while maintaining consistency with the new design system. This necessitated the development of legacy templates to accommodate existing content structures and formats, ensuring a seamless transition to the redesigned platform.
a brand that’s truly aligned
The After
Through strategic decision-making and collaborative efforts, we successfully unified SOS Children’s Villages International’s digital presence, enabling the organization to operate more efficiently and cohesively across borders. The impact of the redesign extended beyond marketing metrics, fostering greater satisfaction among editors and improving processes for faster delivery.
- Fundraising CMS Platform
- Online Shop
- Blog
- Interactive Map
- Donation Forms
End-to-end Research, design & development
The ultimate email template feat. Emarsys
The process of developing the email template that impacts 20 million users with 500 million emails delivered annualy
WHO: 70 SOS Children’s Villages Associations
WHAT: Email marketing platform
WHEN: 11/208 – 06/2019
Summary
Develop a pixel-perfect email template design with various sections and colors that needed to be transformed into a responsive email template and integrated into Emarsys. A piece of cake, you’d say.
01
02
Problem Statement
The tricky part was that this template had to be fully implemented into the Emarsys marketing CRM across the whole SOS Children’s Villages Federation (70 countries, 250 teams). And to make the challenge even greater, the email template also had to be templated and fully editable in the Emarsys native email builder. So, ended up with every heading, paragraph, button, color, picture, and link in this template being editable, plus having the ability to add/remove different sections within the prebuilt templates for:
- Fundraising & Marketing
- Marketing Automation flows
- External Communication Teams
- Intranet Communication
- Thank you, confirmation & error emails for payment and non-payment forms
- HR Responding Emails
Challenges
A. Cross Mail Clients Support
We all know that email templates are challenging to work with because of the code structure they use. In addition, every mail client (Microsoft Outlook, Apple Mail, Gmail) renders the code differently via its own style rules. Therefore, the code has to support all specific requirements to look identical on all mail clients.
B. Responsive design
Responsiveness is almost impossible due to the cross-mail client support and the limited CSS rules.
C. Implementing in Emarsys
I had to use the Emarsys syntax to implement our template and make it modular and editable for the interactive web builder.
03
MJML Base
The template was developed with MJML as a component-based design system.
- 7 x Headers
- 5x Footers
- 40 x components
- 15 x templates
Alongside the template, I started facilitating workshops and developing an internal e-learning platform to build knowledge capacities within the teams of email editors for template localization.
- Editing existing templates
- Building new templates from existing campaigns
- Creating custom Emarsys controls with own syntax
- Tracking & marketing automation
The Real Impact
With this project, I provided the digital marketers in the organization with more flexibility, eliminating their need to work with designers and developers to create an email template for their email marketing campaigns. Thus, they can reach more people more quickly and easily. Plus, it saves a lot of resources by freeing up more of the designers’ and developers’ time across the organization.
Knowing that this template will influence more than 100 million people makes me proud of being involved in the project and for earning our client’s trust.
one design system to rule them all
A Design System for all forms
We needed a design system to organize and provide detailed specifications to the developers‘ team to organize their donation journey in 40 countries and across 70 touchpoints – Web, App, PWA.
a decision postponed for many years
The Before
Fragmented Development: Without a unified Design System, development across 40 countries became fragmented and ad-hoc.
Increased Backlog: Lack of standardization led to reinventing forms, causing a larger development backlog.
Limited Knowledge Transfer: Absence of a centralized system hindered technology sharing between teams, resulting in inefficiencies.
Poor UX: Inconsistent designs and functionalities led to a subpar user experience, potentially deterring donors.
Reduced Conversion: These issues culminated in decreased conversion rates on donation forms, impacting fundraising efforts.
The After
The results of the transformation were profound. SOS Kinderdörfer Weltweit’s digital platform emerged with a cohesive, modern design that resonated with users and effectively communicated the organization’s mission. Content management became more intuitive, empowering staff to deliver timely, impactful messages to their global audience.
- Donation Forms
- Mini Popup Forms
- Sponsorship Forms
- Shop Checkout
- Lottery
- Petition
- Annual Tax deduction Forms
- Job Portal Forms
Let’s create something great together.
