Product Launch Teaser Landing Page

Project Overview

  • Role: UX/UI Designer, Art Director
  • Client: Thermador
  • Duration: 2022
  • Deliverable: Teaser Landing Page Prototype

The Ask

Thermador was gearing up to launch their latest refrigeration product in late 2023. Before that, they want to build up awareness and hype around the product before official launch. This is the process, concept and prototype built by me.

With the goal to build anticipation and develop a new prospect list, tease the launch of the Bottom-Freezer Refrigeration Collection with a Web page that targets interested buyers and trade members. Encouraged by in-site and outside drivers, it should attract visitors, build hype, and garner sign-ups.

Background

Thermador is hailed for its refrigeration products, since the 1920's. Thermador wants to approach this product launch a bit differently, straying a bit from the traditional voice of the brand, but preserving it in the details. My team and I conducted a photoshoot for 2 days capturing beautiful imagery of this product to use for the whole campaign, many of which are used on this teaser page.

Audience

The audience for this page are all of Thermador's audience: consumers, dealers, architects, builders, and designers. With all of these groups in mind, I needed to appeal to each and every one of their POV's and priorities.

Constraints

The biggest constraint with building any new page on Thermador.com is the structure software that it is built on, along with sister brands Bosch and Gaggeneau. Being limited on capabilities and creativity is always the main constraint.

Creative Development

Approach

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

User flow describing the designer's vision for the flow of content for this page.

Tools

Initial Concepts

Upon discussion with my creative team, I wanted to see what solutions could look like at various levels of exposure to the features and details of the product. I presented these three possible solutions, ranging from liberal to conservative in how much info about the product was there. Version A shows the whole fridge, and product lineup, while also including the fridge interior and where the features will be located. Version B takes the product as a whole out of the visual story, and you just get visuals for the 4 top features client wants to highlight. Version C hides any visuals of the fridge's interior or what specific features look like.

Each version can have a different impression and experience for the user around the product, which was a main point of disussion in the initial round.

Version A
Version A layout of the creative.
Version B
Version B layout of the creative.
Version C
Version C layout of the creative.

Ecosystem

The user will click on a driver within or outside of Thermador's website. They will land on this teaser page, and have many opportunities to click "Get Notified". This call to action will bring them to the notify me page. After they fill out their information in the form, they press submit, and they are immediately opted in to get notified via email about updates around this new product.

user flow of the overall ecosystem around this landing page creative.

Challenges

I wanted the landing page to feel like Thermador, traditional and reliable, while also making it compete with other brands, sexy and mysterious. Balancing this while making the experience still feel like a Thermador experience was tricky. But leaning heavily into close up shots echoes the pride in craftsmanship of the brand, and works really well here.

Implementation & Development

In the end, we decided as a team that we needed to give the audience exciting things to look forward to, and imagery helps the audience understand the features better. After final creative was accepted, I handed the files and prototype over to the development team. In doing this I also exported assets according to their website structure requirements. But in the end, it completely stands out structurally from Thermador.com's other webpages.

Final Creative

The below final creative has scrolling capability. Or, for an interactive experience, click the links below.

Landing Page

View interactive desktop prototypeView interactive mobile prototype
Desktop preview of final creative.

Get Notified Page

View interactive desktop prototypeView interactive mobile prototype
Desktop view of notify me page.

Drivers

I created many drivers to be placed throughout the site, including the home page, refrigeration product page, and a couple of other inner pages on the website. I also developed a content block that would be included in an ongoing email campaign as an outside driver.

Drive 1: homepage of Thermador.com.Driver 2: header image of the Refrigeration page.Driver 3: content block on an inner page.Driver 4: content block on an inner page.Outside driver: email content block.

Notification Email

This email would be sent as soon as Thermador team was ready to provide more information for the final announcement. One version would go out to the consumer audience, and another would go out to the trade audience.

Email notification for consumer audience.Email notification for trade audience.

Impact & Efficacy

Unfortunately I did not get to see the end of this project, but with some minor changes to photography, the site is live and can be found in the link below.

View Live Site

Reflection

I really enjoyed leading this initiative with the help of my team. A memorable moment was working with our photographer to capture images for the GIF idea I had for the freezer drawer feature. He delivered beautifully capturing all the different settings of the drawer so that I could make this engaging GIF of the feature, which is the leading feature on the current site. I also enjoyed learning how to make working prototype in Figma, as this was my first one.

GIF of different settings of the product's biggest feature, the freezer drawer.GIF of the final creative of the notify me page.