Website Re-Design for a Local Small Business
About:
Craft Cabinetry Installation (CCI) is a local general contractor business located in San Diego CA that specializes in IKEA cabinetry installation.
I originally met the owners of this company when my partner and I were remodeling our kitchen. CCI were so lovely to work with and after getting to know each other a bit I learned they were looking to get their website re-designed.
Tools
Figma
Miro
Timeline
3 weeks
25/hrs per week
My Role
UX research
Wireframes
Branding
Visual Design
Goals
I aim to redesign CCI's website to highlight their exceptional work, instilling confidence in potential clients and making essential information easily accessible.
The new website will feature a modern, stylish interface, mirroring the quality clients can expect for their cabinetry remodels
The Problem:
Usability
Their contractor's license number is missing
Different buttons link to the same place
Hamburger menu use on desktop pages
Visuals
CTA button colors are not consistent
Poor quality photos
The Solution
Key Features
Our Process Page
Addition of this page explains to users what to expect their renovation process to be like
Call to action buttons direct users to contact CCI
Transparent Information
I included their contractors license number is on the footer of every page
Users can view Yelp and Google external reviews from their landing page
Gallery Organization by Job
Allows users to easily see example projects of similar jobs they are interested in
Users can see more photos and details about a job once a project is clicked on
How we Got There
Research
Competitive Analysis
I researched one direct competitor, MEC, and two indirect competitors, IKEA and The Home Depot
Upon analyzing the competitors, I discovered that all three possess more contemporary, responsive websites compared to CCI's website.
MEC stands out as their most significant competition because they also specialize in installing IKEA cabinets and have a very modern website.
User Interviews
I had target users, people who have renovated cabinetry before or are in the process of cabinetry renovation compare CCI’s and MEC’s websites.
All users preferred MEC’s website and said they would contact them first.
All users observed that the photo quality on MEC's website was notably superior
User Pain Points
60% of users wanted to know about what the overall process would be like working for each company.
80% of users had trouble locating the contract’s license number on both websites.
60% of users were confused about CCI’s hamburger navigation in their desktop screens.
Research Synthesis
Combining what I learned from competitive analysis and user interviews I started thinking about key features I wanted to add to the website
A new "‘Our Process Page” to explain to users what to expect of their renovation process if they hired CCI
Reorganizing the Gallery Page by job type so users can navigate to the photos most similar to the job they are looking to get done
Expanded top navigation
Footer section that has their license number
Links to external reviews
How Might We
Enhance the Craft Cabinetry Installation website to ensure intuitive navigation, easy access to information, instill confidence in their craftsmanship, and achieve a substantial improvement in their online presence?
2. Building Empathy
User Personas
I developed two user personas to gain insights into the distinct needs of two target user groups: homeowners undertaking DIY renovations and industry professionals seeking subcontractors for hire.
3. Information Architecture
User Flow
The Ideal or “good” path I created is for users to scroll though and review CCI’s landing page and once they reach the end of the page feel confident to reach out and contact them.
4. Designing a Solution
Wireframes
This was my first attempt of the layout for desktop and mobile versions of this website.
From interviews I know how important client reviews are to other users so I moved that section high up on the landing page
My aim was to ensure that the most crucial information about CCI, which users seek, is well-structured and readily accessible.
Branding
I wanted to make sure their new website felt modern and professional, but not over the top or too fancy. I decided on a deep teal as the CTA color and removed the jarring orange color to emote sophistication and trustworthiness.
High Fi-Wireframes
5. Prototype & Test
Usability Testing
I conducted a total of 5 usability tests with my prototype website, all remotely on Zoom.
Research Goal
I wanted to see how users would rate my newly designed website vs. the original
I had them view and rate both websites for their first impressions on
Trustworthiness
Professionalism
Overall Look & Feel
Results
For all users the re-designed website scored significantly higher in all three categories
6. Iterations
To Iterate I decided to re-designed their Contact Us and Get A Quote Pages
Original Get a Quote Screen
Original Design Contact Us Screen
Updated Design
I updated this page to match the new design style and added added a question to give context about what type of job the user is asking about.
Updated Design
I added an area users can include a PDF to share with Royal and Jeremy.
Conclusion
Key Takeaways
This project significantly boosted my growth as a UX designer by teaching me how to deconstruct and reassess websites thoroughly. I identified what Craft Cabinetry Installations’ website felt outdated, leading users to favor a more modern competitor. To address this, I focused on enhancing CCI’s site to evoke trust and professionalism. aligning with user’s needs.
Next Steps
My next steps moving forward are to continue working with the clients and iterating on the design based on their feedback. Hopefully in the future we can find a developer to build the website so one day it can go live.
