Atomic design system for International Rescue Committee

My role: UX design, prototyping, component-building(HTML/CSS BEM, SASS)

As part of the rescue.org digital team, I served as a designer for a design systems project that brought in Atomic Design innovator Brad Frost as an contractor/advisor.

The challenge we faced was maintaining consistency across multiple websites in different languages maintained by different teams during a digital expansion. The challenges posed by designing for different languages were a major driver of this initiative. Over 4 months, our team built a complete pattern library of the organizations website components and built the foundations of a solid international-ready design system.

Among the tricky problems we faced in turning patterns into fully reusable components, we had to redesign website elements to support language-specific affordances such as the surprising length of German words and the right-to-left text direction of Arabic. Copying and contributing working code was not an option as we set out to test and update every element of our websites to work as well as possible for anyone anywhere, in any language.

Outcome & Takeaways

This system has been a complete solution for multiple sites, allowing the organization to replicate the aesthetic and quality of the global website for regional use-cases.

This was also an incredible learning experience, a chance to learn from the best. It also proved to me the value of continuing to write code as a designer, especially in the context of design systems as we were able to operate with very little gap or delay between designers and developers.