Victrola
A single product page that grew into a digital brand system for an American icon.
Victrola's record players have been part of American homes for generations. Working alongside Bighorn Web Solutions, our team at TechGrayscale was brought in to redesign one page: the product page. It launched in 2025, and Victrola asked us to carry its look across the site, page by page, until the work added up to a modular system that now defines the brand online.
- Client
- Victrola
- Agency
- TechGrayscale
- Partner
- Bighorn Web Solutions
- Role
- Creative Lead
- Scope
- Product page, home, about, contact, support, holiday, comparison, icon library
Start with the page that sells.
The product page came first and set the rules for everything after. Scroll to read it the way a shopper does.
- 01
A buy box that answers first
Price, finish, rating and an extended warranty, all above the fold.
- 02
The cart follows you
Past the fold, Add to cart and section links pin to the bottom.
- 03
Story before spec sheet
Features, editorial chapters and a gallery carry the product.
- 04
Specs fold away
Specifications, reviews, FAQ and downloads collapse into tidy drawers.
1906 – 2026
Years of history, barely mentioned.
Victrola has been making music at home since 1906, yet the old site sold its record players like any other electronics. We wanted the heritage back at the center, not only in the words but in the look: imagery, texture, color and type. With a tight budget and little photography, we started with the page that sells and built modules the rest of the site could share.
The home page set the kit.
Home launched right after the product page. Most of what's on it became modules the rest of the site reused. Hover the screen to take over the scroll, and open a marked module to see where else it went.
Built once, used everywhere.
Support, Holiday and About were mostly a matter of recombining what Home had already proved. Each module beside the pages that picked it up.
Product hover
Lifestyle shots in the hero grid double as product links. Hover a photo and its product card slides in, with price and a way to shop, without leaving the grid. Hover the panel to try it.
Scroll color reveal
The intro paragraph fills in word by word as it moves up the page, so reading speed follows scroll speed. Hover the panel and scroll to drive it yourself.
For 120 years, Victrola has shaped how we experience sound—today blending analog warmth with modern design to bring richer, more intentional listening into every space.
Card slider
Products, stories or listeners in one row. Built for Home, then picked up by the PDP and Holiday.
Textured band
Dark Cotton behind a feature. Home first, then About and Holiday.
Split hero
Photo one side, a job the other. Retooled for Support search and the Holiday gift guide.
Loyalty band
Sits above every footer on the site.
| Model A | Model B | Signature | Model D | |
|---|---|---|---|---|
| WHY CHOOSE | The easy start | More connections | The full experience | Built for streaming |
| Core Experience | ||||
| Speeds | 33 / 45 | 33 / 45 | 33 / 45 / 78 | 33 / 45 |
| Cartridge | Ceramic | Ceramic | Audio-Technica | Audio-Technica |
| Connectivity | ||||
| Bluetooth out | — | ✓ | ✓ | ✓ |
| Wi-Fi streaming | — | — | ✓ | ✓ |
Help them pick the right one.
Victrola wanted shoppers to see why a higher-tier model is worth it. The comparison leads with "Why choose this model?" before the specs, with the top model as the upgrade anchor. Simple features read as ✓ or —, real specs show their value, and on a phone you compare one model with one other.
Heritage you can see. Four pieces, filed like records in a crate. Each one opens to a section below.
Texture as a visual material.
Cotton, Snow and Denim come from the fabrics and finishes of the record players. Each is paired with photography of the same feel, and laid behind sections and cards, so even a plain page feels made, not printed.
Denim behind a product card, phone in hand.
Macro lens, shallow focus on the weave where it meets the card edge. Warm window light from the left.
A palette with a little warmth.
Pulled from the products themselves: the black of a record, the silver of a tonearm, and one new blue the team fell for. Tile size hints at how much of each color the site uses.
Record Black
PrimaryNeedle Blue
New · AccentVinyl White
GroundPressed Gray
SecondaryGold
CTA only231F20769BAD6E6E6EBCBEBFF9CC46
Less type. More listening.
One family, four sizes.
When marketing ruled out serif headlines, we didn't add another typeface. Helvetica carries everything, and hierarchy comes from weight, case and space, so the products and the story stay loudest.
48 / 110% · 0%
28 / 140% · 0%
18 / 100% · Caps · +20%
14 / 150% · 0%
Gold on Record Black
Light 300 · display
Regular 400 · statements, body
Bold 700 · labels, actions
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & $ / | % —
Four sizes, one family
A small vocabulary for features and help.
Drawn in Needle Blue at three sizes, shown here at actual size: 54px for the big signposts on Contact and Support, 32px for support topics, 16px for product features. Thin strokes, rounded ends, the same corner radius throughout.
One page became a system.
Every release, in order.
Desktop and mobile prototypes presented to Victrola's team; approved the following week.
The new product page goes live, and Victrola asks to carry it across the site.
Victrola launches the home page ahead of schedule, at its own request.
Approved and rolling out on the same modules, plus a full icon library.
One template for every gifting season, built for Black Friday.
The product family comparison, partner-approved and headed to Victrola.
Thanks forlistening.
Credits
Design
Creative Lead, TechGrayscale
Build
Bighorn Web Solutions
Pressed
2025 – 2026
MOCKUP NOTES — Headlines are KLH-size (16/800); the big track numbers carry the scale and change position every chapter. Images marked "export pending" still need Tech Support and Holiday from Figma. Milestone dates come from the project channel.