Branding
UX/UI Design

Domus Roofing

Company
Domus Roofing
New Jersey, USA
Services
Branding
UX/UI Design

Project Overview

Website redesign for construction company offering their services across the tri-state area. Redesigning the landing page has become a priority for the business as it will dramatically increase client leads and overall sales.

My Role

  • Web designer

The Challenge

Domus roofing is looking to redesign their website to establish more authority as one of the top roofing companies in New Jersey. They have a wonderful reputation for the work they do, but their current website may be hurting their image. A few areas of improvement include, adding a responsive layout, creating a custom brand design system, using a 8pt grid system.

Solutions

The goal is to establish more trust, improve the brand's reputation and increase sales. Redesigning the landing page is a crucial step to getting there. To design an effective website I had to do user research to better understand the needs of the client who is seeking the services Domus provides. I also researched the competition and got ideas on how a top level company represents themselves online. This research allowed me to gain valuable insight that I was able to apply to the new website design.

Design Process

1. The first step is to empathize, and understand the user's challenges and needs. By acting as a user I navigated the current website and immediately found potential pain points for customers.

2. The next step, is to define the users needs and the problems that arise from the current web design. Below is a screenshot of the home page of the website, with markings highlighting discrepancies in the design.

3. Next, is time to challenge assumptions and begin to generate ideas to improve the user interface, and create a better user experience. Here are some of the key points of improvement I came up with before designing:

  • Create a design system that matches the brand's identity, and colors
  • Implement an 8pt. grid system to properly align elements and keep everything organized
  • Responsive design across all screen sizes, including desktop, tablet and mobile
  • Fix overflowing elements and crowded navigation menu

4. The next step is to begin designing. Before coming up with the final design for the homepage I had a few renditions, here is one that I thought looked nice:

 

5. The final step in the design process is to test the solutions from the new design, and decide if changes need to be made. In this case my first design was headed in the right direction but it was still lacking structure and organization. As a result I went back to step 4 and redesigned the home page once again.

Results

The final design was a big improvement from the initial version. I focused on having a hierarchical order, using a horizontal and vertical grid system to improve legibility and order, implemented a responsive design, and fixed the overflowing errors from the original design. Here is the final product:

See More Projects

Have projects in mind?

Let’s work together

I'm Anderson— a designer who enjoys creating meaningful experiences, collaborating, and delivering thoughtful designs.