Auto Bliss
Website
Revamp
Timeline
8 Weeks
My role
UX/UI designer and researcher competitor to Designing
About
Redesigned AutoBliss’ existing website to integrate their new services seamlessly, enhancing user experience and modernizing the interface. The revamp focused on improved navigation, better service presentation, and a more engaging digital presence. This project highlights my expertise in web design, UX/UI, and front-end developmen
Software
Figma, Adobe Illustrator, Bootstrap, WordPress
Overview
“Auto Bliss Reimagined: Integrating New Services with a Modern Touch”
The Auto Bliss website revamp project focuses on enhancing the company’s digital presence by integrating its newly introduced services. The previous website lacked a structured layout to accommodate these updates, requiring a more intuitive design and seamless user experience.
This project involved redesigning the website with a modern, user-friendly interface, improving navigation, and ensuring that customers can easily explore and access AutoBliss’ offerings. The revamp also included optimizing the website for responsiveness, performance, and accessibility, creating a more engaging platform for potential customers.
By working on this project, I aimed to showcase my skills in web design, UX/UI, and front-end development while aligning the website with AutoBliss’ evolving business goals.
The problem
A Website That Didn’t Reflect the Brand
AutoBliss had been relying on an outdated one-page website that had not been updated in nearly a decade. The lack of a modern design and essential information made it difficult for potential customers to trust the brand or even find the business online when searching for automotive services in the area.
Lack of Structure & Content – With only a single page, there was no room to showcase AutoBliss’ services, making it unclear what the business actually offered.
Outdated & Unprofessional Design – The website appeared dull and unreliable, which made customers hesitant to trust the brand.
Poor Online Visibility – Many potential customers struggled to find AutoBliss when searching for automotive services, leading to missed business opportunities.
Limited User Experience – Navigation was non-existent, and users couldn’t easily explore or engage with the brand.
The Solution
A Modern, User-Centred Website
To address AutoBliss’ outdated and ineffective website, I designed and developed a modern, structured, and user-friendly digital platform that not only reflects the brand’s credibility but also enhances customer engagement and service visibility.
Multi- Page Structure & Clear Navigation
Professional & Trustworthy Design
Used high-quality visuals, structured content, and a responsive design to enhance user experience and professionalism
Showcasing New Services
Dedicated a Gallery page to showcase their excellency and highlight customer testimonials to boost credibility
Consistent Branding with Thoughtful Design Choice
Color Palette was carefully selected to align with Auto Bliss’s brand identity
To further establish credibility, the design also incorporates elements that reflect Auto Bliss’s trusted partnership with XPEL and Feynlab, ensuring a professional and industry-aligned aesthetic.
Enhance User Experience (UX) & Responsiveness
Designed a fully responsive website that works seamlessly across desktops, tablets, and mobile devices.
Streamlined the contact process, making it easier for customers to get in touch or request services.
USER FLOW
Scenario:
Damien, a car enthusiast, recently purchased a new vehicle and wants to protect his car using ceramic coating. He search for service near him and AutoBliss popped up. but isn’t sure of the services and price they offer. He searches online and lands on their newly redesigned website.
the goal
INCREASE TRAFFIC, IMPROVE DISCOVERABILITY, AND CONVERT VISITORS INTO CUSTOMER BY OFFERING CLEAR, STRUCTURED, AND PROFESSIONAL EXPERIENCE
RESEARCH
UNDERSTANDING FROM BUSINESS OWNER’S PERSPECTIVE
Before designing AutoBliss’s wireframe, I first needed to understand the challenges the owner faced. I discovered that many of his competitors, who offered similar services, had well-structured websites that generated a significant portion of their traffic. Additionally, despite AutoBliss’ high Google rating, potential customers often hesitated to trust the business due to the lack of an online portfolio showcasing previous work.
My initial assumption was that the business lacked strong visibility on Google. To validate this, I conducted interviews with the staff, friends, customers, and the business owner to gather insights. Here are the key questions I asked:
Where does your current customer traffic originate?
What are the main goals you want to achieve with the new website? (e.g., more bookings, brand awareness, customer education, pricing transparent)
Who are some of your biggest competitors and sources of inspiration in the industry?
Are there specific concerns or hesitations that prevent customers from booking services right away?
Do customers prefer to book online, call, or visit in person before committing to a service?
What are some of the most common questions or concerns customers have before deciding to use your services?
What are your best-selling service?
As an established aftermarket service provider, which brands do you affiliate with or provide as part of your services?
Insights
Website visual impacts brand’s credibility
Presence:
The old website was outdated, consisting of only a single homepage that neither showcased AutoBliss’ new services nor provided a sense of trust and credibility for potential customers.
Title does not provide specific service, and lack of emphasis; making it hard for users to understand service at first glance
Logo and Navigation do not provide a clear navigation path for users
No menu, CTA to guide visitors to key pages
Color Scheme is neutral and lack of contrast, that makes it visually unappealing.
The homepage does not effectively communicates Auto Bliss’s expertise and credibility
Insights
Shape the functionality and design
Hesitation and Trust:
Potential customer would like to see previous work (portfolio) before committing to a service.
Even with high Google rating, customer were hesitant due to the website’s unprofessional appearance, which made it seem unreliable.
Service Visibility and Education:
Customer often called to ask about specific services, showing that the website failed to provide sufficient information.
Some customers were unaware on the benefits of specific services
Allowing customer to understand that Auto Bliss only offers premium quality material and service, such as using XPEL and Feynlab.
Inquiry Process:
The business relied heavily on DMs and Phone Calls for inquiries, making process inefficient
wireframe
bringing ideas to life
Based on key insights, I crafted a design strategy that directly addresses the identified challenges, ensuring a solution-driven approach that enhances usability, credibility, and customer engagement.
final design
all in one
motion captures user's attention
I integrated animated shading overlays in the package section to enhance user understanding and engagement. This animation visually demonstrates the coverage areas on the vehicle, allowing customers to clearly see what each package includes before making a decision. This approach improves clarity, reduces confusion, and provides an interactive way to explore service options.
The next step
Develop Training page
Integrating Real time Instagram posts in Website
Update minor changes and content writing
Update new commercial videos
Vanessa Yong © 2024
Designed with Figma built on Framer.
