UX & UI Design, Project Management
Kinetic Demolition opened up shop in 2022 and were looking for a website to promote their business.
With limited information available to create their first website, I initially sourced many of the information and assets from their LinkedIn profile to gather key details about their services, team, and values, which helped support both the wireframe and design phase of this project.
.svg)
.svg)
.svg)
The Wireframing process started with researching local demolition contractors to understand how they promote their business and finding unique ways to have Kinetic Demolition’s website stand out against the competition.
It was immediately apparent that local contractors lack transparency on how exactly they conduct their business and if they follow safety standards to keep both employees and civilians safe while on the job.
It was obvious within the wireframes to not only include the jobs completed by the company and the variety of services offered, but also dedicate a page to promoting their safety measures in order to build trust and promote transparency in the industry. The copy for each safety measure and project was provided by the client during the design phase.
I tend to prefer High-Fidelity wireframes over Low-Fidelity when presenting to a client. I’ve found that clients tend to be more responsive and in many cases can better visualize the structure of their website. High-Fidelity wireframes also helps me to think ahead about the design phase by testing to see if my visual design ideas would work, or if I have to shift to a different concept.
.webp)
I like to find opportunities to give each website I design its own unique personality. Too often do you see websites with similar UI styles, colors, and fonts, which tends to be a bit disappointing. Kinetic Demolition already had a logo, so the primary and secondary colors of the site were defined. With this being a smaller site, I used those colors and the existing logo to help support the content of their website.
I had an idea to use construction tape as a UI element for certain divider lines, which created a bit of visual interest, especially using orange. The inspiration for this came from simply looking at their logo -- they have an element similar to this underneath the machine. I like to take opportunities to tie the logo in with the rest of the site in some subtle way; it makes everything seem more cohesive.
WCAG standards are always top of mind when I’m in the UI phase. The orange color taken from the logo was slightly too light, so it needed to be darkened a bit in order to pass contrast checks. I also used a few colored overlays, which I made sure passed WCAG standards.
