Q1 2022
The main way customers come across Amazon grocery brands is the online shop, by far. But shopping Amazon grocery pages feels uncomfortable and uninspired. Furthermore, the way creative assets were deployed on site was primitive, resulting in unbelievable problems both in terms of the experience of browsing our pages, and scalability. As part of the brand team, I felt strongly we needed to take ownership of the poor impression our pages create. We also needed to modernize how the brand expresses online so we spend less time keeping the lights on. I was the sole driver of this project, initiating this discussion with engineering & UX partners, and marketing stakeholders. Ensuring no one felt the brand team was going rogue, messing up anyone else's side of the kitchen, and that it was always clear there was space to get involved, and they understood their commitments to the project.
Previously, nothing distinguished decorative from clickable containers. Additionally, there was variation among visual cues used to define clickability. Our resulting pages were unsurprisingly, confusing. The new placements I introduced used consistent visual cues to define clickability using the same distinctions as secondary buttons from Amazon's design system, and pushed decorative imagery to the page background.
Before: No distinction between decorative & merchandizing placements. Strangely, there is distinction between clickable placements.
After: Decorational imagery is brought to the page's background, and all clickable placements use visual cues established in Amazon's design system for secondary buttons
Our templates used to be designed for use in specific arrangements. They were static images with text baked in, and so a different template had to be used if you wanted 4 placements in a row, or if you wanted 2. This also led to awkward layout solutions for accommodating odd numbers of placements. The new placements I introduced behave like web objects, and adjust automatically to accommodate any number of cards, is responsive, and removes arbitrary text limitations with live text. They also don't require ten different design specs just to accommodate minor layout adjustments.
Before: Odd numbers of placements create interesting layouts unrelated to content hierarchy
After: Placements respond dynamically to content, clarifying hierarchy
These new flexible placements introduced a level of complexity our partners may not be used to. In order to maximize adoption, I kept them constantly updated as the new placements were developed, documented guidelines and tips on a website they could refer to, and conducted brown bags to introduce the new placements and demonstrate new ways pages can be assembled with them. I also worked with the engineering team to ensure the process for assembling the new placements were as simple and straightforward as possible.
Introduction and guidelines to new placements documented in a place that's easy for stakeholder to reference
Flow for stakeholders to assemble the new placements in our team's self-service creative assembly tool
These first steps introduce basic improvements to Amazon grocery's shopping experience online, but more importantly, as adoption of them grows across our pages, it provides the design team handles to push updates on the design without requiring the insane amount of coordination it used to to make minor visual updates to the brand. Our partners are also excited for new capabilities, and have already started requesting features for future releases.
Amazon grocery storefronts don't need complicated designs to say the same thing
Credits
Engineering partners: Marty Cortez, Tekeste Kidanu, Sahaj Bajracharya, & Saswat Bastia