Promo units are banners that are displayed within the Shopkick app. Promo units are used to communicate a variety of messages that carry value to users, for example, places you can walk into or items you can scan with promotional kicks that day, marketing events we host that have big kicks, new features, and various other point earning opportunities.
Promo units are placed in a very prominent position in the app - they are the first thing that you see when you open it. There were a few things that weren’t working with how we were originally designing promo units that required the development of a new design system:
Everything was designed arbitrarily and didn’t look unified as a system. Discrepancies in messaging, layout, and color usage would often cause confusion for our users because they’d add complexities to the programs we were running.
Banners frequently would be driven by our partner/external brands, causing them to misalign with our brand voice and style. Instead of seeming like an announcement within our app ecosystem presented by us, they seemed like any paid advertisement placement.
My goal was to develop a design framework that designers across our team could use to create promo units that fit within the app ecosystem and maintain uniqueness between units.
I tested a variety of layouts and designs. One key restriction was finding layouts that would accommodate many types of art assets provided by our partners, whether they were lifestyle photos, product shots on solid backgrounds, or illustrated. I approached this by applying different overlay shapes, sizes, and colors that could hold descriptive text over a photograph.
I started to identify the layouts that seemed like they could work across many types of art assets. The layouts I selected became the foundation of the framework, providing visual consistency across the system.
Next, I began to evaluate the way that we communicated our messages on the promo units. Most consisted of communicating an action and a benefit - “perform this action, get X points”. I landed on a type style that I felt clearly distinguished between the action and the reward, effectively communicating value to the user.
At this level, I’d achieved visual consistency, but there wasn’t anything that gave individual units personality. Consistency is important, but because multiple promo units run in the app at any given time, they need to be visually different to capture users' attention.
I began to experiment with color treatments and selection techniques to help the unit feel like part of our ecosystem, while still allowing the partner’s voice to come through. I established a method for selecting colors based on the artwork provided for action text and containers for text that would allow each promo unit to look unique.
This completed the majority of the framework. I worked through a few other essential details and created a guideline document, similar to a brand guideline document, that completely outlined exact text sizes, color selection techniques, and basic layouts.
Upon creating this document, I held a roll out meeting with team members from Sales, Design, and Marketing, so all parties could align on the framework and understand the guidelines when requesting assets.
We’ve since continued to our expand our framework to accommodate for more complex messages, but it’s still used as the basis for all banner design that we create today.
