Nutpods was born out of personal necessity and has since grown to serve a huge audience of dairy-free creamer consumers. Made from a secret mix of almonds and coconuts, nutpods holds a coveted spot as a favorite among the Whole30 community as a favorite for coffee, baking, and tea.
The previous nutpods site wasn’t allowing the nutpods team the flexibility they desired in terms of both design and functionality, and it really wasn't showing off the personality of the brand.
Engaging content is important for the nutpods team, as they frequently update their site with new products, photos, and recipes, which was difficult to do on their old site. The fonts were also not web-friendly and made for a long process of incorporating design changes.
We worked with the nutpods team to not only design a beautiful site that allowed for more flexibility, but develop the site onto a platform that made it easier to function for both the nutpods team and their users.
Website Design and Development Success
The previous design of the nutpods site was done before the company had undergone a rebrand. The website was not accurately reflecting how the current product looked, so we sat down with the team to look at their updated branding and how they’d like it reflected on their site. We created two compositions for the team, each with a different look and feel. We ended up choosing one design and adding components from the other to move forward with. This collaborative process allows for our designers to go all out with their ideas and latch onto specifics nutpods had mentioned.
One of the main branding changes we made was making their recognizable font Rumbel into a heading font, and allow for a more web friendly san-serif font Josefin Sans to compliment it throughout the rest of the site. This font can be used throughout the rest of nutpods branding materials as well as their social media.
The homepage of nutpods is designed for those familiar with nutpods, along with those just discovering the product. The certifications of vegan, Whole30, and etc. were important for the nutpods team so that is included immediately below the fold. Following that, we created a fun section in which we developed gifs of nutpods in use, along with other tiles that prompted the user to shop different types of nutpods. Since nutpods is also available in a ton of major retailers, we also included an integration with Destini to show inventory levels of each of the creamers. Finally, we include the recipes section for avid nutpods user who are looking for engaging and fresh content.
The nutpods team wanted to better tell their story to their users along with their product and packaging. These pages are able to be dynamic and exciting content through a headless commerce approach that decouples the eCommerce engine from the content. The shopping portion of this site is powered by BigCommerce. We moved the nutpods team off of Shopify so the team could experience scalable growth and allow for more flexibility with their apps. This also allowed us to move forward with headless commerce so that the team at nutpods could have dynamic content pages and continue to add more as they grew.
The product pages allowed for a breath of fresh air that really make the products pop. The nutpods team has a huge array of product photos to use, so we created these pages to compliment each individual flavor color while maintaining a cohesive look and feel.
The build also included a Recipes Page for the nutpods team that allowed us to design and develop an area of the site that could be image and icon heavy and easy to update for the nutpods team. They invite influencers to make their own nutpods creations with differing levels of difficulty and aspects of health. With that in mind we created icons to denote if a recipe was gluten free, plant-based, Whole 30 and many other important diet notations.
We’re excited to watch the nutpods team continue to grow their business and expand into new ventures. They have a platform that will complement this growth and we are excited to partner with them along the way.