About this project
JB Heating Service Pages
A Worcester Bosch Accredited installers, specializes in delivering heating systems to homeowners.
Design Tag
Project overview
A quick brief about this project
My Role
UX/UI Designer - Design System Development, Visual Design
Industry
Heating Service & Consulting
Project Estimation
1 weeks
Overview
This project was crafted specifically for a heating service company, our landing page provides a seamless interface for users seeking heating solutions, ensuring easy navigation and access to essential information about our client services and offerings.
What I actually did in the project
In the project, I took on the role of UX/UI designer, leading the design for two out of three service landing pages: Air-conditioner and Water Filter. My responsibility was to maintain consistency and uniqueness across all three pages, ensuring coherence in design direction, color schemes, and visual elements.
The Problem
The challenges we faced and how we solved it
Problem Statement
The client commissioned the development of three landing pages, assigning two to my responsibility. They emphasized the importance of maintaining consistency by retaining the header and footer from existing service pages. Our mandate was to deliver a modern, clean design that seamlessly integrates with the established aesthetic, ensuring a cohesive user experience across all pages.
Challenges
While creating the landing page posed no significant challenge, ensuring consistency across the entire website proved to be quite daunting. Our client's website had an outdated appearance, with inconsistent design systems and colors throughout. This made it challenging to maintain the old design style while incorporating it into the new landing page.
Our Solution
We began by retaining the foundational website layout, incorporating subtle enhancements to refine the existing header and footer. To achieve a modern and polished appearance, we opted for a significant use of real-life imagery. This cohesive approach not only modernized the website but also enhanced its visual appeal, making it more conducive to commercial objectives.
Research Summary
We started with our client current website
The Website Home Page
We conducted research on our client's current website to ensure continuity in design while integrating it into the new landing page. However, we encountered challenges due to its outdated appearance, poor layout, and inconsistent design systems and colors.
JB Heating Home Page
The Service Pages
Similar to the homepage, the existing service pages suffer from unappealing layouts and outdated images, diminishing their overall appearance.
JB Heating Service Page
Overlapping Header
We identified an issue with the existing Heading Navigation system: it overlaps with the hero banner of the service page, resulting in a less visually appealing layout and potentially hindering user engagement.
Overlapping Heading Navigation
Design foundation
Defining the base design components
Given our client's request for just three landing pages and their emphasis on consistency by preserving the header and footer from existing service pages, we successfully negotiated a change to the header to prevent overlap with the hero banner on the new landing pages. We then proceeded to design all necessary elements for the landing pages.
Website Button and Tabs
Home Page Card Item
Mockup design
Mockup Design
For the landing pages, we opted for images featuring real people to enhance authenticity. Emphasizing a clean and modern aesthetic, we employed a light theme with pastel colors for the hero banner, while maintaining consistency by using the primary green color across all other design elements.
Page Mockup
Page Mockup
The Air Conditioner Service Page
Air Conditioner Service Page
The Water Filter Service Page
Water Filter Service Page
The Electric Boiler Service Page
Electric Boiler Service Page
Retrospective
Despite imperfections, we've satisfied our client.
Although we were satisfied with our final design, implementing it exactly as planned on WordPress posed challenges. Despite encountering these obstacles, we remained dedicated to our vision, meticulously refining each landing page to align with our client's expectations. Through persistent efforts and attention to detail, we ultimately achieved a polished and cohesive result that garnered approval from our client.