SVG Parts Diagrams

Parts diagrams were an important part of the old Brownells site. Originally displayed using JPGs with area maps they were tedious to maintain, low resolution, and did not scale well.

For the updated Brownells site I suggested redrawing them in vector and saving them as SVGs. This scalable format brought advantages like looking crisp at both small mobile and large desktop displays and even when printed. SVGs also allow for Javascript interactivity to assign CSS styles to individual parts or groups of parts highlighting.

Below is the initial proof of concept test diagram.

Bolt Assembly 1a Firing Pin 10 Bolt Carrier 1 Cam Pin 11 Gas Key Screws 14 Gas Key 13 Retaining Pin 12 Gas-Rings 9 Bolt 2 Extractor 3 Extractor Spring 4 Extractor Pin 8 Ejector Roll Pin 7 Ejector Spring 6 Ejector 5

Here’s how they have been incorporated into the pages with products shoppable once a part has been selected. In total 19 diagrams have been redrawn so far. Try it on brownells.com here.

Sight Height Calculators

These small interactive calculators help users determine the correct height for front or rear sights. Originally appearing on Brownells.com as small Shockwave apps, I was tasked with recreating them in HTML with form inputs and JavaScript. The diagrams are SVGs with HTML overlays for the text and measurement displays. Try them below.

 

Front Sight Height

Measure barrel outside diameter at Rear Sight Base.

Measure the Rear Sight Height.

Measure barrel outside diameter at Front Sight Base.

The Front Sight Height should be:

– . — Inches

2: Rear Sight Height

0.000″

Calculated Front Height:

—–

1: Barrel Diameter
At Rear Sight

0.000″

3: Barrel Diameter
At Front Sight

0.000″

 

Rear Sight Height

Measure barrel outside diameter at Rear Sight Base.

Measure barrel outside diameter at Front Sight Base.

Measure the Front Sight Height.

The Rear Sight Height should be:

– . — Inches

3: Front Sight Height

0.000″

Calculated Rear Height:

—–

1: Barrel Diameter
At Rear Sight

0.000″

2: Barrel Diameter
At Front Sight

0.000″

Brownells Timeline v2

The Brownells Timeline was originally put together to celebrate their 75th year as a company. I worked with the open-source timeline framework called TimelineJS customizing the look and content. That version was completed while I worked at an agency and existed under it’s own url for several years.

Working at Brownells I was tasked with moving it in-house to their website. It was fun to revisit the project for updating and modifying the look to more closely match the current site. It also involved placing it inside the Optimizely CMS. The timeline not only is informative for customers but also used as an orientation tool to familiarize new hires with Brownells’ long history.

Timeline splash screen.

This is the original look of the timeline from when it was displayed as a microsite under it’s own URL.

Brownells Main Event

This promotion was created around the concept of a boxing fight card. Two products from a specific category faced off daily for five days. It relied heavily on social platforms to drive traffic to the landing page where users compared the product stats and followed a link to vote on their favorite. Votes were tallied at the end of the day and the winner received a discount code the following day.

Main Event landing page day 1
Main Event landing page day 2
Main Event landing page day 3
Main Event landing page day 4
Main Event landing page day 5
Main Event landing page day 6