UX/UI design for automated sampling unit
Smile Sampler is a sampling unit that automatically dispenses a product sample when a smile is detected with Emotion Recognition Technology.
The goal of this project was to create an automated sample dispensing solution that would draw customers into center-store aisles, and would be easily implemented by grocery and big-box retailers.
The Smile Sampler successfully attracts shoppers and users reported they enjoyed the experience and would seek it out again. It brings excitement to center store and creates an opportunity to increase purchases, while also being practical for retailers to implement and support.
I was responsible for the overall user experience design on this project, while working with a cross-functional team.
The team was made up of eight individuals, including: a creative director, an architectural designer, a visual designer, a software developer, an industrial engineer, an account executive, an account strategist, and myself, as a senior interaction designer.
Physical retail sales are in decline, particularly in the center-store grocery area. Many consumers consider the center-store uninteresting and unappealing.
Cross-functional projects with a large array of moving parts, like this one, take a great deal of coordination and collaboration. Ideating, iterating, and working as a team was critical to this project’s success.
In order to create an informed user experience, I utilized information provided to me by co-workers with access to subject matter experts who understand consumer packaged goods brands that sell in the center-store aisles, as well as the pain points of retailers.
In 2013, a CPG Qualitative Aisle Reinvention research revealed:
It was important to create a solution that could meet the project goals and also be easy to implement. Appealing to retailers was a carefully considered aspect of the project.
Once the team had a thorough understanding of project goals, we began to closely collaborate and develop a solution.
The architectural designer and industrial engineer lead the design process of the physical manifestation and functionality of the dispensing unit. I worked with them to ensure the user's needs were taken into consideration.
Engineering and architectural design considerations:Smile Sampler Architectural Design Render
Taking technical and cost requirements into account, the team chose to use iPads for the touch screens and cameras. Working from the touch screen dimensions, I sketched out the user interface. When my sketches were approved by the team, I digitized them into wireframes.
Photo: Smile Sampler paper sketches
Smile Sampler Wireframe
When my wireframes were finished, I mocked-up the interface with a visual design that would also be applied to the physical build.
Smile Sampler User Interface & Visual Design
Visual Design of Physical Build & User Interface Overview
Step 1: Home Screen
Step 2: Camera Turns On
Step 3: Face Detection
Step 4: Smile Detection
Step 5: Photo Taken
Step 6: Sample Dispenses
When the design of each respective part of the project was completed, the unit was built, and we began to test and iterate.
Photos: Users testing the Smile Sampler prototype
The Account Strategist coordinated and recruited research participants for usability testing. I conducted the test and collected data on the Smile Sampler’s performance.
Overall the unit performed well and reactions were positive. We identified a few areas in which improvements could be made.
We decided to add additional visual cues to better indicate to users that the interface is measuring their smile, and that they need a big smile to get a sample.
We found that the dispensing unit could easily jam, and decided on changes to mechanical design in future iterations.
When the testing and validation phase was completed, a visual designer applied the Hershey's branding to the Smile Sampler user interface and physical build.
Hershey's Smile Sampler
Smile Sampler with Hershey's Branding
Hershey's Smile Sampler UI: Home, Terms & Conditions Screens
Hershey's Smile Sampler UI: Face Detection Screens
Hershey's Smile Sampler UI: Smile Detection Screens
Hershey's Smile Sampler UI: Publicly Share Image Permission Screen
Hershey's Smile Sampler UI: Sample Despencing Screens
The Smile Sampler grabs the attention of busy shoppers and helps drive them to the center-store. This can help increase in-aisle traffic, drive incremental conversion, increase basket size, build emotional equity, and enrich the retail experience.
The Smile Sampler was implemented into The Hershey Company's Global Customer Insights Center. It was tested in their flagship store, Hershey's Chocolate World, in Hershey, PA with plans to test it in other retail stores.
The Smile Sampler managed to gain some spotlight. You can read about it by clicking on the following links: AdAge , Confectionery News , Progressive Grocer
The Smile Sampler successfully attracts shoppers and users reported they enjoyed the experience and would seek it out again. It brings excitement to center store and creates an opportunity to increase purchases, while also being practical for retailers to implement and support.
“We think for the confectionery category there is somethin very nostalgic and fun about it. This is
a potential way to bring excitment to
centere store, every time someone comes to the store it's a draw down the candy aisle and there's a
convergence opportunity in it.”
— Frank Jimenez, Senior Director of Retail Evolution
