RING CENTRAL

Ring Central was in desperate need of updating their email communications. Actual design work had often been relegated to Producers, who would interpret such important facets of UI design as layout, button placement, etc on their own. The sizing of page elements -- headlines, footers, logos, buttons -- was all over the place. Consistency of their brand was slipping.

A design system was in order. I was invited to collaborate with their teams as a Senior Designer and, with my Figma knowledge, help bring about that order.

Conferring with a senior team member to understand their legacy design elements, it was decided that we would pull many assets from their web design system that had been previously created in Figma, although many new elements would have to be designed and added to this new email design system. Special attention had to be paid to sizing — every element had to be divisible by four pixels in order to meet template needs — as well as possible usage scenarios. Would there be need for a future newsletter-style layout, or different layouts for retention versus acquisition, etc? All of these questions had to be considered.

I decided that the best course of action was to create a design system that would be flexible enough to create nearly any email dreamed up by the Ecomm team, both now and in the future. My process involves future-proofing my design work whenever possible, especially if the work involves templates and libraries of assets. That's the attention to detail I bring to every job, every assignment. Wireframes were built in Figma, discussed and approved (SEE BELOW).

New elements were then built in Figma (SEE BELOW) and added to their proper bin/s and followed an "organic" hierarchy structure; "atoms" were the base assets (typography, branded color palettes, grid systems, icons, etc), "molecules" combined some of the aforementioned assets into content panel widgets for different layouts, and "organisms" were fully formed content structures which could then be combined like Lego blocks to create just about any email layout possible. Flexibility was allowed for easily modifying or editing certain assets like copy and imagery.

Many widgets could be toggled to allow for different functions: for example, different header styles (all while staying on-brand in terms of logo sizing and usage, etc) could be created so that if a special link wanted to be added as a focal point — great for calling out new products or special offers — that could be enabled. Or not. It developed into an extremely fluid and flexible system saving time, energy, and the patience of busy Producers and Designers. New email concepts could be developed within 1-2 days for initial team review, and access to non-destructible "sandbox" Figma templates was given to Ecomm team members for concepting purposes.

The end result: a highly successful project which led to increased productivity, time for more creative exploration, and sighs of relief!