Quinn Kessler
← All work Co-op · Website · SEO · Digital marketing

Universal Marble & Granite

A kitchen and bath showroom on Lehigh Ave sells in person. The website’s job is to get homeowners and contractors to call, visit, or ask for a quote. I designed and built it, made it findable, and kept it stocked with content for six months.

Role
Digital Marketing Specialist Co-op
Timeline
March – September 2026
Scope
Design, front-end build, SEO, analytics, social
Built with
HTML, CSS, JavaScript, Vercel, Google Analytics · Live site · Code
phillyumg.com
phillyumg.com homepage hero: Quality Kitchen and Bath Design over a marble kitchen
The homepage opens on a full-screen kitchen walkthrough video under the headline.
By the numbers
7Pages: home, about, cabinets, countertops, finishes, gallery, slab warehouse
160+Lazy-loaded project and product images
36Slabs across 14 styles in the sale module
5States served: PA, NJ, DE, NY, MD

01 · The site

A showroom you can browse from the couch

UMG serves homeowners in the middle of a renovation, and the contractors and developers working on their projects. They want to see finished kitchens, compare materials, and know where to go next. So the site is built around three things: real project photos, catalogs that are easy to scan, and a phone number that is never more than a scroll away.

The visual language borrows from the showroom itself: warm stone neutrals, a deep brown for contrast, serif headlines for a premium feel, and generous photography.

phillyumg.com/#services
UMG services section with three photo cards
Services as three photo cards, each leading into its catalog.
phillyumg.com/#about
Why choose UMG section with four value points
Four reasons to choose UMG, set against real installs.
phillyumg.com/cabinets
Cabinets page header with filter pills
Cabinets: filter pills jump between the Forevermark, European and 21st Century lines.
phillyumg.com/gallery
Masonry project gallery
Gallery: 60 project photos in a masonry grid with a full-screen viewer and arrow-key navigation.
phillyumg.com/#granite-sale
phillyumg.com granite sale section with a swatch preview open
The summer granite sale module, with a slab preview open.
phillyumg.com/cabinets#traditional
Grid of cabinet door styles with names
Each door style as a labeled swatch card, so a customer can screenshot and bring it to the showroom.

02 · Interaction

Show the slab, not just its name

For the summer granite sale, a list of names like “Gris Mandariz” meant nothing to most visitors. I turned each style into a chip with a slab count, and hovering, focusing or tapping one previews the stone. Below is a working rebuild using the same photos and counts.

Limited-time inventory sale

All remaining granite, $35/sq ft

14Colors
36Slabs
$35Per sq ft
Black Pearl Polished Leather granite slab
Black Pearl Polished Leather · 2 slabs

Try it: hover or tab through the styles. On the live site the preview floats under the chip on desktop and opens inline on phones.

03 · Mobile

A lot of UMG’s audience finds it through Instagram, so the site had to work just as well on a phone. Navigation collapses into a menu, sections stack, and the call button stays large enough to hit with a thumb.

Mobile homepage hero
Mobile homepage granite sale
Mobile navigation menu open
Mobile gallery page

04 · Under the hood

Making it findable

A good-looking site still has to show up when someone near Philadelphia searches “granite countertops.” This is the code that does that work. Every snippet below is from the live site.

05 · Social

Feeding the site every month

The website was one channel. The rest of the job was giving people a reason to visit it: monthly content calendars, carousels, Stories, Reels and print, all in the same warm, editorial voice as the site.

phillyumgPhiladelphia, PA1/12
  • Shaker Collection, slide 1: Shaker Collection cover
  • Shaker Collection, slide 2: Homestead Oak
  • Shaker Collection, slide 3: Champagne Maple
  • Shaker Collection, slide 4: Blaze Black
  • Shaker Collection, slide 5: Xterra Blue
  • Shaker Collection, slide 6: Vista White
  • Shaker Collection, slide 7: Woodland Brown
  • Shaker Collection, slide 8: Lait Grey
  • Shaker Collection, slide 9: Nova Grey
  • Shaker Collection, slide 10: Greystone
  • Shaker Collection, slide 11: Ice White
  • Shaker Collection, slide 12: Pepper

Shaker Collection · 12 slidesCabinet carousel: one door style per slide, each named on a full-bleed kitchen photo so a scroller can save the one they like.

Swipe, use the arrows, or focus a carousel and press the arrow keys.

Reels

Scripted and produced for Instagram. Tap to play with sound.

We handle the processBefore-and-after remodel reel, 28s
Summer granite salePromo reel for the $35/sq ft sale, 16s
Showroom skitComedic sketch with the team, ending on the brand line “Your dream kitchen isn’t far away,” 37s

Campaigns

Every promotion went out as a set: a feed post, a Story and a matching graphic.

Print & merch

A direct-mail postcard for homeowners and crew shirts, built from the same type and color as the site.

  • Content calendarsPlanned monthly social calendars and 7-day Stories plans, with captions in UMG’s voice.
  • CommunityAnswered comments and DMs and routed homeowner questions to the showroom team.
  • AnalyticsMonitored site performance in Google Analytics and used it to decide which pages and posts to update.

06 · Showroom mural

The brand, off the screen

I also designed and hand-painted a UMG mural above the doorway in the showroom. Each letter is cut from black-and-white Philadelphia imagery, with the Liberty Bell in the G.

Painted in place above the showroom doorway.
The artwork, inverted from the painted version.

07 · Takeaways

Owning a real business’s site end to end, with real customers on the other side of it, taught me four things.

Design for the actual visitor. People shopping for a kitchen want to see finished kitchens. That decided the photo-first layout more than any style preference did.

The invisible work matters. Meta tags, structured data and a sitemap don’t show up in a screenshot, but they are a big part of whether a local business gets found.

Consistency compounds. Keeping the site, the feed, the Stories and the mailer in one visual system meant every piece pointed back to the same brand.

Small interactions sell. The swatch preview is a few lines of JavaScript, and it turned a list of stone names into something people could actually choose from.

Next: Delta Sigma Phi →