Brian Norris
← All work

Jif That Dish

A Vue app that randomly surfaces menu applications for Jif Peanut Butter recipes, with filtering and sequential browsing

Type
Work
Client
Jif
Role
Lead front-end
Year
2021
Stack
Vue 3GreenSock (GSAP)REST API
A colorful Jif peanut butter-themed game wheel with sections for different dip ideas, surrounded by images of food, and text suggesting ways to serve Jif, flavor hacks, and a PB Hummus Dip recipe.
A screenshot of the Wheel app

Context

Food-service clients need to sell chefs and menu planners on how a product fits into their menu. For Jif Peanut Butter, the goal was a fun, engaging way to surface recipe applications randomly, giving a user a reason to keep spinning and discovering rather than browsing a static list. Filtering and sequential browsing round out the experience for users who want more control.

Role

Process

  1. 01

    Rethinking the wheel

    The original concept called for a Wheel of Fortune, top-down, style spinning wheel. In a problem-solving meeting, I flagged that the trigonometric complexity of a variable-slot wheel would be significant, and proposed an alternative: a Price is Right style wheel, where a single continuous drum spins and lands on a result. It was a practical trade-off that kept the project on track without sacrificing the core mechanic.

  2. 02

    Animation with GSAP

    GreenSock handles the animations. The goal was a spin that feels physical, building momentum, then decelerating naturally to a stop. However, getting the speed curves to feel truly realistic proved harder than expected.

  3. 03

    Filtering and sequential browsing

    Beyond the random spin, users can filter by category and walk through applications one at a time. This gave more deliberate users a way to explore the full catalog without relying on chance.

Outcome

The app successfully delivers a fun, randomized recipe discovery experience for food-service audiences, with enough structure for users who want to browse more intentionally.

Reflections

The animation was the most challenging part and the part I'm least satisfied with. Making a spinning wheel feel physically convincing requires fine-tuned speed curves that are hard to dial in. The spin works, but it lacks the weight and deceleration of something truly realistic. It was a valuable lesson in how much craft goes into motion that feels natural, and something I'd approach differently with more time or a second pass.

Additionally, the similar All Spreads Daymaker app that I later built showed that the Wheel of Fortune style wheel would have been possible and probably more effective.

Next case study Smucker’s Fun β†’