Tinting Chicago v2 Website Redesign

Tinting Chicago v2 Website Redesign

This projects expands on the research that was already done at first redesign attempt few years prior - Tinting Chicago v1 Website Redesign

This projects expands on the research that was already done at first redesign attempt few years prior - Tinting Chicago v1 Website Redesign

My Roles

My Roles

Art Director

UX/UI Designer

Art Director

UX/UI Designer

Employer

Employer

Tinting Chicago

Tinting Chicago

Duration

Duration

1 year

1 year

Team

Team

12 people

12 people

Summary

Summary

As the Art Director I led all visual decisions and played a pivotal role in shaping the entire website's user experience and interface. This project required balancing aesthetics with user-centric design, all while maintaining the site's strong SEO performance. My comprehensive involvement ensured a cohesive, visually stunning, and highly functional website that significantly improved user interaction without compromising search engine visibility.

As the Art Director I led all visual decisions and played a pivotal role in shaping the entire website's user experience and interface. This project required balancing aesthetics with user-centric design, all while maintaining the site's strong SEO performance. My comprehensive involvement ensured a cohesive, visually stunning, and highly functional website that significantly improved user interaction without compromising search engine visibility.

Problem statement

Problem statement

The business struggled to generate leads as users often left the website without taking action. The site was hard to navigate, visually outdated, and primarily optimized for SEO, not user experience. Previous redesign efforts during COVID-19 were halted due to budget cuts. A complete website refresh was needed to enhance user engagement while maintaining SEO integrity.

The business struggled to generate leads as users often left the website without taking action. The site was hard to navigate, visually outdated, and primarily optimized for SEO, not user experience. Previous redesign efforts during COVID-19 were halted due to budget cuts. A complete website refresh was needed to enhance user engagement while maintaining SEO integrity.

Project goals

Project goals

1

1

Create a Cohesive Visual and Interactive Identity

Create a Cohesive Visual and Interactive Identity

2

2

Enhance User Experience and Interface Design

Enhance User Experience and Interface Design

3

3

Maintain and improve the site's SEO strength while implementing a new design.

Maintain and improve the site's SEO strength while implementing a new design.

4

4

Incorporate Rich Media to Boost Engagement

Incorporate Rich Media to Boost Engagement

5

5

Ensure Seamless Cross-Platform Experience

Ensure Seamless Cross-Platform Experience

6

6

Increase Conversion Rates and User Interaction

Increase Conversion Rates and User Interaction

🖐️ My Key Responsibilities and Contributions

🖐️ My Key Responsibilities and Contributions

1

1

Led visual design decisions and strategy

Led visual design decisions and strategy

2

2

Played a crucial role in UX/UI decisions, helping shape the entire website structure

Played a crucial role in UX/UI decisions, helping shape the entire website structure

3

3

Collaborated closely with the UX/UI designer to create intuitive user flows and interfaces

Collaborated closely with the UX/UI designer to create intuitive user flows and interfaces

4

4

Directed the creation and integration of all digital assets (photos, videos, GIFs)

Directed the creation and integration of all digital assets (photos, videos, GIFs)

5

5

Worked with SEO specialists to ensure design decisions supported SEO goals

Worked with SEO specialists to ensure design decisions supported SEO goals

6

6

Developed a cohesive visual and interactive identity across all digital touchpoints.

Developed a cohesive visual and interactive identity across all digital touchpoints.

Complete hierarchy change

Complete hierarchy change

For the first few months, our core task was addressing the website's structure to maintain its high SEO rankings. However, the existing SEO structure was optimized for Google, not for humans. Users were getting lost, and services were not logically grouped. We carefully approached a complete architectural restructure, maintaining existing pages with keywords while grouping them more logically. Additionally, we expanded articles to be more informative, focusing on user experience rather than just keyword optimization.

For the first few months, our core task was addressing the website's structure to maintain its high SEO rankings. However, the existing SEO structure was optimized for Google, not for humans. Users were getting lost, and services were not logically grouped. We carefully approached a complete architectural restructure, maintaining existing pages with keywords while grouping them more logically. Additionally, we expanded articles to be more informative, focusing on user experience rather than just keyword optimization.

We conducted a thorough keyword research to identify high-demand topics related to our services. Based on these insights, we added many new articles that addressed these popular topics, aligning them with the business’s offerings. This strategic content expansion not only enhanced our SEO but also provided valuable information to our users, improving their overall experience.

We conducted a thorough keyword research to identify high-demand topics related to our services. Based on these insights, we added many new articles that addressed these popular topics, aligning them with the business’s offerings. This strategic content expansion not only enhanced our SEO but also provided valuable information to our users, improving their overall experience.

Educating users on a broad range of services

Educating users on a broad range of services

One of the significant challenges we tackled was educating users about the extensive list of services offered by the business. Through user research and interviews, we discovered that while many people were aware of services like Window Tinting and Vehicle Wraps, they lacked understanding of the various service variations and their functionalities. Additionally, highly profitable services such as Paint Protection Film and Commercial/Residential Tinting were often overlooked.

One of the significant challenges we tackled was educating users about the extensive list of services offered by the business. Through user research and interviews, we discovered that while many people were aware of services like Window Tinting and Vehicle Wraps, they lacked understanding of the various service variations and their functionalities. Additionally, highly profitable services such as Paint Protection Film and Commercial/Residential Tinting were often overlooked.

Challenges Identified:

Challenges Identified:

  1. Undervaluation of profitable services due to lack of visibility.

  2. Limited user awareness and understanding of service variations.

  1. Undervaluation of profitable services due to lack of visibility.

  2. Limited user awareness and understanding of service variations.

To address these challenges, our goal was to educate users effectively and make service information visually and intuitively accessible, so we created:

To address these challenges, our goal was to educate users effectively and make service information visually and intuitively accessible, so we created:

Centralized Service Catalog Menu

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.

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.

Service Visualization Tools

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.

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.

At the end we’ve achieved:

At the end we’ve achieved:

  1. Improved User Engagement: Users showed increased engagement with service details and variations.

  2. Enhanced Service Visibility: Paint Protection Film and Commercial/Residential Tinting saw increased user interest and utilization.

  3. Intuitive User Experience: The implementation of visualizers and a centralized service catalog menu improved user understanding and navigation efficiency.


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.

  1. Improved User Engagement: Users showed increased engagement with service details and variations.

  2. Enhanced Service Visibility: Paint Protection Film and Commercial/Residential Tinting saw increased user interest and utilization.

  3. Intuitive User Experience: The implementation of visualizers and a centralized service catalog menu improved user understanding and navigation efficiency.


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.

Extensive prototyping and testing

Extensive prototyping and testing

Although we eventually arrived at our final designs, this process involved extensive prototyping and testing. Each stage of development required careful planning, execution, and iteration based on user feedback and usability testing. This approach was crucial to ensuring that the designs were both functional and user-friendly.

Although we eventually arrived at our final designs, this process involved extensive prototyping and testing. Each stage of development required careful planning, execution, and iteration based on user feedback and usability testing. This approach was crucial to ensuring that the designs were both functional and user-friendly.

To ensure the designs were functional and user-friendly, we conducted multiple rounds of usability testing with a diverse group of users. This process allowed us to collect both qualitative and quantitative data, identifying pain points and areas for improvement. Based on this feedback, we made iterative adjustments, refining both visual elements and user experience to enhance usability and satisfaction and finesse the UI details

To ensure the designs were functional and user-friendly, we conducted multiple rounds of usability testing with a diverse group of users. This process allowed us to collect both qualitative and quantitative data, identifying pain points and areas for improvement. Based on this feedback, we made iterative adjustments, refining both visual elements and user experience to enhance usability and satisfaction and finesse the UI details

To solve these problems we’ll need to work on information organization to explain film differences without getting into the specifics of the field and also we’ll need to create visualizers to give the user the ability to visually see the difference between films (both tinting and wrapping). Also, a galery with real-world examples of end results should help to eliminate some uncertainty.

To solve these problems we’ll need to work on information organization to explain film differences without getting into the specifics of the field and also we’ll need to create visualizers to give the user the ability to visually see the difference between films (both tinting and wrapping). Also, a galery with real-world examples of end results should help to eliminate some uncertainty.

Comprehensive Digital Asset Management

and original imagery

Comprehensive Digital Asset Management

and original imagery

Our website ended up consisting of 384 pages, and almost all of them requiring unique assets. To ensure the highest quality and consistency, we decided to produce all imagery in-house, covering every service with our original high-quality images, so we developed a comprehensive DAM system to organize, store, and manage all digital assets.. This process was time-consuming but essential for maintaining visual coherence and brand integrity across the site.

Our website ended up consisting of 384 pages, and almost all of them requiring unique assets. To ensure the highest quality and consistency, we decided to produce all imagery in-house, covering every service with our original high-quality images, so we developed a comprehensive DAM system to organize, store, and manage all digital assets.. This process was time-consuming but essential for maintaining visual coherence and brand integrity across the site.

Impact achieved:

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.

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.

Launch and constant improvements

Launch and constant improvements

During the launch phase, I collaborated closely with developers to ensure the accurate implementation of designs. We tracked all inconsistencies and future improvements using a detailed spreadsheet. Additionally, I oversaw the final quality assurance process across all devices and browsers to ensure a consistent and high-quality user experience.


The redesigned website successfully merged improved visual design with enhanced user experience:

During the launch phase, I collaborated closely with developers to ensure the accurate implementation of designs. We tracked all inconsistencies and future improvements using a detailed spreadsheet. Additionally, I oversaw the final quality assurance process across all devices and browsers to ensure a consistent and high-quality user experience.


The redesigned website successfully merged improved visual design with enhanced user experience:

43%

43%

Maintained strong search rankings while significantly improving user engagement metrics

Maintained strong search rankings while significantly improving user engagement metrics

43% ⬆️

43% ⬆️

increase in time spent on the website, indicating more engaging and informative content

increase in time spent on the website, indicating more engaging and informative content

31% ⬇️️

31% ⬇️️

reduction in bounce rate, suggesting improved navigation and content relevance

reduction in bounce rate, suggesting improved navigation and content relevance

54% ⬆️

54% ⬆️

increase in conversion rate for quote requests and appointments

increase in conversion rate for quote requests and appointments

54%

54%

Overwhelmingly positive user feedback on both aesthetics and ease of use

Overwhelmingly positive user feedback on both aesthetics and ease of use

After the launch, work didn't stop. We continue to implement constant improvements, conduct tests, perform A/B testing, and make changes to ensure the website remains optimized and user-friendly.

After the launch, work didn't stop. We continue to implement constant improvements, conduct tests, perform A/B testing, and make changes to ensure the website remains optimized and user-friendly.

Reflection

Reflection

This project pushed me out of my comfort zone as an Art Director. I had to think beyond making things look good – every visual decision needed to solve a UX problem or support an SEO goal. One of my biggest challenges was redesigning the navigation to be visually striking yet intuitive, which took several iterations and user tests to get right.


Balancing the client's desire for a cutting-edge design with the need for familiar, user-friendly interfaces was another constant struggle. I often found myself mediating between different stakeholders, translating technical SEO requirements into visually appealing solutions.


Despite these challenges, it was incredibly rewarding to see how these decisions directly improved user engagement and business metrics. This experience has fundamentally changed how I approach art direction, making me a more strategic, user-focused, and collaborative designer.

This project pushed me out of my comfort zone as an Art Director. I had to think beyond making things look good – every visual decision needed to solve a UX problem or support an SEO goal. One of my biggest challenges was redesigning the navigation to be visually striking yet intuitive, which took several iterations and user tests to get right.


Balancing the client's desire for a cutting-edge design with the need for familiar, user-friendly interfaces was another constant struggle. I often found myself mediating between different stakeholders, translating technical SEO requirements into visually appealing solutions.


Despite these challenges, it was incredibly rewarding to see how these decisions directly improved user engagement and business metrics. This experience has fundamentally changed how I approach art direction, making me a more strategic, user-focused, and collaborative designer.

Other projects

Other projects

Case study

Volunteering

UX Design

UI Design

💪 Crafting a no-code website using Framer

💪 Crafting a no-code website using Framer

Dig inside

Case study

UX Design

UI Design

💡 Less is more. Building a website on a tight budget and deadlines

💡 Less is more. Building a website on a tight budget and deadlines

Dig inside

CoNtact me ANyTIME

CoNtact me ANyTIME

If you have any question, suggestions, job offers or just want to talk or share a cool show or documentary you just found - hit me up. I’ll be happy to hear from you.

I’m glad you got all the way here and hope you are having an amazing day. All rights reserved, 2024