Rothy’s: Revamping Styles for Mobile
My Role: Direction, Designer
Marketing Designer: Ashlee Rice
Rothy’s had recently created a beautiful brand guide, with detailed information on typography. The guide set the tone for overarching type lockups, capturing details on how to combine different fonts to create the brand’s look and feel. The guide was not a style guide or pattern library, and did not describe what font sizes to use across the website or marketing materials.
Typography styles from the Rothy’s brand guide documented high-level font styles and padding.
The brand guide had been translated into a suite of email newsletter templates, with variations for mixing typography and visual elements. The templates looked on-brand, and allowed the marketing designer to produce several emails per week quickly. However, when I came onboard, I noticed the emails were not readable on mobile and wanted to adjust them without any major disruptions to the volume of work being produced.
Previous email templates followed the brand guides, but were created to support desktop.
To make the emails mobile-friendly, my solution was quite simple—first, reduce the width of the email so that it would scale less on mobile (and therefore increase the size that elements would appear). Second, adjust font sizes while evaluating on a phone for readability. Lastly, spacing and nuances in typography were adjusted in the original templates to keep the integrity of the brand guide, ensuring everything looked balanced regardless of being viewed on mobile or desktop. Best of all, work could still move forward without disruption, and the original effort, time and money spent on the original templates was not thrown away or wasted.