Process

Competitive Analysis of Promotion Pages

For Coca-Cola Mexico we began our work by completing a competitive analysis of various e-commerce stores in multiple industries. We wanted to understand how various companies presented their coupons and sales to users and if the coupon application process was clear. While analyzing promotional pages, we also pondered if there were any areas of opportunity where Coca-Cola Mexico could set itself apart from other beverage companies and the way they carry out the promotional code application process.

User Flow and Updated Component

When it came to the creation of the promotional component, we wanted to introduce atomic design to Coca-Cola. We wanted to inform them that with atomic design, components would act like Legos and could be used to build out pages across the site in a quicker fashion than it would be if they were to start from scratch every time they needed to build a new page. By utilizing atomic design, their site would have a consistent uniform look which would aid in reassuring the user that they were on the same site and build their trust by having a site that achieved an orderly, dependable design. 

For the promotions component we recommended placing the brand logo in the upper most left hand corner out of the way from any important headlines or sub copy that would inform users of the promotion or how it could be used. We also recommended setting a background image on the right hand side and keeping it in a container that would prevent the image from stretching across the entire component and render text illegible. On mobile we recommended that the image would stack underneath the logo and above the headlines and sub copy, again to aid in legibility. In addition, we recommended adding a copy coupon CTA, to give the user an obvious and easy way to obtain the coupon code for later use in their cart. This was a major improvement over the current static screen which did not enable the user to click on the promotional code at all. There would also be a text link next to the copy coupon CTA would allow users to view terms and conditions of a specific promotion. Once we had our promotions component finished we created a few new options for Coca-Cola Mexico that would help them meet their business goals right now as well as some designs that would give their users a simple, upgraded experience in the future. 

Outcome

Wireframes

First, we had the MVP design, which took the current static image promotions page and simply incorporated the new atomic design promotions component and replacing the static promotions code with the copy coupon CTA. Our future state MVP design would house all promotional codes within a drawer on the homepage to keep the user from clicking into a separate promotions page just to view the latest deals and savings. The same copy coupon CTA functionality mentioned above would apply in this future state MVP design as well.

We then began to think about what an idealized user experience would look when it came to promotions and we envisioned two different versions of the ideal state. The first state would take the current static image promotions page and strip it back by offering all promotions in a grid as the premier focus on the page. Underneath, we would feature items that would qualify for each promotion that’d be featured above. We also included an area for referral credits for Coca-Cola subscribers. Our second idealized promotions page would include everything already mentioned but also visual cues and a progress bar within the user’s cart. These visual cues would not only confirm that an item has been added and is part of a promotional deal, but would take the guesswork out of calculating how many more items a user needed to add to their cart in order to satisfy a promotion’s requirements.