PRISM Brands Hero Banner Feature
The hero banner feature is a new feature that we added when reimagining the entire Ahold Delhaize PRISM Design system. The previous hero banner was not full width and broke when scaling between browsers sizes. Users found it lacked inspiration; the click through and add to cart were low. We saw the opportunity here to add a hero banners that would not only scale seamlessly between desktop to mobile, but also add impact to make shopping experience easier for users. Animation was also and addition, creating inspirational moments for our shoppers while giving them ideas of what they can make with the groceries they buy, and to top it off a new feature that allowed shoppers to directly add items directly from the banner itself.
Key Highlights:
Modern animation and design to improve CTR and brand impression
Interchangeable design templates to support uniqueproduct & marketing initiatives
Attention-getting, conversational content
Shoppable products and calls to action
Provide a strategic direction to asset creation process
My Role
Creative Direction & UIUX Design
Collaborate with merchandising and brand teams to develop content calendars
Set the art direction and work with content designers to create more engaging content
Develop a style guide for brand and internal designers to follow for future hero banners
UIUX Design
Create & animate 10 banners to get buy in from stakeholders + brands
Work with developers to implement the hero banner on the live site as well as working with the QA team to ensure designs are correct once live
Collaborate with data & analytics for an AB test and prove that this new feature will generate revenue and resonate with users
Design Governance
Onboard and oversee brand designers, art directors, copywriters and developers to ensure brand guides and standards are followed.
Meet with brand marketing teams weekly for the first 3 months to ensure designs and content were following the art direction.
Inspiring Content
Knowing one of the key pain points was the lack of inspiration on the homepage and with everyone going to the internet for recipe inspiration, the new hero banner was the perfect opportunity to bring in engaging content that enticed our shoppers and simplified their lives.
We first worked with the merchandising and brand teams to develop a content calendar, planning content that would speak to our every day shoppers who are just looking for quick recipes or something a little more special like birthday party dessert ideas. We also took into consideration holidays, planning our content around Christmas or just the Super Bowl (come on we all know this is a national holiday in the US) and considered where we could partner with our vendors for monetized content.
Once the content calendar was built out for the first 3 months, we then worked with content designers to write more engaging headlines and copy that would work harmoniously with our visuals, inspiring our users to want to try new snacks or take a stab at our recommended recipes.
Then it was off to designing and getting, in order to implement this new feature the team had to design and animate the first 10 banners that would be tested under the Stop & Shop brand before developing and handing off guidelines to brand designers to execute in the future.
Scalable Design
As previously mentioned the original hero banners broke when scaling between different devices. By looking at various desktop, tablet and mobile breakpoints we were able to create new sizes that would flex across all devices. We also created templates and animation styles that would be super easy for the brand designers to pick up, cutting down production time.
Implementing Design & Testing
After taking the banners from wireframes to prototype, countless presentations to brands and stakeholders for buy in we were finally able to develop this new feature.
The new hero banner not only is a brand new design but it also added many new features that were not part of the design system previously including product tiles and a carousel that allowed users to pause and play. We went through rounds of user testing to ensure that the banner is easy to navigate and most important resonated with our users.
We worked hand in hand with developers and the QA tea to ensure the new banners were implemented correctly from designs to functionality. We then collaborated with our data & analytics to implement the 10 banners created for an AB test to prove that this new feature will generate revenue for brands and resonate with our users.
The initial test was implemented on Stop & Shop. We wanted to ensure the banners produced results before going live on ALL 4 brands. The A/B test results for first 2 weeks of launching hero banners exceeded our expectations.
Stop & Shop Projected Performance Over 365 Days below:
Increase of 485M in Impressions
Increase of 4.4M in Cart Adds
Increase of $12.7M in Add to Carts
The Team: Krysten Farley, Anthony Chilelli, Shu Tang, Angie Eckstein & Jordan Hiller