Home flooring website design

Voigtländer Bodenkonzepte, a family-run business located in Hasbergen, Germany, has been bringing spatial visions to life since its inception in 2017. The company offers a comprehensive range of home renovation services, specializing in flooring concepts, from parquet to acoustic panels, and customized cabinet combinations. Their commitment to precise planning and a personalized approach allows them to deliver unique spatial solutions that transform both private homes and commercial premises.

Voigtländer Bodenkonzepte approached us at District-22 to design a modern, user-friendly website that would enable their clients to visualize, explore, and engage with their offerings online. The goal was to reflect their commitment to personalized, high-quality services through a streamlined digital experience. This case study explores how we approached the UI/UX design for their homepage, category page, product page, and checkout process using Figma, and how our design catered to both their business needs and customer expectations.

Project Goals

Our primary goal was to translate the essence of Voigtländer Bodenkonzepte’s tailored home renovation services into a digital experience that was:

1. User-Centered: The website needed to cater to both individual homeowners and businesses, providing a seamless experience from browsing products to finalizing purchases.
2. Visually Engaging: The website had to showcase Voigtländer’s expertise in spatial design, flooring, and interior concepts. Visual appeal was crucial for customers looking for inspiration and customization.
3. Easy to Navigate: With a diverse array of services and products, the website had to present information clearly, ensuring that users could find what they needed quickly and efficiently.
4. Effortless Checkout: A key objective was to create a frictionless checkout process that converted browsers into buyers, without unnecessary steps or complexities.

Research & Discovery

To start the design process, we conducted a thorough discovery phase. This included:

• Competitor Analysis: We explored websites of competitors in the home renovation and flooring industries, identifying strengths and weaknesses in terms of user interface and experience.
• User Persona Development: We created user personas based on Voigtländer’s two primary customer groups: private homeowners and commercial clients. Understanding their needs allowed us to prioritize functionality and design features that would appeal to each group.
• Client Consultation: Through meetings with the Voigtländer team, we gained a deep understanding of their unique selling points, which centered on personalized service and high-quality craftsmanship. This insight helped us design a site that would resonate with their target audience.

Design Process

1. Homepage UI/UX Design

The homepage is the digital storefront, and for Voigtländer Bodenkonzepte, it needed to make a strong first impression. Our design focused on three key aspects:

• Visual Appeal: We used high-resolution images of their completed projects to immediately engage users, showcasing Voigtländer’s range of services and the quality of their work. The images were strategically placed in a carousel format to allow users to view different home renovation concepts quickly.
• Clear Value Proposition: The homepage opens with a concise, impactful statement: “Bringing Your Spatial Visions to Life.” This immediately communicates Voigtländer’s commitment to personalized, high-quality service. We supported this with smaller text sections explaining their service offerings, such as parquet floors, acoustic panels, and custom cabinetry.
• Navigation and Accessibility: The navigation bar is clean and minimalist, providing quick access to the main categories: "Services," "Materials," "Projects," and "Contact." Users can navigate the site without feeling overwhelmed, thanks to a simple, intuitive design structure. The design also ensured full responsiveness across devices, from desktop to mobile.

‍

2. Category Page Design

Voigtländer’s range of services and products, from parquet flooring to custom cabinetry, needed to be presented in a manner that was easy to browse. For the category pages, we implemented:

• Grid Layout: A clear, grid-based layout helps users easily browse through different types of flooring materials or furniture. Each item is presented with a high-quality image and a short description, allowing users to quickly identify what they’re interested in.
• Filter Options: The design included advanced filtering options, allowing users to filter products by material type (parquet, elastic, textile flooring), color, and application (private or commercial). This feature simplifies the search process and ensures users can find what they need with ease.
• Interactive Features: Hover effects were added to each product tile to provide additional information, such as price and availability, without cluttering the page. This creates an engaging and dynamic browsing experience.

3. Product Page Design

The product pages serve as the final step in the decision-making process for customers. To support conversions, we focused on:

• Detailed Product Information: Each product page includes a detailed description of the material, available customizations, and suggestions for pairing with other Voigtländer services (e.g., matching flooring with acoustic panels). This comprehensive information helps customers make informed decisions.
• High-Quality Imagery: We designed product pages to feature large, detailed images, allowing users to see textures, patterns, and finishes up close. This visual detail is critical in the home renovation industry, where materials must be carefully examined before purchase.
• Customer Reviews and Testimonials: To build trust, the product pages also feature customer testimonials and reviews. These user-generated elements enhance credibility and can significantly influence purchasing decisions.

‍

4. Checkout Process Design

For Voigtländer Bodenkonzepte, streamlining the checkout process was crucial in ensuring customers had a smooth transition from browsing to purchasing. We designed the checkout process to be:

• Simple and Intuitive: We minimized the number of steps involved, reducing potential drop-off points. Users can review their cart, input payment information, and confirm their purchase all on a single page. Key information such as product details, prices, and shipping options are clearly displayed to avoid confusion.
• Secure and Trustworthy: Security was emphasized through the use of well-placed trust indicators, such as SSL badges and payment icons (e.g., Visa, PayPal), to assure users that their transactions were secure.
• Guest Checkout Option: Recognizing that some users might not want to create an account, we incorporated a guest checkout feature. This reduces friction for first-time buyers and enhances the overall user experience.

Design Elements and Visual Identity

Color Palette: Voigtländer’s website design leverages earthy tones that reflect their focus on natural materials like wood and stone. Shades of brown, beige, and light gray dominate the color scheme, evoking a sense of warmth and quality craftsmanship.

Typography: We chose a clean, modern typeface that was both professional and approachable. Headings are bold and eye-catching, while body text remains highly readable, ensuring users can easily consume information without straining their eyes.

Imagery: To highlight the craftsmanship and attention to detail that Voigtländer Bodenkonzepte is known for, we integrated large, high-quality images throughout the website. The images not only showcase the beauty of their work but also inspire users by giving them a glimpse of what their own home or business could look like.

Results and Impact

The new UI/UX design for Voigtländer Bodenkonzepte’s website successfully transformed their online presence, offering customers a seamless and engaging digital experience. Key outcomes included:

1. Improved User Engagement: The visually appealing homepage and easy-to-navigate design resulted in increased user engagement, with visitors spending more time exploring the site and its various offerings.
2. Higher Conversion Rates: The streamlined product pages and simplified checkout process led to a noticeable increase in conversions, with more users completing their purchases without abandoning their carts.
3. Enhanced Brand Perception: The professional, high-quality design of the website aligned with Voigtländer’s brand image as a provider of premium home renovation services, enhancing their reputation and credibility in the market.

Conclusion

The UI/UX design and development project for Voigtländer Bodenkonzepte successfully captured the company’s dedication to delivering personalized, high-quality home renovation solutions. By creating a user-friendly and visually appealing digital platform, we helped Voigtländer connect with their customers more effectively, ultimately driving business growth and reinforcing their brand identity as a leader in the home renovation industry. Through thoughtful design and a focus on user experience, we were able to bring their commitment to craftsmanship and customer satisfaction to life online.

‍