Employer
Tinting Chicago
Art Director
UX/UI Designer
UX Research & Strategy
Information Architecture
Art Direction
UI Design & Prototyping
Asset Production
Duration
1 year
Team
12 people
Results at a Glance
Conversion Rate
31% ↓
Bounce Rate
Time on Site
Pages Redesigned
Tinting Chicago dominates the local market with strong organic traffic, but the legacy website was failing to convert visitors. The user experience was blocked by three core issues:
Overly complex navigation
Unclear service hierarchies
Outdated aesthetics that undermined trust
The Challenge
Modernize the brand and fix the conversion flow—without breaking the site's #1 SEO rankings that took years to build.
Fix the Information Architecture: Untangle complex navigation to reduce cognitive load.
Clarify the Value: Make high-margin services (like Paint Protection) visible and easy to understand.
Protect SEO Equity: Ensure all UX and structural changes adhere to strict SEO guidelines to maintain organic traffic volume.
Modernize Brand Perception: Elevate the visual identity to reflect the company’s status as a premium market leader.
Drive Conversion: Remove friction from the "Get a Quote" flow to capture more leads.
UX Research & Discovery: Conducted user interviews and card sorting sessions to identify pain points and inform the new information architecture.
Information Architecture: Designed the sitemap, navigation structure, and user flows—balancing SEO requirements with user logic.
Art Direction: Defined the visual style, mood, and quality standards for the design team.
UI Design: Created UI concepts to communicate direction to the team. Designed new pages post-launch as the site expanded.
Asset Management: Directed all photography and video shoots. Set up DAM system to manage assets across 380+ pages.
Cross-Functional Coordination: Worked with PM and SEO team to align design decisions with business metrics and technical constraints.
Through user interviews, I discovered that people didn't understand the difference between "wrapping" and "tinting"—and text-heavy pages weren't helping. Profitable services like Paint Protection Film were being overlooked because they were buried in navigation.
The insight: users don't want to read about film technology. They want to see the difference.
Profitability Gap: High-margin services were hidden, leading to missed revenue.
Knowledge Gap: Users struggled to understand technical differences, causing hesitation.
To close these gaps, we focused on visual education over text explanations:
Centralized Service Catalog
Implemented a centralized service catalog menu. This intuitive navigation feature provided users with a clear overview of all services offered, enhancing accessibility and navigation efficiency.
Interactive Visualizers
We developed multiple visualizers tailored for different services. These tools allowed users to interactively explore and understand the nuances of each service, fostering better informed decision-making.
The strategic shift to visual tools delivered immediate results:
Increased Visibility: Traffic to previously 'hidden' services saw a measurable uptick.
Better Informed Users: The visualizers reduced customer confusion, leading to higher quality inquiries.
Streamlined Navigation: The centralized catalog successfully reduced the clicks required to find specific services
This initiative not only addressed user education challenges but also contributed to enhancing overall user experience and increasing engagement with less recognized but highly profitable services.
We didn't guess, we tested. I ran multiple rounds of usability testing to validate the navigation structure and visualizer concepts.
Key Insight
Early tests revealed users were confused by industry jargon like "Ceramic IR" and "Carbon Film." I used this data to push for plain-language labels ("Maximum Heat Rejection," "Best Value"), ensuring the final design was intuitive for non-technical users.
Key Findings That Changed the Design
Finding 1:
Users missed the quote button
5 of 8 test users couldn't find the CTA on mobile.
→ Solution: Added sticky bottom bar. Mobile quote requests +67%
Finding 2:
Service names confused users
"Ceramic IR" meant nothing to regular customers.
→ Solution: Added benefit subtitles. Service page bounce rate -24%
Finding 3:
Gallery lacked context
Users loved photos but asked "what tint shade is that?"
→ Solution: Added overlay labels. Gallery-to-quote conversion +31%
The site required 380+ unique pages, and stock photos wouldn't cut it—they don't show real tint shades accurately, and competitors used the same images.
What I Produced
300+ original photos across all service types
8 product videos showing installation process
To manage this volume, I set up a DAM (Digital Asset Management) system organized by service type, vehicle model, and tint shade—ensuring every page had consistent, brand-authentic visuals.
Impact achieved:
Enhanced Visual Appeal: The use of original, high-quality images significantly improved the website's visual appeal.
Brand Integrity: Consistent imagery strengthened the brand's visual identity and credibility.
Efficient Asset Management: The DAM system streamlined the management and deployment of assets, saving time and ensuring consistency.
Optimized Performance: By carefully compressing and resizing images, we maintained site performance without compromising on visual quality.
A design is only as good as its implementation. During the build, I worked directly with developers to QA the site across devices, tracking every inconsistency in a shared log. This ensured the final live site matched the approved designs.
The results:
Conversion Rate
More visitors requesting quotes—directly impacting revenue.
Bounce Rate
Users exploring more pages instead of leaving immediately.
Time on Site
Longer sessions indicating more engaging content.
SEO Rankings Protected
All #1-3 positions maintained. Zero traffic loss during migration.
Post-launch, I continued monitoring user behavior via heatmaps and analytics, running A/B tests on key landing pages to squeeze out additional conversion gains.
This project was a crash course in balancing research insights against business constraints. I had to constantly negotiate between what user testing revealed and what SEO requirements allowed.
What I Learned
The best UX isn't always the "ideal" solution - it's the one that works within real constraints. By bringing data to stakeholder conversations (showing test results, not just opinions), I could advocate for users while respecting business realities.
What I'd Do Differently
Build a component library earlier. By page 30, inconsistencies were creating design debt.
Document research findings in real-time. Reconstructing rationale months later was harder than it should have been.
All rights reserved, 2025