International Grocery on Amazon

Brand indicator bar

The Brand Indicator Bar (or Brand ID Bar) is the core design element of the new system. It allows our 3P brands to spotlight their brand color alongside curated lifestyle imagery. The neutral nature of these templates also safely accommodates the brand logo and specially branded text-treatment within the same space.

Dynamic text

In order to better accommodate the copy requirements of our marketing partners – including our international partners with longer average word lengths – we have developed a design system that allows for flexible text length, shifting imagery and safe-zones inward or outward accordingly.

Have shorter, snappier copy? We have a template for that. Need a bit more copy space to describe your promotion in more detail? We’ve got a template for that, too.

Smart ASINs

Smart ASINs correspond directly with Dynamic Text, and allow for marketers to curate ASIN content based on the length of their intended copy. ASINs are set against a neutral gray backdrop meant to separate them from one another and accomodate multiple ASINs within the same view without any additional need to consider things like scale or placement.

Project: About one year ago, Art Director Adam Levermore launched a design system (called Tangram) for our third-party grocery brands to be easily represented across the Amazon.com and PrimeNow storefronts. In that year, we found that what was initially supposed to be a flexible design system turned out to be more rigid and not as easily automated as we’d initially hoped. I was called in to support Adam with the visual direction for our 2.0 version of the same design system, while he nailed down the technical specifications, rules, and math behind the automation of our system.

Process: In order to look ahead at the future of Tangram 2.0, I knew I had no other choice but to look at the present state of it. We consolidated a list of feedback from our marketing team to see what aspects of the design system were successful, and where it had room to grow. My initial approach was to take a step back and look at the creative landscape around us, and take note at what makes visual design systems efficient. Ultimately, I thought: the best design is the one that goes unnoticed. Tangram 1.0 felt very angular, and almost too recognizable as it often overpowered the brand attributes of our third-party clients, taking them further away from their own identities. We went back to the drawing board and came back with an approach that encouraged leaning into white space as much as possible, carefully curating brand colors and type treatment, and thinking of ways to create flexible text areas with the potential to even scale text-size based on the length of copy. And…that’s how Tangram 2.0 was born.

Inspired by a sliding card system, the system is an arrangement of boxes that are activated by each brand’s unique visual identity (via color, typography, product selection, and photography). Tangram 2.0 improves the user experience by reducing manual production and creating flexible design templates that easily adapt across all current and future third-party brands. The alignment of core visual tools across all events also allows brands to easily transition into event-specific templates without having to require additional engineering efforts or creative concepting.

Tangram 2.0 was tested out against its predecessor in a series of weblabs throughout the UK. The results exceeded expectation, with annualized OPS of +£2.11MM ($2.77MM), far exceeding the usual weblab benchmark of roughly £1MM ($1.4MM). As a result, Tangram 2.0 has been rolled out across all our international teams and have been enthusiastically embraced by the marketers who’ve been able to begin designing their own graphics in our automated self-service tool.

Role: Art Direction, Visual Design, UX Design.

Team: Collaborated with Art Director Adam Levermore