Overview The Problem Research & Discovery Design System Final Design Results & Impact Retrospective

Timothy Grant Jewelry: Website Redesign & Visual Identity Refresh

Rebuilding a family jeweler's digital presence to match the quality of their craftsmanship.

Overview

A full end-to-end website redesign for Timothy Grant Jewelry, a family-owned boutique jeweler with two Illinois locations specializing in award-winning custom jewelry, fine jewelry, and expert services. I led competitive research, persona development, IA restructuring, visual identity creation, and high-fidelity design across a 6-page responsive web system.

Role

Lead UX Designer: led competitive research, persona development, information architecture, visual identity, and high-fidelity design across a 6-page responsive web system.

Team

Leigh Arriane Buendia, Pamela Olalia, Dani Guerrero

Timeline

3-4 weeks

Platform

Responsive web (desktop-first, mobile-optimized)

Tech Stack

Figma

Case Study

Full

TL;DR

The Problem

The existing Timothy Grant website felt dated and minimal. The homepage showed a single product image on a white background, no value proposition, no calls to action, and no indication of the full range of services the business offered.

No brand presenceThe old logo was a casual script mark that didn't convey luxury or trust. The site had no consistent color palette, typography, or visual language.

Poor information architectureThe Fine Jewelry page was organized by brand name (Royal, Stuller, Triton, Venetti) rather than by product category: a structure that served the business's inventory logic but not the customer's shopping behavior.

Buried servicesOfferings like custom design, repairs, acquisitions, and appraisals were listed as text-heavy pages with no visual hierarchy or clear CTAs. The custom jewelry process was reduced to a small numbered list, making an already intimidating experience even harder to approach.

No conversion pathwaysNo booking system, no appointment scheduling, and no prominent contact mechanism beyond phone numbers in the sidebar. The only interactive element was an empty shopping cart.

Competitive disadvantageLocal competitors like Studio D Jewelers and Rahl Jewelers had more visually polished websites with clearer service presentation, better mobile responsiveness, and stronger engagement features.

The business needed a refreshed, user-focused website that would establish credibility, surface its full value proposition, and convert browsers into consultation bookings and store visits.

Research & Discovery

I conducted structured research across three areas: a competitive audit of local jewelers, persona development based on business goals, and information architecture restructuring to align the site with user behavior.

Competitive Analysis

I audited two direct local competitors: Studio D Jewelers and Rahl Jewelers, across six dimensions: visual design and branding, navigation and IA, content and messaging, service presentation, technical performance, and engagement and conversion.

Studio D JewelersMore modern visual identity and strong storytelling, but navigation was overwhelming, a dense multi-level accordion menu confused the hierarchy. CTAs were inconsistent, no above-fold CTA on the homepage, and certifications or social proof were absent.

Rahl JewelersStrong craftsmanship content and transparent service listings, but visual design felt dated. Photography was inconsistent, typography mixed serif and sans-serif without purpose, and booking features were buried deep inside product pages.

Visual Design & Branding

EvaluatedModern vs. outdated lookPhotography quality (jewelry close-ups, lifestyle shots)Typography and color palette alignment with "luxury"

+Visual design and branding feels modern.

–Still holds some outdated qualities, design may not fully reflect luxury/modern UI standards compared to top competitors.

–Branding consistency could be improved (logo, fonts, and imagery may not feel fully cohesive).

+Jewelry photography is good and high-quality.

–Photography isn't uniform across the site, the homepage uses different backgrounds.

+Jewelry photography on the shop page is uniform.

–Typography is a mix of serif and sans-serif without a clear purpose.

Navigation & Information Architecture

EvaluatedEase of finding services (Custom Jewelry, Ready-Made, Repairs, Sell Gold/Silver/Platinum)Use of categories, dropdowns, or search functionality

–Navigation sits in the upper right as a hamburger menu, so it's hard to immediately see the other pages.

–Side navigation is overwhelming, there are a lot of items.

–Clicking the plus sign behaves differently from clicking the text, the plus opens sub-navigation while the text redirects to another page, which is confusing.

–Lacks optimized pathways for key services.

Content & Messaging

EvaluatedHow they communicate trust and expertiseHighlighting of unique selling points (craftsmanship, certifications, guarantees)Storytelling (brand history, craftsmanship process)

+Communicates trust and expertise clearly on the About page.

–You have to go looking for that trust and expertise on the site.

+Mentions appointment options, and services are easily enumerated on the homepage.

+Has a testimonials section.

–No certifications.

+Storytelling on the About Us page.

+Craftsmanship process shown on some pages (e.g., Custom Jewelry).

–Strong sections (storytelling, craftsmanship) are buried deep in the pages, at least a homepage summary would help highlight these strengths.

Service Presentation

EvaluatedClear explanation of services (custom design, repair, appraisal, buying jewelry)Calls-to-action for inquiries and appointments

+Services like custom design, repairs, and appraisals are listed.

–Calls-to-action (e.g., "Book Consultation," "Get a Quote") aren't strong or consistent.

–CTAs aren't highlighted much, they use in-text buttons instead of eye-catching solid buttons.

–No CTA in the first section of the homepage.

Technical Aspects

EvaluatedMobile responsivenessSite speed & performanceAccessibility features

+Mobile responsive.

+Good performance and speed.

+Accessible, can use tabs to navigate pages.

Engagement & Conversion

EvaluatedContact forms, live chat, or booking featuresSocial proof (testimonials, reviews, press mentions)Promotions or incentives (e.g., free appraisal, seasonal sales)

+Live chat is immediately visible on every page, it's fixed and easy to use.

+Has social proof (testimonials, blogs, etc.).

–No promos or incentives.

–Booking CTAs aren't consistent in design (some are in-line, some are solid buttons).

–Weak CTAs could affect lead generation.

Visual Design & Branding

EvaluatedModern vs. outdated lookPhotography quality (jewelry close-ups, lifestyle shots)Typography and color palette alignment with "luxury"

–Visual design may appear dated compared to modern jewelry competitors.

–Branding may lack luxury cues (premium fonts, subtle color palette, high-quality lifestyle photography).

–Photography isn't consistent or uniform, pieces give a very different vibe from each other.

–Some images are low quality.

–Typography is very basic and doesn't say "luxury".

Navigation & Information Architecture

EvaluatedEase of finding services (Custom Jewelry, Ready-Made, Repairs, Sell Gold/Silver/Platinum)Use of categories, dropdowns, or search functionality

+Navigation is very easy to look at and use, it's not overwhelming.

+Services are very well enumerated and easy to find.

+Functionalities to navigate through different pages are easy to use (search, nav, etc.).

Content & Messaging

EvaluatedHow they communicate trust and expertiseHighlighting of unique selling points (craftsmanship, certifications, guarantees)Storytelling (brand history, craftsmanship process)

+Immediately communicates trust and expertise on the homepage through storytelling.

–Storytelling could've lived on the About page with only a skimmable paragraph on the homepage.

+Shows store address and images, which really build trust.

+Has a craftsmanship process.

–Craftsmanship process is hard to read and find, it's just one paragraph and needs more visuals to be engaging and understandable.

Service Presentation

EvaluatedClear explanation of services (custom design, repair, appraisal, buying jewelry)Calls-to-action for inquiries and appointments

+Explanation and enumeration of services are clear.

+Core services such as jewelry sales, custom design, and repairs are listed.

–Service pages may lack depth and persuasive CTAs (e.g., "Schedule Your Consultation," "Request a Repair").

–CTAs aren't visible on the main pages, you have to go inside the product to see them.

–No clear CTA on the homepage.

Technical Aspects

EvaluatedMobile responsivenessSite speed & performanceAccessibility features

+Mobile responsive.

+Good performance and speed.

+Accessible: can use tabs to navigate pages.

–Some sections aren't great on mobile or are too small (like the hero section).

Engagement & Conversion

EvaluatedContact forms, live chat, or booking featuresSocial proof (testimonials, reviews, press mentions)Promotions or incentives (e.g., free appraisal, seasonal sales)

+There's a contact form.

+Has booking features such as "Schedule a Visit" and "Ask a Question."

–Booking features like "Schedule a Visit" and "Ask a Question" are deep inside the products page, not easily seen.

–Not much social proof.

–No promos or incentives.

–Calls-to-action may be weak or inconsistent across pages.

–Limited lead-generation tools (online booking, live chat, inquiry forms).

Key competitive opportunities

—Neither competitor combined strong visual branding with intuitive navigation and clear conversion pathways.

—Neither had an integrated online booking system, both relied on phone calls.

—Opportunity to differentiate through a transparent, step-by-step custom design process that builds trust before the first visit.

—Social proof, certifications, and team credentials were underutilized across the competitive landscape.

User Personas

I developed three personas representing Timothy Grant's core customer segments. Each maps directly to a primary page and user flow in the redesigned site.

"Custom Jewelry Jane", 30Marketing Manager, Chicago. Planning her engagement and wants a one-of-a-kind ring. Needs a visual process walkthrough, a gallery of past custom work, and easy consultation scheduling. Afraid of hidden costs. Maps to the Custom Jewelry page.

"Luxury Buyer David", 47Corporate Lawyer, Lake Zurich. Buys luxury gifts with limited time. Needs clear category browsing, pricing transparency, and a fast contact path to reserve items. Maps to the Fine Jewelry shop.

"Repair & Resell Linda", 64Retired Teacher, Schaumburg. Needs repairs, resizing, or wants to sell old pieces. Searches desktop for local jewelers and reads reviews before choosing. Needs jeweler credentials and clear booking instructions. Maps to the Services page.

Information Architecture

Using insights from the competitive audit and persona scenarios, I restructured the site's navigation from a 5-page flat layout to a more intentional 6-page hierarchy, with a new Wishlist feature ensuring every persona had a clear entry point from the homepage.

Before: 5-page flat navWelcome, Custom Jewelry, Fine Jewelry, Services, Hours & Locations, organized around the business's internal structure, not customer behavior.

After: 6-page intentional hierarchy + WishlistHome, Custom Jewelry, Fine Jewelry, Services, Contact, My Likes, each page maps directly to a persona's primary goal, with cross-sell paths between them.

Home

Hero + Value Prop

Featured Collection Carousel

Custom Jewelry CTA

Fine Jewelry CTA

Services Overview

Boutique Visit Prompt

Custom Jewelry

Consultation CTA

4-Step Process

Custom Creations Gallery

Fine Jewelry Cross-sell

Fine Jewelry

Category Filters

Price Range Slider

Product Grid

Wishlist Hearts

Services

Repairs

Acquisitions

Appraisals

Contact

Booking Calendar

Location Selector

Appointment Type

Contact Form

My Likes

Saved Products Grid

Ideation & Design System

Before diving into page layouts, I developed a cohesive visual identity system, colors, typography, logo, and components, to ensure consistency across all pages and give the team a shared foundation for high-fidelity design.

Visual Identity

The original branding used a casual handwritten script on a white background with no supporting visual system. The redesigned identity communicates luxury, warmth, and approachability, premium without feeling cold or exclusive. The warm, earthy palette is a deliberate departure from the black-and-white or navy-and-gold palettes common in luxury jewelry, evoking the warmth of gold and handcraftsmanship central to Timothy Grant's brand story.

Deep Espresso#352500

Charcoal#494743

Olive Gold#5E5134

Warm Stone#97938B

Soft Cream#F2EBDC

TypefaceCormorant Garamond

Display48px · Bold

Award-Winning Custom Jewelry

Heading32px · Semibold

Book Your Free Consultation

Subheading24px · Medium

Crafted with Purpose

TypefaceFigtree

Subheading18px · Semibold

Fine Jewelry & Custom Designs

Body16px · Regular

Fine jewelry from curated brands, handcrafted with care.

Label14px · Medium

Rings · Necklaces · Earrings · Bracelets

Component Library

Components were built and documented in Figma before page design began, ensuring consistent patterns across the full site.

—Product cards with hover states and wishlist heart icons

—Navigation bar with active state styling

—Announcement marquee bar

—CTA button styles (filled and outlined)

—Category filter pills

—Price range slider

—Booking calendar components

—Comprehensive footer with multi-column layout

Final Design

The redesign spans 6 pages plus a wishlist feature, each built around a specific persona's journey. Every page was designed desktop-first with mobile-optimized counterparts.

Homepage

Rebuilt from a single-product placeholder into a full storytelling experience. A full-bleed hero image with a scroll-down prompt sets the tone, followed by a 'Featured Items' carousel with category tabs, editorial-style entry points to Custom and Fine Jewelry, a services snapshot, and a boutique visit section with hours and directions.

Custom Jewelry Page

Designed to address Custom Jewelry Jane's core need: understanding the process before committing. The hero leads with "Award-Winning Custom Jewelry by Timothy Grant" and a "Book Your Free Consultation" CTA. The 4-step process is a visual walkthrough with photography and copy, followed by a secondary CTA and a filterable gallery of past custom work.

CollaborateShare your vision, inspiration, and budget in a free consultation, in-store or remotely.

VisualizeOur designers produce detailed sketches and 3D CAD renderings for your approval.

RefineReview a physical wax model or prototype before final production begins.

CraftYour piece is handcrafted to the approved design and delivered with certification.

Fine Jewelry Shop

Completely restructured from brand-organized to user-organized. A left-sidebar filter panel lets users browse by jewelry type, adjust a price range slider ($1,200–$5,000), and sort results. Products display in a clean 4-column grid with consistent photography, item names, prices, and wishlist hearts, directly serving Luxury Buyer David's need to quickly find, compare, and save.

Before: organized by wholesale brand (Royal, Stuller, Triton, Venetti)Reflected the business's inventory logic. Customers searching for 'rings' had no way to filter by product type.

After: organized by product category with price filtering and sortAligns with how customers actually shop: by jewelry type and budget, not by the name of a wholesale supplier they've never heard of.

Fine jewelry shop page with sidebar filters

Services Page

Transforms three text-heavy sections into a visually structured experience. Each service leads with credentials and specific offerings, and every section ends with a clear CTA.

RepairsLed with 35+ years of combined jeweler experience. Enumerates specific services:ring sizing, stone replacement, prongs and clasps, soldering, watch batteries, with custom icons and a 'Call to Book' CTA.

AcquisitionsTwo-column layout pairing an image with persuasive copy about selling or redesigning old pieces, with a clear CTA to visit or contact the store.

AppraisalsHighlights Graduate Gemologist Heidi's credentials and lists what each appraisal includes, building trust through expertise and transparency.

Contact & Booking Page

Where all three personas converge. A two-column layout: the left column provides quick-reference info (email, hours, both locations with phone and directions), while the right column houses the full booking flow: calendar date picker, time slot selection, location and appointment type dropdowns, and a contact form. This replaces the old phone-only system with 24/7 self-service lead capture.

My Likes (Wishlist)

A new feature that didn't exist on the original site. Users can heart products across the shop and custom jewelry pages, then view all saved items in a dedicated grid. Serves David's 'browse and shortlist' behavior and Jane's inspiration-gathering phase, while giving the business insight into which products generate the most interest.

Results & Impact

This project is currently in progress and has not yet launched, so quantitative performance data is not yet available. The redesign was built to address specific, measurable outcomes based on the competitive gaps and user needs identified during research.

Projected impact across five key dimensions:

Increased consultation bookingsThe integrated booking calendar replaces a phone-only system, removing a major friction point for all three user segments, particularly younger demographics like Jane who prefer self-service scheduling.

Improved service discoverabilityRestructuring the homepage to surface custom jewelry, fine jewelry, and services as distinct entry points should increase engagement with secondary pages like Repairs and Appraisals.

Stronger competitive positioningThe redesign addresses every weakness identified in Studio D and Rahl's online presence: consistent branding, intuitive navigation, transparent process communication, plus introduces features (wishlist, booking calendar) neither competitor offers.

Higher product engagementCategory-based browsing with filtering replaces brand-organized listings, aligning the shopping experience with how customers actually search: by product type and price, not wholesale brand.

Brand credibility upliftA cohesive visual identity system replaces an inconsistent, outdated presentation, positioning Timothy Grant's digital presence to match the quality of their in-store experience.

Retrospective & Learnings

Leading with competitive analysisGave the team a shared understanding of the landscape and made design decisions easier to justify, every choice could be traced back to a gap or opportunity in the market.

Three-persona frameworkKept the team aligned on who each page was for, preventing scope creep and ensuring every feature served a specific user need.

Design system before page layoutsDeveloping colors, typography, and components first created consistency across the full site and made the team more efficient during high-fidelity design.

What I'd do differently: earlier user testingPersonas were informed by business goals and competitive research, but validating assumptions with actual Timothy Grant customers before moving to high-fidelity would have strengthened the design rationale.

What I'd do differently: full e-commerce checkoutProject scope excluded a complete purchase flow. In a future phase, I'd advocate for integrating checkout to serve David's quick-buy behavior and capture revenue directly from the site.

Next Project

ASL AR Glasses