See top UX Designers turn ideas into interactive experiences using Adobe XD.
Watch now
  • Add to Collection
  • Tools Used
  • About

    About Designed a responsive website hub to promote the sustainability efforts of Hellmann's mayonnaise. … Read More Designed a responsive website hub to promote the sustainability efforts of Hellmann's mayonnaise. My Sr. Art Director and I each designed a layout for the initial presentation. My layout was designed to feel fresh, warm and inviting. The hero area featured colorful ingredient imagery, and I was inspired by ingredient images used in the Hellmann's brand book, and made the ingredients larger-than-life to really draw attention to each one. The client chose to move forward with elements from each of our layouts--predominantly my layout, with the farm image and wood sign picked up from the other layout. I became the lead designer on the project moving forward. Upon the suggestion of my Sr. AD, we decided to add some parallax elements--and animation--to the page. The sign would drop down from behind the nav, and the headline would appear. The eggs and oils on either side of the product, would pop out from behind the jar. The eggs would slide in from the left, and the soybeans from the right. The photos in the "Meet the Farmers" section would animate in, as if being tossed onto a table. And the ribbon holding the "Behind the Ribbon" text would fade in. I created storyboards, and shared them with the client and our in-house tech team to make sure everything was feasible. We made adjustments where needed, and I oversaw the developer to ensure the animations were brought to life as we had envisioned. All in all, I think the site turned out beautiful, and the entire team (including the clients) were thrilled with it. We were even able to make most of the animations work for mobile! For Phase 2 of the project, we were asked to add in 2 additional farm families under the "Meet our Farmers" section. This section of the site became a carousel, where the user could navigate left and right to learn more about each of the 3 families. I worked alongside our developers to make sure we were being as efficient as possible, while maintaining the integrity of the original design. Read Less
Mobile Layout
Phase 2 (Work in Progress)
Initial Design: