Responsive Redesign
Karnage Construction
Role
UI/UX Designer
Tools
Figma, Maze, FigJam
Timeline
Aug 2024 - Feb 2025 (28 weeks)
Contact Pages
Before
After
-
Research
-
Define
-
Design & Test
-
Final Thoughts
Sketching the blueprints
Background / Problem / Reference / Goals / Contents
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.
For this case study, I’d be redesigning an existing website, so 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 often 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.
Click to enlarge
Problem
Karnage Construction’s website would greatly benefit from a comprehensive redesign, including a refreshed brand identity, to create a more visually appealing and professional online presence. Since potential clients frequently begin their search for services online, the current website falls short of its potential to inspire confidence and establish credibility—key elements for any local business aiming to connect with its audience. A revamped site could better reflect the quality and reliability of their services, helping to attract and reassure prospective customers.
Goals
Before I could start designing, I needed to understand…
Key information users typically seek when visiting a home construction company’s website
The impact of online presence on a potential client’s decision-making process when selecting a company
Industry standards and best practices for web design and user experience in the construction sector
Strategies for establishing and enhancing credibility with users
User perceptions of the current website and identification of primary areas requiring improvement
To get this process started, I reached out to people who already have experience in seeking home construction companies, or are currently interested in seeking services.
Deliverables
UX Design:
Competitor Analysis
Affinity Map
HMWs
User Persona
Site Maps
Task & User Flows
UI Design:
Rebranding
Wireframes
User Testing Reports
Prototypes
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)
Click to enlarge
I conducted 5 user interviews. In these interviews, I wanted to:
Identify user expectations and needs
Understand the decision making process
Evaluate current website’s credibility and usability
I reached out to people who had experience seeking contractors or were interested in seeking contractors. Luckily, a few of my friends were in different processes of the home buying and renovating process, which made recruiting participants very easy.
Interviews
Affinity Mapping
Each interview had two parts. I would begin with the actual interview about their experiences with contractors, and would follow up with getting feedback on Karnage Construction’s current website by having my participant scroll through the homepage. I created two affinity maps, one for each leg of the interview. Each map got it’s own set of insights.
Click to enlarge
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.”
“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
Click to enlarge
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
Since I was working with limited time, I wanted to focus mainly on the issues that my participants reported having with the current web design, using the insights I gathered from the interviews about their experiences to guide those solutions. I knew the rebranding portion was going to do a lot of the 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 tried to create 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
While the main goal would be to reach out to the company to ask a specific question, I knew that the average user would want to try finding that information on their own first, so I included a flow with the potential to explore the entire website.
Click to enlarge
Construction in progress
Rebranding / Low to High Fidelity Iterations / Prototype
Test
~
Design
&
Test ~ Design &
Rebranding & Style Tile
I began the process of rebranding very early on into this project. I was hardly done with my user interviews before I started brainstorming different aesthetics. I kept in mind some of the brand values stated on their website as I moved forward, 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, all things considered, does fit with the quirkiness their brand exemplifies. However, the accessibility issue was a glaring one, 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.
I switched the typography from serif to 2 sans serif fonts, Montserrat and Cabin, something easy on the eyes. For their logo and main header, I used the font Dro Demo, a 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
I sketched my key screens: dashboard, listing page, chat and inbox, personal listings, and the sign up pages. I brainstormed different layouts that highlighted the content a little differently. Receiving feedback, I then digitized and iterated on my wireframes to move into testing my flows.
Homepage
Click to enlarge
Click to enlarge
Click to enlarge
Navigation bar with logo, nav options, contact CTA, phone number & address
Nav options have dropdown when needed (services, about)
Header picture with motto, CTA to contact
About section with title, description, learn more CTA (takes to about), and picture either oriented on the right (V1) OR the left (V2)
Services section with title, cards of each service with name and learn more CTA (takes to service page) (V1) OR gallery view of services with pictures with a brief services description, and portfolio CTA (V1) OR learn more CTA (takes to services page) (V2)
Why Us section with title, picture or illustration and description (V2)
Contact form with name, phone number, email, send buton
Rotating descriptors of brand values (V1)
Footer with logo & socials, contact info (phone number, address, email) and contact CTA, rights reserved/privacy policy (V1)
Services, Contact, & Footers
Services
Navigation
Header picture with title, description
Gallery of pictures
Get a quote CTA banner
List of different materials and brief description, contact CTA
Contact
Navigation
Title, brief description, map, contact info (phone number, address, email) stacked on left with contact form on right (V1) OR map, contact info (phone number, address, email), business hours stacked on left with title, description, contact form on right (V2)
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.
Mobile
Footers
Logo and socials, business hours, contact info in three columns (V2)
Logo, navigation options, socials, rights reserved/privacy policy (V3)
Navigation options on top, logo and contact info/socials stacked in two columns (V4)
Navigation compressed into menu that slides out from left when clicked, logo in the middle, contact CTA
Any two or more column items will need to be stacked
Home page services cards will be stacked and condensed to two viewable services with an option to expand via a “show more” button
Contact page starts with title, description, contact form with the rest of the information beneath
Services page will keep the gallery scroll, but stack everything else into single column
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.
Iteration 1
Iteration 1 ➜ Iteration 2
Testing
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
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?
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)
Iteration 3
89%
positive feelings about UI
Testing
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
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?
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 ➜ Iteration 4
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 Prototype
Take a minute to give it a test run!
Tasks:
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?
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 ~
Self-doubt is inherent in the creative process, but constructive feedback can restore perspective:
During the project, there were moments when I became overly critical of my work, leading to self-doubt. However, the thoughtful feedback from my mentor and peers provided a balanced perspective, reinforcing my confidence and enabling me to move forward. This underscores the importance of seeking external input to counteract the natural tendency toward self-criticism.
Successes serve as foundational milestones for future growth:
This project was a significant achievement, with deliverables completed successfully on the first attempt. While I recognize that not every project will yield the same level of success, the skills, confidence, and insights gained from this experience will serve as a strong foundation for tackling future challenges. It’s a reminder to acknowledge and build on successes as part of ongoing professional development.
If I had more time,
I would love to create designs for the portfolio page. If I were to continue with this project, my next steps would first be to focus on the FAQ pages for those people who would prefer to dig for the information they are looking for themselves, including:
Moderated user testing to see how users would navigate looking for more information
Iterating wireframes based on feedback
Adjusting my prototype to allow for multiple avenues towards task completion
Lessons Learned
Leveraging proven frameworks enhances efficiency and consistency:
By utilizing templates and methodologies from previous successful projects, I was able to streamline my workflow and maintain a higher level of effiiency throughout the process. This approach not only saved time but also ensured a structured and effective execution. It highlights the value of refining and reusing reliable strategies to achieve consistent results.