KTO Roofing

Website Design

The owner of a roofing agency in Houston needed a new website. An experienced, hardworking man whose main lead generator is HomeAdvisor website. However, he wasn’t receiving enough in return for his investment. He needed a new website to start attracting new leads from other sources such as Google ads and SEO. The original name and contact info of the company in this project has been altered for privacy purposes.

Research

Even though this is a small scale project, research was done to identify common points of interest on competitors’ websites, as well as discovering features about the business that can differentiate them from the competitors. These features include experience, the scope of services, evidence of quality and qualifications, ease of contact, and access to exclusive offers. User reviews were a great source of information.

User Personas

Users are divided into residential property owners and commercial business owners. To ensure the website serves both groups, we developed user personas representative of each primary customer type. Looking at user reviews was an excellent source of information to understand user preferences and frustrations.


User personas allow us to devise the content based on the users’ needs. It’s essential to emphasize the experience, expertise and qualifications of the service provider. Also, the fact that his business is family-owned and operated is important. Last but not least, adding testimonials and supporting material that are indicators of the quality of the service will be very effective.

Tina

Age 38 | Attorney | Married, one kid | Lives in Sugarland, TX

Tina is a homeowner. Her house requires new side painting and repairs. She loves her home wants to find the best candidate for the job. She would like to see images of prior works as proof of qualification for this job.

Archetype: The Sage
Committed to helping the world gain deeper insight and wisdom.

What Matters to Her
  • Quality
  • Expertise
  • Cleanness
  • Affordability
  • Compassion 
  • Professionalism

Mario

Age 61 | Restaurateur | Married, three kids | Lives in Houston, TX

A thunderstorm has damages Mario's restaurant's roof. He needs to find someone who has the experience and qualifications to repair his roof. The project must be done quickly without sacrificing qualitys.

Archetype: The Everyman
Seeks connections and belonging; is recognized as supportive, faithful and down-to-earth.

What Matters to Him
  • Honesty
  • Discipline
  • Reliability
  • Timelines
  • Experience
  • Qualification

Define

After identifying the problem, we can define the goals and ideal outcomes for the project by asking seven questions and use the answers as a framework of our process.

What is the purpose (goal) of the design?

To create a website that is user-friendly, SEO optimized and can deliver value to the client.

Who is the audience?

Home-owners and business owners who need roofing repair services. The main focus is on commercial roofing services for a one-time service or as an ongoing relationship with businesses in the greater Houston area.

What message needs to be communicated?

Qualification and expertise, also the types of services provided by the client.

What is the competition and marketplace?

Although there are many roofing service providers in this region, this service is always in demand, especially during the storm season.

What is the context?

A fully responsive website that can be seen in both mobile devices and larger screens without compromising the content or the performance of the website.

What is the voice?

Quality, expertise, professional but approachable and friendly.

What kind of response is desired?

We want visitors to enjoy visiting the website, quickly find any information they seek, see examples of work and services provided and at the end contact the client to get a quote and ask further questions.

Ideate

The next steps in the creative design process were ideation of creating content based on conversion optimization, sketching the ideas, creating a wireframe, and finally implementing it into the UI.

Wireframe

Design

What elements could inspire  a brand image for an exemplary dentistry in Los Angeles? A combination of glamorous Hollywood smiles and relaxing elements of LA beaches to create a welcoming atmosphere while conveying trust, efficiency and proficiency. 

Brand Values: Compassionate, professional, gentle, healthy, lively.

Visual Style

Header Typeface:
Roboto Bold

Body Typeface:
Nunito Normal

HEX
#2E276D
HEX
#FF9C00
HEX
#F2EDDE
HEX
#FFFFFF

Final UI Design

Iterate

Adjusting the Process to meet the Project's Needs

This project was a small-scale web design project, so the UX process was done in a smaller scale compared to aj comprehensive design project. At the end, the client was extremely happy with the result so making the process more efficient and shorter was the right decision in this project.

Thanks for Checking this Project!

Share this page

View More Projects

ZAB Design

Website

Collarful

Android/IOS App

Logo Designs

Branding