JLR Gear
Consumer products, California and Shanghai
Overview
The company and my role
JLR Gear designs and makes consumer products for US retail, from car accessories and outdoor gear to gaming, phone mounts and grilling tools, sold through stores such as Kohl’s, Target, Walmart, The Home Depot and Lowe’s. In late 2020 the company asked for a new website that put the products first. I designed the site and built it in WordPress, with a page for every product. It went live in March 2021 and still runs today.
from one template
in the menu
for the house brands
in Sketch
My Responsibilities
Design and build
The website, from the client’s brief to the last product page.
Products, Brands, B2B, Merchandising, About and Contact in one top bar, with the eight categories and five brands in drop-downs.
Eleven page designs in Sketch, from the home page to B2B and Contact.
One template for every item, with a gallery, key features, downloads and related products.
Line icons for the key features, so each product page explains the item at a glance.
A page for each house brand, with its photo, tagline and a strip of its products.
Built in WordPress, so the team adds products and brands without a developer.
Brand in the site
Logo, color and type
The site takes its look from the JLR Gear logo, a blue G mark beside a gray wordmark. White pages carry the products, a charcoal footer closes every page, and Ubuntu sets all the text.
Logo
Logo on white
Logo on charcoal
The G mark on JLR Blue
Color
The G mark, the active menu item and slider dots
The footer that closes every page
Headings, text and the wordmark
The product menu and light panels
Pages and product cards
Typography
Ubuntu sets every word on the site: Bold for the category and brand headlines on photos, Medium for product names, section titles and the menu, Regular for taglines and text, Light for the small print.
UI components
Navigation and the product menu
Category tile on the home page
Mission item with icon
Product page header: gallery, title and key points
Key features with line icons
Related products slider
Brand product strip
Brand tagline row
Customer logos
Call to action
Footer
From brief to site
What the client asked for
The client sent a short brief in December 2020. Each point became part of the new site.
Products and Brands menus replaced Home and Downloads, with all eight categories one click away.
The video sits in a shorter hero, followed by a grid of category photos that name the category and say what is in it.
Products on white cards with their type and name, so a category reads at a glance.
One product template with a gallery, key features with icons, downloads and related products.
Five brand pages, Connect added and Fitness Nation and Fun Gear removed, each with a slider of its products.
Home page
Products first
A short video hero, then a grid of lifestyle photos, one for each category, and the company’s mission in four parts: innovation, design, quality and service.
Home page
Categories and products
131 product pages
Each category opens on a grid of product cards. Every product has its own page from one template: gallery, key features with icons, instructions to download, and related products.
Category page, Auto (as built)
Product page
Brand pages
Five house brands
Each brand gets a lifestyle photo, a line of five words, a photo grid and a slider of its products.
Smart Gear
Road Trip
Smartech
Connect
Grilling Traditions
Company pages
B2B, Merchandising, About, Contact
Pages for retail buyers: what JLR Gear offers as a partner, how it merchandises products in store, who the company is and how to reach it.
B2B
Merchandising (page design; the packaging and displays shown are the client’s)
About
Contact
On the phone
The site as built, on a phone
Every page reflows to one column, with the menu behind a single button.
Home
Menu
Category
Product
Brand page
About
Contact
What JLR Gear gained
Outcomes of the work
A website that shows the products first.
Every item sits in one of eight categories, two clicks from the home page.
131 product pages from one template, with features, gallery and downloads.
Five brand pages, including Connect, which had no page before.
Built in WordPress, live since March 2021 and still in use.
Thank you!
Have a project in mind?
Let'stalk