XShield Tints
User Experience Design
In this project, our team selected a Vancouver-based local business as our client. Our goal was to help them expand their services and improve profitability.
Design Process
Research & Analysis
We created an initial research report to understand the client’s service direction and business scope.
Interviews
We conducted interviews with the client to learn about their pain points and motivations, and to understand how their services connect emotionally with their customers.
Persona Development
We developed personas representing different user groups and visualized how each segment interacts with the client’s services.
User Journey Mapping
We created user journey flows to understand how customers interact with the business from start to finish, helping us identify emotional peaks and service gaps.
Final Design
We improved key touchpoints on the client’s website based on our insights.
Challenges
Unable to Access End Users
During the entire project process, we were unable to directly access the client’s real customer groups. This was impossible because the users did not want to be contacted.
Instead, we conducted multiple interviews with the business to understand what they believed their users needed.
Balancing User Experience and Business Profitability
Since we could not speak directly with the end users, our design decisions had to rely heavily on the client’s business goals, prioritizing profitability, efficiency, and operational feasibility.
To reduce bias, we supplemented with industry reports, competitor analysis, customer reviews, and data trends. Finally, we attempted to align “user value” and “business value” to achieve a balance.
Interviews
Interview with the Business Owner
We interviewed the owner to gather first-hand insights about user behaviors, needs, and major frustrations.
Findings
We learned what customers were most concerned about and how the business currently communicated with them. We also realized:
– Our initial solutions were too complex
– Early concepts were theoretically meaningful but operationally unrealistic
– The design scope was too broad and lacked prioritization
Persona
Solutions
Research
&
Ethnographic Research
To validate our design, we strengthened our qualitative research through on-site observation.
Shadowing Employees
We participated in observations, analyzing the business workflow and service pain points.
Consumer Behavior Research
We conducted third-party research using online reviews and industry reports to understand consumer needs and behavior trends.
Enhanced Booking
We improved the booking flow to make the process smoother and reduce friction when contacting the business.
QR Code System
A QR-code-based solution that helps users access support, maintenance information, and post-service instructions more easily.
Website
A redesigned website that allows customers to quickly access information.
Key Insights
Even though we could not reach real users, these research methods allowed us to understand deeper motivations, needs, and frustrations.
User Journey Map
Impact - Effort Matrix
We mapped the solutions from three user journeys onto an Impact–Effort Matrix for evaluation. All identified user pain points and potential needs were represented as cards and positioned within the matrix.
The analysis revealed that a website could address most of the issues located in the high-impact, low-effort quadrant, allowing us to deliver meaningful improvements with relatively limited resources.
Website User Journey Map
Shift in Design Goals
Initial Design Focus
Address the company’s challenges by introducing an online booking system and strengthening its digital presence. The goal was to increase sales for XShield Tints and make the business easier for customers to discover and access.
Revised Design Focus
Improve the overall customer experience by addressing user pain points and identifying opportunities that provide meaningful value. By helping customers make informed decisions and interact with the business more easily, the design ultimately supports long-term sales growth.
Website Goals
The Xshield Tints website aims to build customer trust, improve business accessibility, and provide users with the information they need before booking a service. Through transparent pricing, clear service information, project showcases, intuitive navigation, and accessible contact options, the website streamlines the entire journey from initial research to final booking.
Website Value
Designed around user needs, the website reduces information gaps and decision-making barriers, helping customers confidently choose the tinting service that best suits their needs.
Key Benefits
-
Building trust through technician profiles and service background.
-
Transparent pricing displayed clearly on the site.
-
Before-and-after images showcasing real project outcomes.
-
Customer reviews that highlight satisfaction and quality of service.
-
Warranty information available upfront to reassure customers.
-
Clear service expectations to reduce confusion and manage outcomes.
-
Easy access to the business with intuitive layout and visible contact options.
-
Quick phone access via a one-tap call feature for immediate communication.
Final Outcome
The Landing Page
The landing page provides quick access to key features like the service estimator, contact options, and service details. It includes trust-building elements such as testimonials, and FAQs
Who we are page (About us)
The Who We Are page introduces the team behind Xshield Tints, highlighting their experience, values, and commitment to quality service. It builds trust by showcasing the technicians and the story behind the business.
Services Page
The Services page showcases the company’s full range of tinting solutions for vehicles, homes, and businesses. It includes film type details, a before-and-after gallery, and a detailed FAQ section.
How we do it page
This page offers a clear, step-by-step overview of the tinting process, helping clients understand what to expect while highlighting precision, professionalism, and quality
Price Estimator Page
The Price Estimator lets users quickly calculate project costs by selecting their service type, entering basic details, and choosing a film. It provides instant, transparent pricing to support informed decisions.
