TopShield Redesign
TopShield Redesign

TopShield Redesign

Looking to compete with leading brands, our design team was tasked with overhauling TopShield’s website’s landing page. Pulling inspiration from leading competitors, our design team redesigned the landing page to be sleek and easy to navigate. Read below to learn more about the new and improved TopShield landing page.

Client
SRS Distribution
Industry
Commercial & Residential Roofing
Launched
2022
Homepage UI design for Topshield, a construction and roofing material supply site.
TopShield's Where to Buy CTA page, displayed across mobile, tablet, and desktop breakpoints.
The TopShield About page with featured imagery and navigation.
A mobile view of TopShield's Product page and a featured Whirlybird product, complete with filtering and color variant selection.
A construction worker holding a phone with the TopShield Resource Center page displayed.
Snapshots from the TopShield Pro page featured in tablet view.

Problem

Problem

Looking to compete with leading brands, our design team was tasked with overhauling TopShield’s website’s landing page. Pulling inspiration from leading competitors, our design team redesigned the landing page to be sleek and easy to navigate. Read below to learn more about the new and improved TopShield landing page.

Solution

To further highlight the brand’s strengths, we created a simple four card callout with short descriptions that showcase the brand’s distinctiveness. For example, two of TopShield’s main selling points are it’s sustainability and affordability. With this in mind, we highlighted these two features in the card callout.

Our design team’s main project goals:

Project Overview

Problem

Looking to compete with leading brands, our design team was tasked with overhauling TopShield’s website’s landing page. Pulling inspiration from leading competitors, our design team redesigned the landing page to be sleek and easy to navigate. Read below to learn more about the new and improved TopShield landing page.

Solution

To further highlight the brand’s strengths, we created a simple four card callout with short descriptions that showcase the brand’s distinctiveness. For example, two of TopShield’s main selling points are it’s sustainability and affordability. With this in mind, we highlighted these two features in the card callout.

Our design team’s main project goals:
TopShield's Homepage design displayed across responsive breakpoints from small to extra-large.

Process

To begin the redesign process, our creative team brainstormed and iterated several possible design and content structure directions for the landing page. With these iterations, we went to the stakeholders and presented our potential design directions. Based on their feedback, we consolidated the iterations down to one draft. Once approved, we began fine-tuning the design by further structuring the page’s content hierarchy and visual direction.

A branch locator featuring a map embed and sample search showing locations near Dallas, Texas.
A detailed specifications chart highlighting a featured product.

Keys of our Design Direction

Highlight Important Site Content

The original landing page was lacking detail on TopShield’s brand offerings. With this in mind, we created a content block at the top of the page that called out each TopShield brand offering. Each brand callout also includes a small blurb about the brand followed by a clickable link to learn more about the brand and to view product offerings.

A product catalog call-out with download functionality.

Emphasizing Brand Strengths

To further highlight the brand’s strengths, we created a simple four card callout with short descriptions that showcase the brand’s distinctiveness. For example, two of TopShield’s main selling points are it’s sustainability and affordability. With this in mind, we highlighted these two features in the card callout.

A card callout with product documentation links.

Scroll Inside ->

Scroll Inside ->

Scroll Inside

Interested in working with Jossi®?

Schedule a discovery call to learn more

Book A Call

More Projects:

Lahlouh Website RedesignLahlouh Website Redesign
Web Design & Development
Brandbox & Shopify DevelopmentBrandbox & Shopify Development
Web Design & Development