Proper Roofing
A responsive website design for a local roofing company offering roofing, windows, and siding services.
Roles
- User Experience (UX) Designer
- User Interface (UI) Designer
- Visual Designer
Deliverables
- Competitive analysis
- Personas
- User journeys and task flows
- Site map
- Low-fidelity wireframes
- High-fidelity mockups and prototypes
- Design system and UI kit
- Usability tests and findings
Project Specifications
Duration: Winter 2023 – 2024
Tools:
Figma
Photoshop
Illustrator
Overview
The goal is to create a seamless and intuitive process for potential customers to learn about Proper Roofing’s services by providing a FREE inspection. Following the inspection, users can request quotes and ultimately choose the right service for their needs.
Problems
- Navigating complicated websites for building materials that have confusing menus or unclear paths to essential information like services and contact details.
- Challenging to assess the quality of the company’s work without sufficient visual evidence, such as before-and-after photos, project portfolios, or videos showcasing completed projects.
- Difficulties accessing and interacting with contractor’s websites that are not optimized for smaller screens, leading to frustration and abandonment.
Proposed Solutions
- Prioritize key actions and information, such as scheduling for a free inspection, to ensure they are easily accessible and prominently displayed on mobile screens.
- Utilize an intuitive slider to showcase before and after images of the quality of service.
- Utilize responsive web design techniques to ensure that the roofing website adapts seamlessly to various screen sizes, including smartphones and tablets.
By having a responsive web app, users can efficiently view the quality of service and schedule a free inspection on any device from a laptop, tablet, or mobile phones.
Research
A competitive audit of local roofing companies and general contractors would help me understand how to efficiently present information and services.
Design research ensured that the website fits the user’s needs and provided a seamless user flow for a free inspection.
Findings
-
Determine if competitors offer online quote request forms, appointment scheduling tools, or other interactive features.
-
Analyze the range of services offered by competitors, including roof repair, replacement, installation, maintenance, and specialty services.
-
Research industry trends, emerging technologies, and innovative practices within the roofing industry.
-
Identify strengths and weaknesses in terms of navigation, responsiveness, visual appeal, and ease of use.
Getting Closer to User-Centered Design
Defining Key Differences in Motivations Through Personas
Superficially it might seem that everyone is interested in the same thing: saving money and time … but upon closer inspection the user research made clear that there were divergent motivations.
Creating personas helped bring some clarity to those divergences, which would become important reference points as functions developed.
As research and design proceeded, I focused primarily on two personas because they represented heavy emphasis of two key functions: scrutinizing usage reports and data to make subscription decisions; and reliance on the app’s browse, search, and filter functions for viewing choices.
Creating Structure
Visualizing a User-Centric Experience
Sketching allowed me to explore different layouts to present information aesthetically and have an efficient user flow. Catering to the users, the website focuses on the quality of the services with images, and we wanted that to be front and centered.
Understanding What Users Find Intuitive, and Why
Low-fidelity prototype testing allowed me to better understand how users expected to complete the tasks I was focusing on. Ultimately the goal is to have the user “schedule for a free estimate”. A button at the top of the page would scroll to the bottom where the form is placed on each page.
Establishing Visual Design
Visually articulating all potential aspects of Proper Roofing brand (product, as well as marketing and beyond) meant defining a baseline design system that identified key elements of its visual vocabulary.
I wanted Roof Proper’s visual design to always refer back to its core mission:
Empowering home improvement services to customers.
Predominantly blue palettes imbued screens with a sense of calm and control; simple button states and clear iconography would help make tasks feel more manageable; and a single, modern sans-serif with large, open counters ensured legibility and clarity in messaging.
Surfacing New Issues
The high-fidelity prototype was the first real-world experience with the website. Users wanted to see before and after images of complete projects.
How Usability Might Be Improved
Issues to Address for Longer-Term Development
- Showcasing types of materials and processes of services
- Tracker for when a contractor is on-site
- Better data visualization to assist in decision-making on the types of services.
Lessons Learned
- I quickly learned that it was more important to tell the story of the company to provide more context into the type or services they provide and why they would be the best choice for the user.
- Most companies do not provides before and after images of their work or is not presented in an aesthetically pleasing format. I received positive feedback after the final iteration of the product that included an interactive slider for before and after images.
- Most users have short attention spans and want the information right away without digging so we kept everything short and simple and if they were intersected in more information.