Laptop mockup and company logo

Karnage Construction

Responsive Redesign

Role

UX Researcher, Brand Designer, UI Designer

Tools

Figma, Maze, FigJam

Team

UX Design Mentor, Design Student Peers, Group Crit Facilitators

Sketching the blueprints

Background / Problem & Solution / Goals

Introduction

~

Introduction ~

Background

Good design is often invisible, acknowledged quietly because of how enjoyably and effortlessly it guides you. Bad design is glaringly obvious, however, slowing you down and often causing frustration.

I was on the search for bad design that made me sigh with exasperation or scrunch up my face in confusion. I conducted a local search, keeping in mind that small businesses may manage their websites internally, sometimes with limited resources or expertise in web design, as a way to stay cost-effective. An online presence is essential for any small business to enhance visibility, engage with clients, build credibility, and drive business growth. It didn’t take long for me to come across the website of a home construction and renovation company, a stone’s throw from my own front door, Karnage Construction.

Problem & Solution

Karnage Construction’s website does not pass accessibility standards, lacks structure, contains dead links, makes a user’s eye work very hard to read content. Overall, they fall short of their potential to inspire confidence and establish credibility—key elements for any local business aiming to connect with its audience. Since potential clients frequently begin their search for services online,

Since potential clients frequently begin their search for services online, Karnage Construction would greatly benefit from a comprehensive redesign, including a refreshed brand identity, to create a more visually appealing and professional online presence. A revamped site could better reflect the quality and reliability of their services, helping to attract and persuade prospective customers to seek their services.

Goals

I need to understand…

  1. Key information users typically seek when visiting a home construction company’s website

  2. The impact of online presence on a potential client’s decision-making process when selecting a company

  3. Industry standards and best practices for web design and user experience in the construction sector

  4. Strategies for establishing and enhancing credibility with users

  5. User perceptions of the current website and identification of primary areas requiring improvement

Brick by brick

Competitor Analysis / Interviews / Affinity Mapping

Research

~

Research ~

Competitor Analysis

Reflecting on my goal to better understand industry standards and best practices, I looked through 3 different websites of direct competitors to Karnage Construction; Alex & Son, RIC Design Build, and Historic Carpentry/Repairs. I came to notice a few patterns I wanted to pull for my own design:

  • Liberal use of CTAs (contact, learn more, explore)

  • Simple navigation design, usually consisting of 4-5 options such as: Home, About, Portfolio, Services, Contact

  • Plentiful pictures of prior work and options to view

  • Sans serif typography

  • Color palette is mostly light themes with browns and blues

  • Plentiful contact forms available on most pages

  • Footer includes all contact information (hours, address, phone number, email)

I reached out to people who had experience seeking contractors or were interested in seeking contractors. Luckily, a few friends were in different processes of the home buying and renovating process, which made recruiting participants very easy. Each interview consisted of two parts. The main portion involved reflecting on their experience with researching contractors. In the latter portion, I asked users to explore Karnage Construction’s website while narrating their thoughts and feelings. Using this method of interviewing, I sought to:

  1. Identify user expectations and needs

  2. Understand the decision making process

  3. Evaluate credibility and usability of Karnage Construction’s website

Interviews

“It was nice to set up appointments through the website rather than having to call.”

— Interview 3

“It could be the ugliest website in the world but if it gives you what you need, that works.”

— Interview 4

“Some of those websites were really bare and they just looked unprofessional.”

— Interview 2

“I would absolutely not fill out that form because it’s intimidating.”

— Interview 1

Affinity Mapping

In order to differentiate between general needs in regards to researching contractors and specific pain points relating to the website’s current usability, I made two affinity maps, each complete with their own set of insights. This would help me determine what worked and what was missing from the current web design.

Insights

  • Pictures inform user decisions

    • 4/5 users value pictures of a contractor’s previous work as proof of their craftsmanship

  • Social proof influences user decisions through recommendations & reviews

    • 4/5 users reported researching contractors through reviews on yelp, google, or Facebook 

  • Functionality matters most, but aesthetics indicate professionalism

    • 4/5 users understand that contractors are not UI designers and are willing to overlook a badly designed website with the caveat that it’s functional.

  • Knowing your contractor builds trust

    • 5/5 users utilize contractor websites to “get a feel” for their aesthetic choices, craftsmanship, personal attributes, experience, and professionalism

  • Difficult communication turns users off

    • 5/5 users are seeking easy ways to contact a contractor through their website

  • Availability of information enhances user experience

    • 4/5 users are visiting websites looking for easily accessible information to help make a decision

  • Users are budget-conscious

    • 4/5 users are trying to gauge a price estimate before deciding on a contractor

When I’m putting together my affinity maps, I have a bit of a different process. I start by putting notes with similar themes together, but I inevitably come across quotes that don’t fit neatly into one single theme and may be caught between two or three. The conversational nature of my interviews leads to quotes that often combine themes with their content and flow together in one way or another. As a result, I end up with more of an affinity “web” than “map.”

Insights

  • Confusing organization with frustrating layout 

    • 5/5 users were either confused by certain organization aspects or frustrated by the website’s layout. 

  • Balance comprehensiveness with conciseness

    • 5/5 users agreed that the website had an abundance of information to access, but 5/5 users also reported that the information was vague or did not have enough context.

  • Brand image works, color scheme does not

    • 4/5 users had positive feelings toward Karnage Construction’s brand image as far as their queerness being expressed in the construction market, a notable niche.

Giving a quote

Actionable Insights & HMWs / User Persona / Site Map / User Flow

Define

~

Define ~

Actionable Insights & HMWs

My main focus was to solve for what my participants reported as pain points with the current web design. I knew the rebranding was going to do a lot of heavy lifting for this project. If I could find a more aesthetically pleasing way to organize and cleanly present the information, it would drastically improve the user experience.

  • Confusing organization with frustrating layout

    • How might we reorganize the current sitemap of Karnage Construction’s website to make it more easily navigable?

    • How might we create a page layout that is more intuitive and enjoyable for the user to navigate?

  • Brand image works, except color scheme

    • How might we boost the level of professionalism of the website without losing Karnage Construction’s personality?

  • Balance comprehensiveness with conciseness

    • How might we condense information while keeping it readily accessible?

  • Difficult communication turns users off

    • How might we streamline a method of communication from user to company that is quick and easily accessible?

User Persona

Using my affinity map, user interviews, and insights, I created a persona who was the average of my participants interviewed. Introducing: Erika Thompson, my user persona from which I would draw my design flow inspirations.

Erika is a 32-year-old new homeowner looking to have a new deck installed and was recommended to check out Karnage Construction as an option. Erika strongly takes positive recommendations from others into account as believes it makes the company more trustworthy. She is trying to keep that in mind as she frustratingly tries to find answers to her questions on their website. She wants to get the conversation started with Karnage, but the contact form feels too lengthy and intimidates her.

Click to enlarge

Sitemap

I simplified Karnage Construction’s navigation from 7 items to just 4, and nested more specific content within those. While this isn’t exactly what my redesign was going to end up looking like, it was a good starting point for me to get an idea of which screens I would be designing for.

Click to enlarge

User Flow

The desired path for the user is ordinarily the quickest possible path towards completion, but my interviews revealed that the average user would want to try finding information on their own first, so I included a flow with the potential to explore the website, despite the task taking longer to complete. This user flow assumes the answer is unavailable on the website, which is what prompts the user to reach out, but in later iterations, I would make the information available via the FAQs & Resources tab under About.

Click to enlarge

Construction in progress

Rebranding & Style Tile / Low to High Fidelity Iterations & Testing / Prototype

Test

~

Design

&

Test ~ Design &

Rebranding & Style Tile

I kept in mind some of the brand values stated on their website as I brainstormed aesthetics, such as quality, dependability, equity, collaboration, and integrity. I wanted to add an air of professionalism without losing their personality.

Karnage Construction has a very vibrant color palette that does fit with the quirkiness of their company. However, the accessibility issue was glaring, so I chose a warm color palette with the main colors derived from yellow and orange, including blue as an infrequent splash of color seen in banners. Already, the light yellow background with dark brown lettering was miles ahead of the bright teal with orange.

Their current typography is hard on the eyes, so I switched the typography from serif to 2 sans serif fonts, Montserrat and Cabin, and changed their headers from UPPERCASE to Capitalized Case. For their logo and main header, I used the font Dro Demo, an uppercase sans serif font that looks hand etched from stone. It feels raw and authentic while evoking a sense of power that one might associate with construction.

Click to enlarge

Low to High Fidelity Iterations

Sketches: Homepage, Services, Contact, Footers, Mobile

I brainstormed separate layouts that highlighted the content a little differently. Upon receiving feedback, I then digitized and iterated on my wireframes to move into testing my flows.

Click to enlarge

During my competitor analysis, I was intrigued by the different styles of footers! Karnage Construction’s original footer boasted their phone number in ~96pt font with an image, some awkwardly placed navigation links, socials, their address and email, and some affiliates and certifications. I wanted to cull the content down to the basic contact information and played around with layouts. I liked having business hours in the footer for easy accessibility, so that was the style of footer I used.

Click to enlarge

Red: Shorten About section text

Orange: Reorganize Services section into cards

Yellow: Add picture and shorten text

Green: Shorten “fences” and “porches & decks” text, move materials into their own section

Blue: Restyle form boxes

Purple: Add…

  • Home: Partners & credentials, CTA banner

  • Outdoor Renovation: Prompt for additional service, contact form

Pink: Disabled state on empty form

As I digitized my desktop wireframes, I decided to hold back on digitizing my mobile frames until I had a more solid layout to move forward with. I find it easier to condense elements and information than I do to expand it, as most of the work is stacking columns into vertical alignment. Also, since I was creating a responsive design, I knew I could make variants of my existing desktop components and add height and width minimums and maximums to fit a smaller screen as opposed to making an entirely separate set of mobile components.

Low Fidelity

Iteration 1

Iteration 2: Before ➜ After

Testing: Iteration 1

Using moderated testing with 4 participants, my goals were as follows:

  • Establish how quickly and intuitively users can reach the goal screen of each separate task flow

  • Discover any common areas of confusion

  • Determine the more popular paths in regards to contacting the company on the website

  • Receive feedback on layout

Tasks

  1. You want to build a new deck for your home, but first you would like to see what kind of materials they use. How would you find that information?

  2. You want to know if they specifically use fir wood. How would you reach out to ask that question?

Key Findings

100%

success rate

50%

wanted less text

75%

desired more contact forms

1

common misclick area

Moving forward:

  • Add contact form to bottom of services page

  • Make text more scannable for important information

  • Create disabled state for form button when not filled out

Click to enlarge

General:

  • Applied rebranding style tile

  • Added pictures

  • Created hover, click, and disabled states for buttons and navigation options

  • Configured mobile layout

Red: Rearranged hierarchy to switch brand values with partners & credentials

Orange: Added portfolio CTA

Yellow: Arranged two or more columned elements into vertical alignment (Mobile)

Green: Condensed services section including a “more services” button (Mobile)

Blue: Condensed navigation into hamburger menu (Mobile)

Purple: Mobile friendly logo (Mobile)

89%

positive feelings about UI

Testing: Iteration 3

I had 9 participants go through unmoderated testing via Maze so I could find out:

  • Does the style of the website (colors, fonts, layout) feel appropriate for the website’s purpose?

  • Are there any incongruencies in expectations of visual cues, interactions, information, etc?

  • How do users feel overall about their experience?

  • Areas of confusion

  • Intuitiveness

Tasks

  1. You want to build a new deck for your home, but first you would like to see what kind of materials they use. How would you find that information?

  2. You want to know if they specifically use fir wood. How would you reach out to ask that question?

Key Findings

100%

success rate

67%

felt navigation was intuitive

44%

expected an FAQ page

Moving forward:

  • Design FAQ & resources pages with more in depth information

  • Organize FAQ into navigation and adjust prototype to make it accessible

Iteration 3: Before ➜ After

Click to enlarge

General:

  • Created FAQ & Resources page

  • Created Brand Catalogues page

Red: Added arrows to navigation options with drop downs and changed button color from secondary to primary

Orange: Increased size of header

Yellow: CTA for brand catalogues page in materials section

Green: Created untyped and typed states for form boxes

High Fidelity

Iteration 3

High Fidelity Prototype

Take a minute to give it a test run!

Tasks:

  1. You want to build a new deck for your home, but first you would like to see what kind of materials they use. How would you find that information?

  2. You want to know if they specifically use fir wood. How would you reach out to ask that question?

What I take with me

Lessons Learned / Next Steps

Final Thoughts

~

Final Thoughts ~

Lessons Learned

  1. Self doubt is inherent to the process; seek feedback for perspective

  2. Use what you know works

  3. Acknowledge and celebrate your successes!

Next Steps

  1. Assess how users navigate through moderated testing

  2. Adjust prototype for more avenues towards completion

Feels Good

  • Competitor analysis

  • Interviews

  • Affinity mapping

  • Rebranding

  • Prototyping

  • Component Kit

  • Unmoderated & moderated testing

  • User Persona

Needs Work

  • Site mapping

  • Task flow

  • Seeking frequent feedback

  • Responsive components

Previous

Add A Feature: AllTrails
Next

End to End: Curbs