Dynamic Item Deals Recommendation Module
One of our clients asked for us to develop a dynamic item-level personalized module that can be placed in existing and new Grocery and Retail communications to surface active, relevant promos available for a user at a featured merchant. The goal was to highlight key savings to the user in a visually compelling way.
Inspiration
We took the existing dynamic item recommendation module (fig1) and compared it to the in app experience (fig2) and competitor modules (fig3). We had also previously proposed new merchant recommendation modules (fig4), so we drew inspiration from those as well. We knew we wanted the module to look as close to the app creative as possible for brand and experience recognition. The client specifically liked the yellow burst in in one of the competitor modules, and they wanted to have three columns of products.
fig1.
fig2.
fig3.
fig4.
Initial Designs
In round 1, we provided four design options, two with two columns, and two with one column. Our best practices warn against mobile emails having more that one column and desktop emails having more that two. This is so when the text dynamically populates it does not end up at different heights, which would look very strange. To mitigate this, we added strict development guidelines to truncate the text after two lines. However, we still pushed for a single column design as per our best practices and for reader comprehension.
Click image to enlarge
Design Development
The client’s feedback was to move forward with option01 and option 04 with a few tweaks. In option01, we changed the percentage circle to a pill to more closely resemble the app. In option02 (the old option04) we updated the colour of the new sale price to green.
Final Amends
The client’s main feedback was to try a three column layout, as that would most closely resemble the in-app experience. While it does make the content very tight, we understood the desire to match the in-app experience, as that would create better brand recognition for the consumers. We also changed the option 02 desktop version to have two columns, so desktop email it would be in could be a bit shorter. After these amends, we moved onto final delivery.