Responses by Bonnie MacTavish, head of experience strategy; Ahmed Meer, head of design technology; and Christine Sultana, head of operations, Nightjar.

Background: Discovered Wildfoods came to us with a big story to be told and an infectious energy for doing its part to improve the health of our planet—and the health of Australians. The vegan movement is gaining global popularity but there’s part of the picture that’s missing, and wildfoods remain little known and little understood. The purpose of the site was to introduce wild Sambar venison to three key target audiences and explain why what we put on our plate matters to the planet. First, we needed to attract the “conscious carnivore” who’s interested in sustainability, shopping responsibly and helping local businesses thrive. Second, we needed to inspire chefs and restaurateurs, proposing sustainable venison and game meats as a tasty and responsible addition to their menus. A third audience is retailers (restaurants, grocery, distributors) who are considering stocking the products but may need to understand the benefits of wildfoods.

Design core: We let the brand do the talking with powerful and emotive imagery. Our approach was to break the content down into “chapters” and introduce exploratory illustrations and devices that held the reader's attention and help them follow the journey. Motion design was a key factor in immersing the reader into the narrative. We emphasized the natural, premium and rich tones through design, and enabled the story to evolve through immersive parallax effects and subtle animations and transitions. Currently, the site is enjoying high dwell time (more than four minutes) as users immerse themselves in the product. E-commerce was always going to be a core element of the site, and with this in mind, we ensured the story—and the mouth-watering recipes—motivated the user down the purchase funnel. The cart is one of only two items in the navigation; when an empty cart is clicked, we guide potential purchasers to the shop.

Favorite details: It’s sometimes the smallest details that really make a site sing. We love the compass detail on the homepage. There’s also subtle, textural noise in the background of the site, which gives it an earthy feel. The mouse cursor with the difference filter is also wonderfully interactive and entices users to play with the elements on the page to discover the next section.

Challenges: A very modest budget. However, during our initial conversations with founder Tara Medina, we could see that Discovered’s passion and values were a match for Nightjar. The brand’s mission is very inspiring, so our team decided this was a project we would happily take on.

The challenge was to deliver an immersive but truly flexible and modular design system that could scale as the business grew within the time we had available. Wanting to ensure that we executed to the high standards we hold ourselves to, we invested further time on our side to deliver a silky smooth experience that everyone on the team is very proud of.

Time constraints: As we only had limited hours on UX, design and development of the site, we took a very lean approach for this very lean protein. We condensed the wireframes process and maintained simple but flexible modules for which we had already estimated development hours prior to sharing design with Discovered. At Nightjar, we always want to allow ourselves enough time at the pointy end for polish, so this is factored in regardless of the budget. For this project, it meant a simpler approach to functionality and design.

E-commerce was always the end goal for the site, so it was a focus in our upfront UX and design phases. The budget only allowed for a finite number of features. To make e-commerce achievable for Discovered, we delivered the cart functionality post-launch as part of a secondary sprint once they had earned some ROI.

Navigation structure: The brief was centered on storytelling, so the navigation was intentionally kept simple with the user enticed to scroll through the homepage, rich in imagery and copy, where the story about ethically harvested wild game comes to life. As the user engages with the story, we lead them into the next chapter. A top menu button reveals Mission, Products, Recipes and Shop in a decluttered overlay with plenty of negative space and textures from Discovered’s photography suite.

We introduced a progress indicator on the right-hand side of the homepage so the user can see their place in the story. It also serves to strengthen the narrative element of the experience, with each section appearing as a chapter.

Technology: The front-end technology is delivered as server-side-rendered React, and for the back end, we used the Sanity CMS. A headless approach lets us build for speed, scale, reliability and ease of use for our partners to maintain their site. We’ve used Sanity with great success on several other projects.

For the e-commerce aspect of the site, we utilized the Shopify API to create our cart experience. For animations, we used GSAP.

Special features: It’s a passion to inject as much love as we can into these storytelling products without degrading performance. Therefore, we spend much of our time ensuring all the extra touches we put in place don’t impact the speed of delivery or interactivity. Features such as difference blend mode, smooth scrolling, parallax and high-res imagery must be extremely performant for all devices and connections. The piece we really loved creating was the parallax zone on the homepage where users get a bit of inertia as we dial the scroll speed down and then speed it back up as they exit the big typography.