Smucker’s Table-side App
Redesign of Smucker’s table-side app featuring packaging AR triggers for personalized experiences throughout a trivia game and timed fruit smash game.
Project Overview
The JMP Smucker’s team presented to us an app for table-side game play that was previously designed but never launched. The objective for this engagement was to produce a streamlined, fun and scalable experience that inspires engagement with customers, while supporting retail partners. Restaurants or diners that provide Smucker’s brand jelly packets will have a caddy for packet placement. These caddies will have a QR code with brand messaging to download and play the app.
The Smucker’s client had a list of must-haves that were to be incorporated into our plan. The redesign started with an assessment of the structure and interactive experiences and provided improvements to the overall user experience.
GOALS
Augmented reality entry trigger based on 3 Smucker’s jelly flavors.
Convert existing native app to a web app.
Revamp existing app games with new UX/UI.
CLIENT
J.M. Smucker Co., Smucker’s
ROLE
Associate Creative Director (UX research, Creative direction, Client presentations)
TOOLS
Adobe XD, Adobe After Effects, Blender, Zeplin
TEAM
Project Manager, Junior Designer, Freelance 3D Designer, BE Developers, FE Developers
AGENCY
AMP Agency, Alchemedia
EVALUATION
Focus Areas
The previous app evaluation started with four key focus areas for enhancement. While playing with the app, we used these buckets to write down ideas. This help categorize what to improve on without going too far from the original client request.
EVALUATION
Breakdown
Next, we took each focus area’s notes and combined the similar ideas into sectioned proposals. This helped us see the similar views from each player and keep the integrity of the original app.
Look & Feel
The UI of the previous app had no relationship to the current brand guidelines for Smucker’s. The target audience considered here are young children and teens. To bring those together, a full UI update would be proposed to incorporate imagery and typographic that better aligns with the brand.
UX Considerations
Updating iconography to better relate to the action taken and easier user flow from game to game.
Games
We found that two of the previous games were very similar (Conversation Starters & Trivia), so we proposed to only keep Trivia. Reason being, the trivia experience provides a better gaming aspects for points and speed. The same topics can be brought into the trivia game and discussed at the table during play.
Improvements to the existing Smash game and Trivia game to increase challenges were also proposed.
AR Triggers
The new and improved feature of the redesign is the AR packaging trigger. We would use a jelly packet label design as the trigger, which would pull the flavor and set a theme to the game experience.
Web Based App
We found the native app approach for this project was holding back potential opportunities in development. A downloadable app can limit the amount of users available - slow network, limited data, children don’t have permissions, older model compatibility. This was a requirement we suggested to help in the longevity of expenses and freedom to expand functionality.
Site Map
Now, with the new technical update for this project, the only way users could get into the experience is through a QR code or link. We had to highly consider their physical location, QR code placement, and Smucker’s packaging to avoid any blockers during game play.
The site map depicts the “flavor scan” that determines the theme/color of the rest of the games. If a flavor package cannot be scanned at location, maybe due to low inventory, we have a skip pathway.
This project’s site map is unique to other projects I have worked on because there are 2 games in 1 app. So the user needed a way to change their game selection at any point before or after completing each timed game.
Wireframes
We split the wireframes into three sections - sign in/AR scan, smash game, and trivia game. The sign in process now offers SSO or an optional guest user. Going through each should always bring the user to the AR scan.
Our main challenge here was the use case when a jelly packet is not available. The solve was for an optional skip button to appear when a trigger point wasn’t detected for a certain amount of time. If no trigger, then a flavor picker is prompted.
Providing important information during game play such as, instructions, ending game, and changing the game was thought through during this step.
FINAL DESIGNS
Sign In
After scanning the QR code or entering via URL, the web app will launch with a sign in screen. SSO integration will allow for data collection and return user scores to be tracked.
Any future social sharing will be easy to add when players are already logged in to their accounts.
We still want to offer users to play without social sign in - as we know from our demographic, these players can be young and without a social presence. Playing as a guest offers the same game features without tracking best scores per session.
FINAL DESIGNS
AR Jelly Packet
While working with a freelance 3D designer who specializes in game development and Blender, we were able to create three different AR designs for each of the jelly flavors. Once the packet package face is detected, the fruit appear from around the edge and move as if being held on. The user can move around the package to see the 3D fruits and bee circling around.
The packet flavor detected will enable a CTA to proceed to the games using that flavor theme. The themes are subtle color and imagery changes.
If a trigger is not detected in the camera within 5 seconds, a skip button appears so the user can proceed by picking their favorite flavor.
FINAL DESIGNS
Trivia Game
The updated trivia game still contains the categories from the previous app, with an improved experience that allows the player to master each one. Previously the categories were spread across the questions. Now a player can have multiple questions under the same category. The final score can then be improved upon per category.
The following screen keeps track of the questions answered and shows their point value. As soon as a question is answered, the player goes back to the berry screen to pick the next question. When the player completes the last question, the game is over revealing the final score.
The trivia question experience improved drastically with a countdown screen so the player has time to prepare for the question. An updated timer & value UI keeps the player reminded of the question duration and points to be received. Our new UI takes into consideration the length of questions, as these can be updated anytime by the client with a headless CMS.
Once the game is over, we improved return rate by offering a best score tracker. If the user logs in via Facebook or Google, we can keep this score available anytime they return to the app. A guest will keep the score only for their session.
FINAL DESIGNS
Fruit Smash Game
The fruit smash game improved immensely with a few strategic user interactions. To start, we used the fruit theme to set the “correct” fruit to smash. If your theme is Strawberry, then the correct fruit would be Strawberries. For Mixed Berry, we have two - Blueberries & Raspberries.
By adding in the other “wrong” fruits to the game, the players were challenged with a risk. We changed the speed velocity and direction in which the fruit appear on screen - they now have a weight and can fly up and back down with gravity. Another addition was a bonus point feature with frozen “correct” fruit in ice cubes. The player will need to quickly double tap, first tap is to break the ice, second is to smash the fruit, giving double points!
The goal is to smash as many correct fruit until the timer runs out and accumulating the most points!
Same as the trivia game, once the game is over, we improved return rate by offering a best score tracker. If the user logs in via Facebook or Google, we can keep this score available anytime they return to the app. A guest will keep the score only for their session.
