RUTKOWSKI RENOVATIONS
RESPONSIVE WEBSITE
ROLE
DURATION
Solo UX/UI Designer
2 weeks
TOOLS
FIGMA
Year
12/14/2024
Client
Rutkowski Renovations
Website will go live spring 2025
I designed and developed a responsive website for Rutkowski Renovations from the ground up, tailored for both mobile and desktop users. Starting from scratch, I crafted a professional online presence that showcases the company’s services, highlights completed projects, and builds trust with potential clients. The site features a user-friendly Request a Quote form, multiple contact options, and strategic calls to action, making it easy for clients to connect and inquire. This project demonstrates my ability to create impactful, client-focused solutions that elevate businesses in a competitive digital landscape.
Background
Rutkowski Renovations is a small, family-run business specializing in home renovation and finishing services, including painting, tiling, furniture assembly, and minor home improvements. Renowned for its quality work and attention to detail, the company has traditionally relied on newspaper ads and word-of-mouth to attract clients.
Problem Statement
Although the company provides excellent services, it struggles with low market visibility due to its reliance on outdated advertising methods. Without a strong online presence, Rutkowski Renovations misses opportunities to attract new clients and expand its business.
Solution
The solution was to create a modern, responsive website that:
Showcases Services and Portfolio: Highlights the company’s offerings and past projects to build trust and showcase expertise.
Request a Quote Form: Simplifies the process for potential clients to request project estimates, encouraging more inquiries.
Multiple Contact Options: Includes phone, email, and a contact form to provide flexibility and convenience for potential clients.
Improved Online Visibility: Enhances the company’s reach to attract a broader audience and compete in today’s digital-first marketplace.
How does Rutkowski Renovation website work?
Clear Call-to-Action for Engagement: Our Services & Get in Touch
Quick Access to Services"
Designed a clear, structured services section for easy navigation, allowing users to explore offerings at a glance.
Streamlined Renovation Process with Clear Steps & CTA
1. Reach Out
2. Plan Together
3. Get Started
A strong "See Our Work" CTA encourages users to explore completed projects and take the next step.
Client Reviews: Built on Trust & Quality
A dedicated section showcasing real testimonials from satisfied clients, reinforcing credibility and highlighting the company's craftsmanship and reliability.
Seamless Contact Section for Easy Communication
At the end of the page, I designed a clear and accessible contact section, allowing users to reach out via phone, email, or a contact form, with essential business details for transparency.
Clear & Accessible Navigation with Essential Pages: About, Services, Recent Projects, Contact, Calendar, and Testimonials along with a language switcher and a prominent "Get a Quote" button for easy access.
INTERVIEWS
Conduct one-on-one interviews with potential clients to gather detailed insights into their needs and expectations.
Affinity Mapping
After conducting my research, I moved on to affinity mapping. I created sticky notes with all the important information and quotes I gathered. Then, I grouped similar issues together to identify common themes and insights.
This process resulted in eight key topics:
How Clients Search for Renovation Services
Factors Influencing the Choice of a Renovation Company
Expectations from a Website
Desired Features on a Website
Challenges and Missing Features
Professional and Trustworthy Website Elements
Standout Features for a Website
Preferred Communication Methods
Key Insights
In the Define stage, I created Point of View (POV) statements and How Might We (HMW) questions to clearly define user needs and uncover opportunities. This user-focused approach provided a framework for addressing key challenges and guided the ideation process.
SURVEY
Use online surveys to reach a larger audience and validate findings from the interviews.
Contact Options: People expect various ways to contact the company, as preferences differ. Some prefer direct options like phone calls or emails, while others want the convenience of an online form.
Legitimacy and Trust: Potential clients want clear indicators that the company is legitimate and trustworthy. This includes professional branding, transparent information, and detailed service descriptions.
Pricing Information: Many people expect to see services listed with pricing details on the website. They prefer not to have to call or email just to inquire about costs.
Client Reviews: Reviews are crucial. People want to read what others have to say about the company to determine if it’s worth hiring.
POV & HMW
Design Process
EMPATHIZE
EMPATHIZE
COMPETITIVE ANALYSIS
Review websites of similar renovation businesses to understand common features and identify areas for improvement.
Previous Work: People want to see examples of the company’s previous work. This helps them understand the quality and scope of what the company has done before, building trust and confidence.
Process Clarity: Users want to understand how the entire process will look from start to finish. Clear steps or timelines build confidence in working with the company.
Convenient Features: Features like a “Get a Quote” option, allowing users to send a request without needing to call or email, are highly valued as they save time and make the process easier for potential clients.
Availability Calendar: People want to see a calendar with available dates for consultations or project start times. This helps them plan and make decisions more efficiently without unnecessary back-and-forth communication.
Competitive Analysis
I analyzed four competitors—Domwell, Krakow Construction, Piotr Czerwiński Usługi Remontowe, and Createpro—because they showcase features relevant to renovation businesses, such as project portfolios, service descriptions, and customer trust-building through testimonials. Rutkowski Renovations aims to integrate these elements into a seamless website that also includes request-a-quote forms, multiple contact options, and a calendar for availability, enhancing usability and engagement.
From my competitive analysis, I found that while these companies offer strong individual features, none combines transparent pricing, intuitive navigation, multiple contact options, and tools like a request-a-quote form and availability calendar into a cohesive experience. This highlights a clear opportunity for Rutkowski Renovations to stand out by providing a professional, user-friendly website that meets client needs comprehensively.
DEFINE
DEFINE
I want to explore the types of information a website for Rutkowski Renovations should include to meet user needs and expectations. I’m focusing on providing clear details about the company and owner, services, pricing, reviews, portfolio examples, the renovation process, and accessible contact options like email, phone, and online forms to ensure users can make confident and informed decisions.
PERSONA
I created a persona to represent the target user for Rutkowski Renovations. This helped me understand the needs, goals, and challenges of potential clients, ensuring the design solutions were user-focused and aligned with their expectations. The persona guided decision-making throughout the project, keeping the user’s perspective at the center of the process.
Goals
Understand User Needs and Expectations - Identify what information potential clients expect to find on a renovation website (e.g., service details, project photos, testimonials).
Discover Engagement Preferences - Learn how users prefer to interact with the website, such as requesting quotes, booking consultations, or contacting the business directly.
Pinpoint Pain Points - Understand frustrations users face when searching for and hiring renovation services online.
Explore Differentiation Opportunities - Identify how Rutkowski Renovations can stand out from competitors by addressing unmet user needs.
Research methods
HMW Question 1: How might we present clear and detailed information about the company and owner to build trust and transparency with users?
HMW Question 2: How might we effectively showcase services, pricing, reviews, and portfolio examples to help users make confident decisions?
HMW Question 3: How might we clearly explain the renovation process to ensure users feel prepared and informed?
HMW Question 4: How might we design accessible and user-friendly contact options (email, phone, and online forms) to make it easy for users to reach out?
IDEATE
IDEATE
Business Goals & User Goals & Common Goals
In designing the website for Rutkowski Renovations, I focused on aligning both user goals and business goals, ensuring that the shared priorities of potential clients and the company’s objectives were at the core of the project.
Business Goals
Increase market visibility and attract more clients through a professional online presence.
Showcase quality work with a detailed portfolio and client testimonials to build trust and credibility.
Provide clear and transparent pricing to improve client satisfaction and decision-making.
Streamline communication with multiple contact options and quick response times.
Offer tools like calculators and calendars to simplify the planning process for clients.
Common Goals
Build trust between the company and clients through transparency and professionalism.
Create a user-friendly website that addresses business needs (showcasing portfolio, providing pricing transparency, building credibility) and user needs (finding verified reviews, accessing detailed information, and using helpful tools like calculators and filters).
Streamline the process of finding and contacting renovation services.
Enhance the decision-making process by providing detailed and relevant information.
Strengthen the company's reputation and user satisfaction with tools like a cost calculator, portfolio sorting options, project details form, and contact features (email, phone, and online forms).
FEATURE ROADMAP
I created a feature roadmap to prioritize the essential, nice-to-have, and long-term features for the Rutkowski Renovations website. This helped me organize the functionality based on user needs and business goals identified through interviews and competitive analysis. This roadmap clarified the steps to build a functional and user-focused website while leaving room for future enhancements.
MUST HAVE FEATURES
User-Friendly Contact Options
Contact Form - A simple form for users to contact directly via website (send message)
Direct Contact Options - Display email and phone details prominently
Request a Quote
A simple form for users to describe their project and request a quote. Describe their project in detail (e.g., room size, type of renovation, location, specify their expectations, timeline
Company Information & Transparency
About Us Page - A dedicated page with details about the company’s history, mission, and owner biography to build trust and credibility.
Certifications & Legitimacy - Display certifications, license
USER FLOW & TASK FLOW
I created user flows and task flows to map out how potential clients would navigate the website to accomplish key tasks.I designed user flows focusing on two primary goals: contacting Rutkowski Renovations and exploring the portfolio. The task flows were centered around key actions, including contacting the business via the online form and requesting a quote, ensuring a smooth and intuitive experience for users.
User flow: Browsing Specific Projects
User flow: Contact Rutkowski Renovations
Task flow: Request a quote
Task flow: Contact via online form
BRANDING
Fonts
When creating the website for Rutkowski Renovations, I started by establishing the branding. This included designing the logo, selecting the color palette, and choosing fonts to ensure a cohesive and professional look. This branding laid the foundation for the website's consistent and polished appearance.
I designed this Rutkowski Renovations logo to reflect craftsmanship and quality. The house with a paintbrush symbolizes renovation, while the gold swoosh represents transformation. The deep blue text conveys trust and professionalism, creating a strong and memorable brand identity.
UI Kit
Color Palette
WIREFRAMES
I began by creating low-fidelity wireframes for the desktop version of the website to map out the structure and layout. After testing these wireframes, I gathered feedback and made revisions to improve the design. Once the adjustments were finalized, I developed high-fidelity wireframes to ensure the website's visual and functional elements were polished. After validating the high-fidelity version, I created a mobile-responsive design to ensure the website performed seamlessly across devices.
During early user testing of the low-fidelity wireframes, I gathered valuable feedback on the website's structure and navigation.
Revision 1 - Adding arrows in portfolio sections
Find a trustworthy renovation company with verified reviews and clear proof of past work.
Access transparent pricing and detailed project information to make informed decisions.
Easily navigate the website to locate services, contact details, and working hours.
Save time with helpful tools like project forms, cost calculators, and portfolio filters.
Understand the renovation process clearly to feel prepared and confident.
Reviews Section
Verified client reviews
Calendar
A calendar showing when the company is available for project start dates
Sticky Navigation: 20% of participants (1/5) recommended making the menu stick to the top while scrolling.
PROTOTYPING
&
TESTING
&
PROTOTYPING & TESTING &
Summary of user testing - 1 round - low fidelity wireframes
Add a Calendar Page: Prioritize this feature since 60% requested it.
Combine Services and Pricing: Consider integrating these sections for clarity (40% suggested).
Maintain Clear Navigation: No changes needed here.
Recent Project Button- change to Services button (⅗ people go to services)
Summary of usability test - 2 round - high fidelity wireframes
Services Section
A clear, organized list of services with detailed descriptions
Portfolio Section
A portfolio showcasing before-and-after examples
Pricing Section
costs for individual services
Renovation Process Overview
general explanation of the renovation process
Moving on to the usability test on the high-fidelity wireframes, I evaluated how well users could navigate the site and complete key tasks, such as exploring the portfolio and using the contact form. The results showed that the design was intuitive and user-friendly, with minimal adjustments needed to enhance clarity and functionality. This testing confirmed the design's readiness for the responsive mobile version.
Key Suggestions & Priority Revisions
Due to time constraints and the complexity of the project, several improvements and additions remain clear priorities for the future. These include:
About Us Page: Creating a dedicated page to share the company's story, mission, and team, further building trust and connection with potential clients.
Testimonials Page: Designing a section to showcase client feedback and reviews, enhancing credibility and demonstrating customer satisfaction.
Calendar Page: Adding a functional calendar to display availability or project scheduling, providing users with a practical and transparent planning tool.
These improvements will complete the website's features, ensuring it fully meets user needs and solidifies Rutkowski Renovations' online presence.
Portfolio: 40% of participants (2/5) suggested adding more pictures and enabling scrolling with arrows.
Revision 2 - Sticky navigation
The Rutkowski Renovations website project successfully addressed the company's need for a professional online presence, improving visibility and accessibility for potential clients. By focusing on user-centered design, the site now showcases the company’s services, builds trust through testimonials and transparent information, and simplifies client interactions with features like a contact form and request-a-quote option. While there are future opportunities to expand the site with pages like About Us, Testimonials, and a Calendar, the current design establishes a strong foundation to support the company’s growth in the digital space. This project involved working with a real client, and the website is set to go live in spring.
From this experience, I learned two key things:
Test Early: Testing early in the project is important because it helps shape improvements and catch issues sooner.
Plan and Finish: Good time management is key. Finishing tasks the same day keeps the work organized and avoids delays.
These lessons will help me work more efficiently on future projects.
The website is easy to use, clear, and looks great: 100% of participants (5/5) mentioned this.
Users loved features like the quote form: 60% of participants (3/5) specifically highlighted this.
The portfolio section was appreciated: 80% of participants (4/5) mentioned liking the portfolio.
The pricing section was praised for its clarity: 40% of participants (2/5) highlighted this as a favorite feature.
