Hallmark Design System
I joined Hallmark in February 2021 to support the launch of their design system. At launch, the design system only supported the Modern Greetings Experience (MGE) which was a small react application on hallmark.com for greeting cards, so my primary focus was to support the content team using the design system. I spearheaded the Digital Design Team (DDT). The DDT’s objective was to maintain and grow the design system across content and development. Hallmark.com’s architecture was extremely outdated and the level of effort to retrofit the site to use the design system was too great. So while DDT was trying to enable the content authors on MGE, we spent a lot of time trying to create cohesion between MGE and the rest of Hallmark.com through editorial and content standards within the design system.
A few months after the launch, I began leading roadshows throughout Hallmark to educate and evangelize what a design system could do for different teams throughout the company. By 2022, I had gained enough buy-in from marketing to scale the design system to support the Hallmark marketing and transactional emails. Atomic design and design systems were totally foreign methodologies to the email team. Before we could get into things, I led foundational sessions to make sure they understood where we were going and why. Then I led a series of workshops with the team to help guide the transition to a design system. Since the email team and web content team are in the same creative organization, we saw a lot of value in using the similar component component patterns across web and email so they could create more cohesive digital experiences.
Audit
We audited dozens of emails. We discussed what we liked, what we didn’t like, and then started to identify patterns
2. Ideate
We took the patterns from the 1st workshop and I led a Crazy 8’s activity so we could quickly explore components at a very low fidelity level.
3. Test
We pressure tested components in two ways: “Can we recreate past emails with these components?” and “Are we cohesive with the website?”
Towards the end of 2022, we had new leadership which resulted in DDT disbanding and the design system was told to keep the lights on, but hallmark.com’s platform would be shifting to a new tech stack that was not design system friendly. At this same time, we were also building an iOS app. However, most design teams were already on board with the design system in their day to day work so we made sure that a single design system hosted in Figma could support each product, despite the fact that the tech stacks are totally siloed.
At the start of 2023, I was asked how we could think about customization globally. Hallmark US, UK, and Netherlands all had customization experiences and leadership wanted to reuse technologies so we could all grow and iterate faster. Similar to the process I used when providing system coverage to email, we started with an audit of what each country had. During the audit, we discussed when each country should be different because of their local competitors, consumers, etc. Then we iterated on components and patterns. We tested our systems by literally applying it to the tech. Now as we build a solution, we can build it agnostic of a country or a shared solution and the components will flex to meet each country’s UI.
