Loading ...

Responses by Raphael Felicio, creative and products director, 300 Comunicação

Background: A Bella Andrade is a health food company, which provides tasty sweets that everybody loves but with healthy ingredients. We kept this in mind when we started designing the project, exploring the universe of each flavor that Bella has created over the years and connecting with our brand new packaging system for them. Our goal was to create a digital experience within its world and promote its products for younger people who are aware of the importance of eating good food to live a better life.

Design ethos: We accepted the challenge of creating an incredibly animated website with short load times, knowing that good website performance is a must-have in any worldwide digital delivery nowadays. We proposed continuous navigation through products and also tried to design the screens and jar animations using the same pictures and elements, providing a lower loading timeframe and consequently an optimized user experience.

Navigation structure: From the beginning, we wanted to change users’ preconceptions of a scrollable page. During the design process, we had the idea of bringing an infinite flow inside the products’ pages and creating an immersive experience. On the home screen, we decided to build a roulette wheel where users would find their favorite flavors, watching it happening in a video next to the jar. Come on, it’s just mouthwatering.

Missed opportunities: If I could start the site over, I would try the products more often! Just kidding. In the beginning, we considered the idea of creating the bottles in 3-D and animating them in WebGL. We also wanted to invest more time in the About page and put more content in it. As it was a “secondary” page, we ended up focusing our energy into main pages that would make the experience more impactful.

Anything else? We started coding the site, keeping in mind how important it is to keep our focus on Google’s five pillars for mobile experience: performance, accessibility, best practices, SEO and progressive web applications. That’s exactly how we were awarded not only the Site of the Day by Awwwards and the CSS Design Awards but also the Mobile Excellence award. We are so proud of what we achieved since we are one of the few Brazilian companies that have won a Site of the Day—and the only one to achieve that award in both categories simultaneously.

abellaandrade.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In