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 child’s wellfare. Digify, 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, 150+ Touchpoints with 5 themes
WHEN: March 2016 – today (8 years old)
WHO: A global team of 450 fundraisers + design practitioners
WHAT: SaaS Product Design, Front-end Development, UX/UI, Digital Fundraising
always in firefighting 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, that included:
Part 1: The Kickoff
- Fundraising CMS Platform
- Landingpage Generator
- Blog/News
- Careers
- Online Shop
- Global Map API
- Payment forms
- CRM, Marketing Automation, Mail Delivery
Part 2: Distribution
- Crowdfunding Platform
- Sponsorship App (PWA)
- Gift card Generator
- International DAM System
- GDPR & CCPA Compliance
- WGAC 2.1 Compliance
- PageSpeed InsightsÂ
- Migrations & Non-functional updates
- E-learning App (external)
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.
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
FĂĽge hier deinen Tooltip-Text hinzu
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. My immediate tasks were clear:
- Brand alignment
- 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
⚠️ Unlike most CMS systems – Kentico comes completely RAW – which means that we had to develop something like Elementor or Webflow from scratch.
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 80’s 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 CMS After
⚠️ Unlike most CMS systems – Kentico comes completely RAW – which means that we had to develop something like Elementor or Webflow from scratch.
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.
- One System to Rule them All
- New layout controls - Bootstrap -> CSS Grid + Flexbox
- 60+ new widgets
- 40+ compositions
- 50 templates
- 5 Themes
End-to-end Research, design & development
The ultimate email template used in Emarsys, Salesforce & Microsoft Dynamics
The process of developing the email template that impacts 20 million users with 500 million emails delivered annualy
- 70 SOS Children's Villages Associations
- CRM Email Template & Automation
- 11/2018 - 06/2019
Summary
Build and distribute a new Template for all CRM systems
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, Salesforce, MS Dynamics. A piece of cake, you’d say.
01
02
Problem Statement
Cross-Platform Support
The tricky part was that this template had to be fully implemented into the Emarsys, Salesforce or Microsoft Dynamics 365 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 common native email builders. 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
Focus Points
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 third-party-tools
I had to use the Emarsys, Kentico, MS Dynamics and Salesforce syntax to implement our template and make it modular and editable for the interactive web builders.
03
04
tested over time
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
my work in numbers
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 moreso when it comes to payment and process forms
Running in circles: 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 Forms 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.
