Catalyst Construction

UI/UX Project Design for Catalyst Construction

A Case Study to Enhance Customer Experience and Simplify the User Interface for Increased Higher Client Engagements and Lead Conversions.

Project Overview

A prominent construction company firm approached us* to modernize their digital presence by revamping their existing website. Their primary goal was to create an engaging, user-friendly experience that better reflected their brand’s authority and professional expertise, ultimately driving higher client engagement and lead conversions.

*This project was developed during my employment at Web Casa Design LLC. Credits are provided unless otherwise specified.

Company Overview

Based in the Sacramento region, Catalyst Construction takes pride in the projects they put their name behind. While the satisfaction of their clients is their main priority, the passion they have for creating unique and timeless designs is equally as motivating. Whether your project entails complex engineering or time-honored techniques, their highly skilled team tailors to each project individually.

Objectives

Improve overall site navigation and user experience.
Enhance brand perception with a modern design aesthetic.
Optimize for mobile and cross-platform accessibility.
Integrate interactive elements to showcase service offerings.
Increase conversion rates through strategic CTA placement and optimized user flows.

My Role

Research

User Interview

User Persona

User Flow

Wireframes

Visual Design

UI/UX Design

Front-End Development

Usability Test

Project Toolkit

Project Duration

The design process involves several steps to ensure a smooth and user-friendly experience for customers and visitors. Which consists of research, wire-framing, prototyping, design and usability testing.

This project was conducted on
August 11, 2022 - December 13, 2022

Days

Project Timeline

Design Process

My working process is thinking as a user, what they want, then I can define the problem. After that, I brainstormed with my team about the problem, then find out various solutions. After discussion, I will apply the best solution and proceed to the prototype design. Finally, I tested the project to ensure there were no issues or problems.

Discover

User Research
User Interviews

Define

Personas
Empathy Map

Ideate

User Flow
Information Architecture

Design

Wireframes
Visual Design

Test

Usability Test
Implementing Feedback

User Research

I conducted some user interviews so as to gain key insights and understand their pain points. My research involved interviewing 5 users who were looking for a company online that deals with home renovations in the past two to five years. Consequently, I am aware of the frustrations and needs that they face. Using a synthesis, I was able to develop a typical journey map of their experience and identify their three main pain points.

Problems We Identify

Outdated, non-intuitive navigation causing high bounce rates.
Poor mobile responsiveness leading to a subpar user experience on mobile devices.
Limited interactive content to engage users and showcase services.
Low conversion rates due to ineffective CTAs.
Slow load times negatively impacting user retention.

Solutions We Offered

Redesigned the site architecture with a mega-menu and clear navigation pathways.
Implemented a mobile-first design approach, ensuring seamless functionality across all devices and screen sizes.
Integrated interactive elements such as service highlight sections, case study previews, and customer testimonials to enhance user engagement.
Strategically placed CTAs throughout the website and optimized user flows to guide users toward desired actions.
Optimized images, minimized code, and implemented caching to improve site performance and loading speed.

Pain Points

Lack of Clear Information or Transparency

Homeowners often struggle with websites that don’t provide enough information about the services offered, pricing, or the company’s process. Vague descriptions, unclear pricing models, or an absence of detailed project examples can lead to frustration and hesitation.

Poor User Experience and Navigation

Many homeowners visit websites that are difficult to navigate or not mobile-friendly. Confusing menus, slow loading times, or disorganized information can quickly drive users away, especially when they’re in the initial research phase of their renovation project.

Limited Social Proof or Reviews

Homeowners often look for customer reviews, testimonials, and proof of a company’s reputation before making a decision. A website without visible reviews or social proof can leave homeowners uncertain about the quality of work and customer satisfaction.

User Persona

I created different user personas based on the target user group and all the information gathered by the research, I was able to create two fictional characters who represents the target user group of the company.

Sarah Mitchell

Age: 45
Location: Suburban area, outside a major city
Marital Status: Married, two teenage children
Occupation: Marketing Director at a mid-sized tech firm
Homeowner: 18 years
House: 4-bedroom home, 2.5 bathrooms, with a small garden
Education: Bachelor’s degree in Business Administration
Tech Savviness: High-medium – comfortable with technology but prefers practical, time-saving solutions
Income: $120,000 annually (household income)
Personality: Practical, organized, cautious, quality-driven, values transparency and communication.

Goals

Sarah wants to modernize her kitchen with new countertops, cabinets, and appliances, creating a more functional and stylish space for her family.
She aims to update her master bathroom with a larger shower, contemporary fixtures, and energy-efficient lighting to enhance both its look and utility.
Sarah is looking to finish her basement, transforming it into a versatile area that can function as a family room, home gym, and office space.
She wants to work with a reliable, professional contractor who can deliver high-quality work on time and within budget, ultimately increasing the value of her home.

Challenges

Sarah feels overwhelmed by the large number of home renovation companies available online and struggles to determine which ones are trustworthy and reputable.
As a busy professional with a family, Sarah is concerned about managing the renovation process without it causing significant disruptions to her daily life and schedule.
She is worried about staying within her budget, as she doesn’t want to face unexpected costs or hidden fees during the renovation.
Sarah is uncertain about which materials and design styles to choose, making it difficult for her to make final decisions on the look and feel of her home upgrades.
She is skeptical about the reliability of online reviews and finds it challenging to assess the authenticity of customer feedback when making her decision.

Digital Experience & Behavior

Sarah begins her search for home renovation companies by Googling terms like "best kitchen and bathroom renovation companies near me" and reading reviews on platforms like Yelp, Angie's List, and Trustpilot to find reputable contractors.
After browsing several company websites, Sarah narrows her options down to 3-4 companies based on their portfolios, services, and customer reviews, and then reaches out for consultations or estimates.
She prefers to communicate via email for initial contact, but once she’s more engaged, she is comfortable speaking over the phone for follow-up discussions and project details.
Sarah appreciates interactive features on websites, such as cost estimators or renovation calculators, which help her better understand the financial scope of the project before committing to a contractor.
She values social proof, often relying on customer testimonials, case studies, and before-and-after photos to gauge the quality and reliability of a company before making her final decision.

Technological Preferences

Sarah primarily uses her smartphone for browsing renovation ideas on social media and doing quick research, but she prefers using her laptop for more in-depth research and managing email communications.
While she’s comfortable with online shopping, Sarah tends to rely on well-known and trusted platforms, and is cautious when making payments directly on a company’s website unless it feels secure and reputable.
Sarah values websites that are mobile-friendly, offering easy navigation and quick access to important information, such as service details, project galleries, and contact forms.
She appreciates digital tools, such as online booking systems for consultations and interactive quote generators, that save her time and streamline the decision-making process.

Mark Davis

Age: 46
Location: Suburban neighborhood in a mid-sized city
Marital Status: Married, three young children
Occupation: Senior IT Manager
Homeowner: 12 years
House: 3-bedroom home, 2 bathrooms, with a large backyard
Education: Bachelor’s degree in Computer Science
Income: $150,000 annually (household income)
Personality: Logical, detail-oriented, time-conscious, prefers efficiency and practicality
Tech Savviness: High – very comfortable with technology, enjoys researching and using online tools
Hobbies: DIY projects, home automation, and technology gadgets

Goals

Mark wants to renovate his kitchen and upgrade his outdoor patio to achieve a modern, functional, and stylish living space.
He aims to complete the renovation within a budget of $30,000 without compromising on quality.
He seeks inspiration, design ideas, and trending materials to visualize the possibilities for his renovation projects.
He is looking for trustworthy contractors with strong reviews and portfolios to ensure a smooth and reliable renovation process.

Challenges

Mark feels overwhelmed by the sheer number of styles, materials, and service providers available online, making it hard to narrow down his choices.
Balancing a busy work schedule and family commitments leaves him with limited time to thoroughly research renovation options.
He is concerned about potential scams or hiring contractors who may not deliver on promises.
Mark struggles with deciding between cost-saving DIY projects and hiring professionals to ensure quality results.

Digital Experience & Behavior

Mark frequently browses renovation websites, Pinterest, and YouTube to gather ideas and watch tutorials for his projects.
He prefers engaging with detailed blogs, interactive visuals like 3D room planners, and video walkthroughs of completed renovations.
Active on Facebook and Instagram, Mark follows renovation influencers and participates in homeowner groups for advice and inspiration.
Before making decisions, he reads customer reviews, compares pricing, and seeks recommendations on forums to ensure he’s choosing the best options.
He values trust indicators such as testimonials, before-and-after photos, and transparent pricing when exploring contractors and services.

Technological Preferences

Mark primarily uses his laptop for in-depth research but frequently browses on his smartphone during breaks or while commuting.
He is comfortable using apps like Houzz, HomeAdvisor, and Thumbtack that simplify the process of finding renovation ideas and contractors.
He expects websites to be responsive, fast-loading, and easy to navigate, with features like chatbots and FAQ sections for quick inquiries.
Mark is intrigued by AR/VR tools, 3D Visual tools that allow him to visualize potential renovations in his home before committing to any changes.

Empathy Mapping

Empathy mapping is what allows put in users better, It helps a lot to identify the gaps between users need and the current solution they are using.

Sarah Mitchell

I want my kitchen to look modern and stylish, but it also needs to be practical for my family.
Finding a contractor I can trust to stay on budget and on schedule is so important.
There are so many options for materials and styles—it’s hard to make a decision!
I just want this process to be smooth and not disrupt my family’s daily life.

Am I choosing the right contractor, or could I find someone better?
What if the renovation runs over budget or doesn’t turn out the way I envisioned?
I hope these changes will significantly increase my home’s value in the long run.
I need to make sure this doesn’t become too stressful or time-consuming with my current workload.

Spends time browsing Pinterest and Instagram on her phone for renovation ideas and inspiration.
Researches contractors online, comparing reviews and exploring their portfolios on her laptop.
Consults friends or family who have completed similar projects for recommendations.
Uses online tools like quote calculators or scheduling apps to streamline her planning.

Overwhelmed by the sheer number of choices for contractors, materials, and designs.
Skeptical about the authenticity of online reviews and nervous about trusting the wrong company.
Excited about the prospect of creating a beautiful, updated home for her family to enjoy.
Excited about the prospect of creating a beautiful, updated home for her family to enjoy.
Anxious about the potential for delays or unexpected costs disrupting her plans and budget.

Information Architecture

Design Guideline

Create a clean, user-friendly interface that appeals to both homeowners and professionals by emphasizing a minimalist design. Use a predominantly white background to maintain a sense of openness and simplicity, complemented by pale green accents to evoke freshness and reliability. Prioritize clear navigation, high-quality imagery, and intuitive layouts, ensuring a seamless experience. Integrate features such as interactive tools, project galleries, and contact forms in a way that feels modern and approachable.

Aa

Inter

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q e s t u v w x y z

Regular

Medium

Bold

Brand Colors

#68736e

#000000

Additional Colors

#ffffff

#fefcfc

#f3f3f3

Hand Sketch

Starting with hand sketches, we brought ideas to life on paper, nurturing initial concepts with creativity and precision.

Wireframes

Wireframes play a crucial role in streamlining the design process, fostering collaboration among team members, and ultimately leading to the development of a well-structured, user-friendly digital product

General Design Approach

The homepage features a clean and intuitive layout, making it easy for users to navigate and explore content effortlessly. Key elements are emphasized, including the company’s portfolio photos to build trust with visitors and testimonials to strengthen the company’s credibility.

Key Takeaways

Challenges

Transitioning the outdated website to a modern, minimalist design while maintaining the company’s identity was a complex process that required careful attention to detail.
Ensuring the new design was fully optimized for mobile responsiveness presented technical and design challenges, as the original site lacked adaptability across devices.
Aligning the redesigned website with social media strategies to increase engagement and drive followers demanded a coordinated approach.
Balancing the aesthetic appeal of a sleek, modern design with the need for clear functionality and ease of use required continuous refinement and testing.

Lesson Learned

Maintaining consistency in visual style across the website and social media platforms proved essential for reinforcing brand recognition and trust.
Adopting a mobile-first approach ensured a seamless user experience across all devices, which is critical for modern web design.
Strategically placing clear and compelling call-to-actions, such as links to social platforms and contact forms, effectively encouraged user engagement and interaction.
Regularly updating the website with new project showcases and integrating active social media feeds helped keep the content relevant and engaging for users.

View Project

Work with Me

Follow Us

Search

Joey’s Grill