Weber Grills App
iPhone • iPad • Apple Watch
Project Overview
In 2015 Weber Grills asked our agency to create a new iOS app. The previous app that we had created was outdated and a utilized a "paid" model. It brought over $100k in revenue, but "free" apps were becoming the norm. Our agency was tasked with creating a new iOS 9 app that had enhanced features and expanded functionality.
My Contributions
I designed all aspects of the UI and UX, managed asset production, and worked with our internal development team.
Weber Content
Weber's New Real Grilling aesthetics including iconography and textures
Din Kern font
Leveraged hundreds of recipes and pro photography
Leveraged weber produced grilling times and techniques
Product offerings with dealer locator
Old app utilized many out of the box controls. This new app was custom from top to bottom
A blog section
Apple Watch had grilling times and timers
Wireframing
After we defined the content structure, and thus what screens we needed, I created wireframes so that I could rapidly iterate on placement and hierarchies.
A major requirement of the app was that video would be playing in the background on the main content sections of the app. The "home" section of the website is called Watch and this is where a user can watch the 24/7 stream and peruse featured content. The carousel at the bottom of this section was in effect a "channel changer" UI. When a user scrolls horizontally the background video updates.
The remaining video sections use the same template. When a user clicks on a video, the background updates. After a specified time the carousels and nav disappear and the video is in full screen mode. Interacting with the d-pad on the remote will bring the UI back.
Final UI
The splash (loading) screen was a great opportunity to showcase location specific photos already being used in the mobile apps as well as reinforce brand consistency between platforms. A different photo displays during morning, day, and evening times. A streaming TV "plus" logo, designed by TEGNA design hub, is placed on top.
The look and feel of the app utilizes black as the main color. I used transparency and gradients to both highlight content as well as make UI more readable when it is layered over a video or image. I followed best practices regarding font sizes and layout "safe areas".
