Sustainability is a hot topic in the age of the “woke” consumer. This is especially the case in the grocery space, as consumers have become more cognizant of how their consumption and shopping decisions impact the world at large.
As such, Hannaford approached us wanting to create a more engaging way to showcase their efforts in sustainability. They’ve made significant efforts and investments toward making their stores green, both inside and out — everything from using LED lights to conserve energy, to buying local, to limiting environmental impact. So, they tasked us with creating an interactive “blueprint” of a Hannaford store to showcase all the areas where they practice sustainability.
The most immediate need was to create an engaging landing page that would highlight and emphasize the pride they have in these green efforts. Previously, there was a non-visual, copy-heavy page on their website that painted the suitability picture with a broad stroke, which was both unappealing and unengaging to consumers, brands and partners. Our objective was to convey specificity with excitement, and show specific examples of Hannaford’s green efforts for all their audiences.
We launched the “Going Green” interactive store during Earth Month, alongside other internal initiatives. The interactive page allows customers to view 10 departments within the store where sustainability efforts are in place. Visitors can take a virtual tour of Hannaford and check out the environmental and community impacts Hannaford has committed to making. Each department is clickable and opens a model with explanations of two to five examples of sustainability efforts within that department. For example, the Produce department mentions composting methods, food bank donations and buying local to support communities; and the back of the store mentions recycling efforts, climate control and low-flow water fixtures.
The virtual tour is highly visual and engaging to interact with — a complete turnaround from where it began. We felt the best approach was to keep each department simplified to make the store more scannable, but also features the colors, textures and interior styles of a typical Hannaford in-store experience — which keeps it recognizable.
One of the challenges for this initiative was to make one codebase that worked seamlessly on both desktop and mobile devices. To accomplish this, our development and creative teams leveraged the Vue framework. Vue takes a unique approach compared to the other leading frameworks — rather than have a large codebase that controls all aspects of the user’s interaction, Vue takes a more incremental approach. Vue can still be used to create complex types of applications, but developers can also include the Vue framework within their site and take advantage of Vue’s state management and document object model (DOM) manipulation to enhance simpler web pages.
We leveraged Vue’s built-in reactivity and component system to quickly prototype the user interface (UI) Vue allowed us to prototype the UI far more quickly than with past projects, which contributed to the project’s success. Ultimately, we created a lightweight interactive site that had unique navigation for desktop and mobile devices, and still utilized the core store view/illustration. And most importantly, we completed the project on time and within budget — which meant another satisfied client.