Mina

UXUI Designer & Front-end Developer

bandk-remodeling.com

  • bandk-remodeling.com⬈

    2023

  • Case Study

    Designing and developing a new rebrand, and website overhaul for a contractor based in the DC area: introducing B&K Remodeling.

    Duration

    6 Months

    Key Skills

    Product design, ideation, sketching, information architecture, user interface design, interaction design, prototyping, website development

  • “My site badly needs updating, but I don’t know where to start.”

  • Problem

    B&K Remodeling is a trusted contracting business in the DC area with an antiquated website. Because of this, they have relied mainly on word-of-mouth and reputation for growth for years, and the business’s site went unattended to.

  • Vision

    Facing a downturn in incoming projects, B&K Remodeling needed a new brand identity as well as web presence. It would need to convey professionalism and trustworthiness, while showcasing recent remodel projects.

  • Brief

    Eagerly, I took on the challenge of renovating B&K Remodeling’s brand identity and web presence. Firstly, I began with conducting research on competitor sites, and building a solid understanding of best practices in terms of usability and accessibility. Then, I used Figma for designing and prototyping to communicate with the client effectively. Finally, I built the site on WordPress utilizing custom PHP, JS, CSS, and HTML.

  • “Other contractors are finding new clients online. For that reason, how can we keep up?”

  • Research

    Competitive Analysis

    Initially, we conducted competitive analysis with several contractors in the DC area with web presences that were successful.

  • Target Audience Analysis

    Firstly, we conducted target audience analysis on Reddit, Craigslist, and Facebook. Secondly, we analyzed posts from people looking to remodel their homes, focusing on what each user searched for in a contractor for their remodeling project.

  • Results

    Consequently, concerning the above analyses, we synthesized them into trends and compiled them into an overarching user problem statement.

  • I am looking for a contractor, but I don’t know how to find a reliable one near me so:

    ・

    Firstly, I will search on Google

    ・

    Secondly, I will search on Yelp to check for highly rated contractors near me

    ・

    Thirdly, I will search the Better Business Bureau to find contractors listed near me

  • I want a contractor who I can trust will do good work, so I will look for these things on their website:

    ・

    Firstly, reviews from past clients

    ・

    Secondly, images of previous projects

    ・

    Thirdly, licensed and Insured

    ・

    Fourthly, a statement of values

    ・

    Finally, a guarantee of satisfactory service

  • User Problem

    “Because of the above, I am actively seeking a reliable contractor near me whom I can trust to deliver quality work, and I require assistance in finding one online.”

    Solution

    Basically, choose B&K Remodeling for your next space renovation.

  • Features to Implement because of this

    ・ Inviting landing page
    ・ Feature review on landing page
    ・ Easily navigable site menu
    ・ Project photo documentation galleries
    ・ Reviews page
    ・ Contact page
    ・ Easily found phone number for immediate contact
    ・ An explanation of services offered
    ・ A service guarantee

  • User Testing

    Goals

    Furthermore, I utilized screenshots of the prototype on Figma with AI generated remodeling images and stock images, to create a user experience test. Using this, I gathered data regarding the usability and accessibility of the website as a result.

  • Process

    As an illustration, view the prototype here.

  • Results

    As a result, by leveraging this prototype, I was able to gather valuable data pertaining to the website’s usability and accessibility. Specifically, the test provided insights into how users interacted with the interface, how easily they could navigate through the content, and whether the design elements were intuitive and visually appealing. The results obtained from this user test will inform future improvements and optimizations to enhance the overall user experience of the website.

  • MVP/Wireframes

    Wireframes

    Firstly, we created wireframes to refine the MVP and affirm critical red routes.

    Prototype

    Eventually, we refined the prototype to be closer to a high fidelity model. View it here.

  • “A brand identity rebrand and UX/UI redesign are a must, undeniably.”

  • UI Design

    Style Guide

  • Implementation and Development

    Architecture

    Furthermore, the architecture of the B&K Remodeling website follows a user-centered design approach, ensuring a seamless and intuitive browsing experience for visitors. Specifically, by prioritizing user needs and efficient information retrieval, the architecture of the B&K Remodeling website aims to create a user-friendly platform that effectively showcases their expertise and drives engagement.

  • Stack

    Platform: WordPress
    DB: MySQL
    Backend: PHP (WordPress Admin was used as a CMS.)
    Frontend: HTML / CSS / JS
    Digital Asset Management: WordPress Media Library

  • Integrations (plugins, etc.)

    Header/Footer/Post Injections by Stefano Lissa
    Responsive Lightbox & Gallery by dFactory

  • Search Engine Optimization

    SEO Integrations

    Additionally, we used Yoast SEO to evaluate the website’s SEO score and made changes to improve its performance

  • Meta

    Remodeling | Home Improvement | Home Renovation | Painting and much more. – Northern Virginia, Maryland, and the DC area remodeling service.

  • Keywords/Phrases

    ・B&K Remodeling
    ・Remodeling services
    ・Home improvement
    ・Bathroom renovations
    ・Kitchen renovations
    ・Basement finishing
    ・Plumbing services
    ・Drain cleaning
    ・Door installation
    ・Trim work
    ・Gutter services
    ・Security camera system installation
    ・Lawn maintenance
    ・Masonry work
    ・Insulation installation

    ・Drywall services
    ・Wallpaper installation
    ・Water heater installation
    ・Home electrical work
    ・General remodeling
    ・General carpentry
    ・Customer reviews
    ・Personalized approach
    ・Licensed and insured
    ・Quality workmanship
    ・Prompt estimates
    ・Competitive prices
    ・Satisfaction guarantee
    ・Contact us
    ・Remodeling gallery

  • Outcomes

    Accomplishments

    A screen recording of the final product is viewable here.

  • Subsequently, through our comprehensive web design, web development, SEO, and brand identity/logo redesign work on the B&K Remodeling project, we achieved significant outcomes and accomplished key milestones. As a result, our efforts have contributed to positioning B&K Remodeling as a trusted and reputable provider in the remodeling industry. Because of this, the company’s projections indicate an increase in business and customer engagement.

  • Identity Rebrand

    As can be seen, brand identity and logo redesign for B&K Remodeling successfully revitalized the company’s image instantly, creating a strong and memorable brand presence that resonates with the target audience.

  • Web Presence Revamp

    Furthermore, regarding web design, we created a visually appealing and user-friendly website that effectively showcases B&K Remodeling’s services, testimonials, and portfolio. Due to this, the seamless web development implementation ensured smooth navigation and optimal performance across various devices.

  • SEO

    Additionally, our strategic SEO efforts led to improved search engine rankings, increased organic traffic, and enhanced online visibility for B&K Remodeling, resulting in a broader reach and higher conversion rates.

  • Back to Homepage