Urbanfloor

Overview

In early 2021, I embarked on the journey of redesigning the Urbanfloor website. Despite being a well-established company, Urbanfloor's online presence didn't reflect the quality of its products. The existing site was outdated and failed to engage customers effectively. With the COVID-19 pandemic pushing more consumers to shop online, Urbanfloor decided to prioritize direct-to-consumer sales, recognizing that a strong website was crucial for increased profits and user engagement. The goal was clear: transform the digital presence to showcase their exquisite flooring, drive sales, and adapt to the new market realities. The challenge was immense, but the potential for impact was equally significant.

1. Initial Steps

Research and development

We kicked off the Urbanfloor redesign project by heading to the corporate office. Our team traveled across the city, meeting with members of the sales and marketing teams. Our goal was to gather authentic content and imagery for the website and to truly understand the needs and preferences of our target audience. We wanted to learn what drew people to Urbanfloor, what aspects of flooring were most important to them, and what motivated their purchasing decisions. We aimed to ensure the redesigned site resonated with these customers, addressing their unique needs and preferences.

2. Mapping Out the UX

Stores and design planning

After returning from our trip to the corporate office, we reviewed our notes and experiences to ensure the redesign would be both visually appealing and highly functional. To achieve this, I built the design around several user stories gathered from our field research:

I began by mapping out these user flows with sticky notes and quickly sketching ideas. Given that I had already presented a concept to the executive team, I had to align with their initial approval while refining the approach. After creating wireframes and grey-boxing the layout, I focused on defining the visual style of the homepage to ensure consistency across other pages. The new design needed to be visually distinct yet cohesive with Urbanfloor’s brand identity. This balance was crucial to appeal to our varied target audience while maintaining brand recognition.

3. Home

Communicating the value proposition

In redesigning the Urbanfloor website, the main goal is to clearly explain why their hardwood flooring is special. This means using a mix of smart design and persuasive writing to show off their high-quality products, eco-friendly practices, and creative designs. By making it easy for visitors to see what makes Urbanfloor unique, the new website will help turn curious browsers into satisfied customers.

4. Menu

Streamlined navigation

The streamlined navigation feature on Urbanfloor ensures users navigate the website effortlessly. Clear and organized pathways guide visitors seamlessly, with intuitive signposts and compelling calls-to-action facilitating a smooth journey from exploration to conversion. Moreover, the design aligns with the company's rebrand, adapting seamlessly to reflect Urbanfloor's refreshed identity.

5. Product Detail

Expressing Urbanfloor's unique hardwood excellence

To meet this challenge, the revamped Item website showcases dedicated product pages meticulously designed to highlight the unique strengths and benefits of each solution, along with the brand's overarching value proposition.

6. Product Comparison

Compare product easily

One of the main user pain points was that comparing flooring products was cluttered and confusing, making it difficult for users to make informed decisions. I addressed this by creating a streamlined comparison chart that allows users to easily compare product details and specifications, ensuring they find the perfect flooring option for their needs.

The product comparison feature addresses several key user pain points:

7. Inspiration Gallery

Inspiration and connectivity

Rather than merely showcasing our products, we wanted to inspire our customers by highlighting the beautiful interiors created with Urbanfloor products. The "Inspiration" page serves as a gallery, offering a collection of stunning house interiors that feature our flooring. This page not only provides design ideas and references for customers but also includes links to connect them with local dealers. By showcasing these elegant spaces, we aim to inspire creativity and demonstrate the transformative power of our flooring products, making it easier for customers to envision their own dream interiors.

8. Typography and Style

Visual consistency

We streamlined our design by updating the website typography, transitioning from multiple fonts to the sophisticated and elegant font families Iskry and Söhne, utilizing their various weights and styles. Additionally, we created a comprehensive web style guide that covered all design elements, including buttons, forms, modules, and sections, ensuring consistency and ease of use across the entire site. By re-platforming and refining our design approach, we enhanced scalability, improved performance, and set a solid foundation for future growth and innovation.

By re-platforming and refining our design approach, we enhanced scalability, improved performance, and set a solid foundation for future growth and innovation.

9. Mobile Optimization

Built to responsive

I recognized that many of our target customers were browsing for flooring options on their mobile devices. It was crucial to create a site that looked appealing on all devices, maintained a user-friendly design, and followed a strong grid structure to ensure everything remained tight and organized. Our goal was to provide a seamless and engaging experience, whether users were visiting from a smartphone, tablet, or desktop, ensuring that product information and visual appeal were consistently high-quality across all platforms.

Reflections and future directions

Urbanfloor's revolutionary phase has yielded remarkable outcomes and establishing the brand as a true industry leader. Moving forward, the team will continue to develop over 10+ standalone pages to represent the full spectrum of what Urbanfloor has to offer and beyond.