Quick Response Plumbing
Overview
Project Type: Responsive web redesign
Roles: UX/UI Designer, UX/UI Analysis
Summary: In September 2023, Quick Response Plumbing hired me to redesign their website in order to establish a more modern and professional image and generate more business. As a smaller, independent business, Quick Response Plumbing only required a single service page website to highlight their superior services and gain the trust of potential clients. With these parameters established, I utilized key principles of UX design and the design thinking process while working closely with the client and developer throughout this project to ensure the delivery of a comprehensive, user-friendly, and effective design.
The Problem Space
Understanding the Client’s Goals
During my first meeting with the client I aimed to understand their goals for the project and was left with 3 key takeaways;
- Modernize/professionalize to build brand trust and meet today’s standards;
- Present key information clearly and effectively to improve conversion rates;
- Simplify contact/hire methods to reduce spam
Evaluating areas for improvement
With a strong understanding of the client's expectations, I took some time to evaluate their current website at the time to make note of areas that could be improved and other aspects that worked well and that I could use in my redesign.
Shown here are screenshots of Quick Response Plumbing’s old hero banner, service page, and contact form.
The Process
Inspiration and Competitor Analysis
Knowing that I would need to redesign the UI and layout of the website, I gathered some inspiration from other Toronto-based plumbing businesses that are more well-established and that have well designed websites that effectively communicate and market their services.
Marketing Inspiration
Initial Design
With my inspiration gathered and a solid understanding of what I needed to re-work, I created an initial design using the existing copy and company graphic as a reference point for the visual design. - Aimed to make information easier to access and comprehend.
- Focus on a modern and minimal design.
- Added customer testimonial section to highlight positive reviews.
Once my initial design was complete I shared with the client to get their thoughts and feedback. From there we worked together to make multiple revisions and additions to bring more life and personalization to the website.
Feedback and Revisions
1st Round Revisions
- Incorporated icons and graphics to liven up the feel of the page and draw the users’ attention to key information.
- Made adjustments to the layout, organization, and stylization of the ‘Services’ and ‘Why Us’ sections to help the most important information stand out.
2nd Round Revisions
-
Added a series of photos of QRP’s plumbers working real jobs to add personality and relate the website to the business.
- Built
an automated scrolling photo carousel to further liven up the site and draw attention to the ‘Why Us’ and ‘Testimonials’ sections of the page.
3rd Round Revisions
- Replaced the ‘Contact Us’ button from the site header with the business’ phone number as the client wanted to be contacted by phone only.
- Finalized the marketing copy throughout the site and edited the titles in the navigation bar to be consistent with the relevant sections of the website.
- Scaled the desktop design for tablet and mobile breakpoints so that the website would be fully responsive across all platforms.
Solution
Final Design
Below are the desktop and mobile versions of the final design. The live website is fully responsive to any screen size and passes WCAG AAA colour contrast accessibility requirements. You can visit the live website here. Key Learnings
Professional Collaboration
This was my first professional job as a designer which granted me the opportunity to gain a lot of valuable experience. Working as the sole designer with specific requirements and existing content from the client was a new and exciting challenge that helped to develop my skills and confidence as a designer. The process of working collaboratively with a developer and communicating consistently with the client to gather feedback and direction was incredibly useful and rewarding as it ensured that I met targeted deadlines and ultimately delivered a polished and effective design solution.
What Could I Have Done Differently?
User TestingIf it was within the scope of this project, I would have liked to conduct user testing with the final design. While the client was happy with the final product, it would have been advantageous to conduct user testing to confirm that my design was effective and user friendly and would have granted the ability to optimize any areas that we’re lacking.
Better Use of Design Tools and Practices
When reflecting back on the design process of this project, I regret not taking advantage of certain design tools and practices which would have saved time and made the transition from design to development easier. Specifically I could have taken advantage of using Autolayout and Frames more in Figma to make the initial design for the desktop breakpoint be responsive within Figma. This would have saved me from having to create separate versions of the design for tablet and mobile and could have provided the developer a visual reference for how the page layout responds to different viewports.