Home / Work /

Weber In-Store Demo

Something a little different from a standard website design, this retail demo had to be bold and eye-catching, yet simple and engaging.

For this project:

Skills

  • UI Design
  • UI Animation
  • UX Design

Tools

  • Adobe XD
  • Photoshop
  • After Effects
  • Illustrator

The brief

A lot of BBQ products are relatively self-explanatory, but with the new iGrill range that makes use of modern technology, Weber wanted to put a helpful demo in stores to help explain to customers how easy they are to use and which one is right for them.

At its core, the iGrill is a digital thermometer that links up to an app on your phone to help cook BBQ food to perfection.

A screen from the attract loop that shows the 3 versions of the iGrill from Weber

The process

This project was a collaborative team effort. My role was to design the UI, and help map out the user flow through the demo, including storyboarding the attract loop that would get the attention of users walking by. Working with me on the project, was a motion designer, video editor, and creative lead who helped ensure everything came together.

Research

We started out by exploring the current Weber brand. We had access to some printed materials (that would be on display with the products) as well as the company website. We gathered together elements that we felt could be used within our demo such as:

  • Colours
  • Patterns
  • Typography
  • Videos
  • Images & Icons
4 of the main Weber colours; red, off-black, cream, and mid-grey
These were the main colours that we used, however, we later picked a teal from their printed material to help indicate the user was in a different section.
4 icons; a flame, BBQ tools, a Weber BBQ, and a back arrow.
Weber already had some great icons that we wanted to use in the demo.
A selection of characters using the Weber Slab Bold typeface.
Weber have their own slab typeface – we used the bold and light variants to create hierarchy.
A photo of a print advert by Weber showing texture and icons.
We really liked the texture that Weber added to backgrounds and icons. Their print advert provided us with a few extra colours as well.

Naturally, Weber had a whole bunch of fantastic lifestyle photographs and videos that we used to help tell the story.

A lifestyle shot with friends around a Weber BBQ.
A lifestyle photograph with iPhone and iGrill on the table with food.

Attract loop

The first section of the demo that we worked on, was the attract loop. The purpose of the attract loop was to play after the demo had been inactive for a period of time. The attract loop would then loop through some key features of the products with several calls to actions trying to persuade passing customers to interact with the demo.

UI Design

Initially, the design had 3 sections for the users to choose from; “Experience”, “Watch” and “Choose”. We played with a few different typography options but ended up sticking with the slab serif fonts with as this was easier to read from a distance.

An early home screen variation that uses a script typeface for the headings
The script typeface was a little hard to read from a distance and didn’t match its purpose.
An early home screen variation that used different layout that used the Weber slab font but a decorative layout for the letters to emphasise "THE" and "YOUR" between the two titles.
This option felt a little bland and the titles didn’t stand out as much as we wanted.
The final home screen solution which kept it simple and easy to read. The titles are black but uses red to emphasis the key words: "Experience" and "Choose".
The final version was easier to read and highlighted the main options in red.

The “Experience” section, we combined screen recordings of the app with videos that we used to highlight what’d be happen in real life.

A screen from the "Experience" section asking the user to select the food type
A screen from the "Experience" section asking the user to select a probe number

The product selector was a great screen that allowed customers to interact with the demo as if they were explaining to a consultant what their needs are. It allowed the customer to refine the products based on their BBQ habits and current equipment.

After selecting a combination of statements, we used opacity to filter out products, leaving the suggested product(s) :

An unfiltered product selector screen with 5 statements on the left, and the 3 products on the right.
The product selector screen after selecting 1 statement. There is now 1 product faded out
The product selector screen with all 5 statements selected, which filters the products on the right down to 1 (the other two are faded out now)

To help explain what we intended to build, and also test our designs on the screen it was being displayed on, we built up a prototype. This helped up to identify whether the user flow was simple enough and also whether our ‘tap’ areas were big enough.

View Prototype

The solution

The final product was rolled out to all the top stores their products are found within the UK. I loved seeing my work out there in the wild!

The demo accurately captured the rustic, traditional BBQ feel that Weber has established in their brand. The use of the background patterns and the slab-serif font really helps with this.

Summary

This project was certainly something different than what I’m used to. It was interesting having to consider the environment beyond the screen; busy shops meant that sound would have been weak and potentially annoying. It also had to compete with the visual noise around it from other products, so the design had to work harder to grab the attention of customers passing by without looking too crazy.

Want more?

Cineworld LMS Design

View

Petersfield Tutors Website & Branding

View

Jonnora Website & Branding

View