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:
Undervaluation of profitable services due to lack of visibility.
Limited user awareness and understanding of service variations.
Undervaluation of profitable services due to lack of visibility.
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:
Improved User Engagement: Users showed increased engagement with service details and variations.
Enhanced Service Visibility: Paint Protection Film and Commercial/Residential Tinting saw increased user interest and utilization.
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.
Improved User Engagement: Users showed increased engagement with service details and variations.
Enhanced Service Visibility: Paint Protection Film and Commercial/Residential Tinting saw increased user interest and utilization.
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