0
25
50
75
100
%
Web Design

Urbanfloor

Role

UI/UX Designer

Client

Urbanfloor

Duration

5 weeks

Urbanfloor

Overview

To grasp the client's expectations fully, we engaged in discussions with the stakeholders, particularly focusing on revamping the homepage and collection pages to cater to the desired target audience.

Goals

The goal for Urbanfloor's website revamping project is to create a digital platform that seamlessly integrates our brand identity, showcases our superior flooring solutions, and delivers an unparalleled user experience, fostering stronger connections with our audience and setting new standards for excellence in the online space.

From the ground up

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.

Research and discovery

Initial Steps

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.

Description of the image

Stories and design planning

Mapping Out the User Experience

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:

1. Emma is a homeowner looking to remodel her living room. She visits the Urbanfloor website to explore different flooring options and read customer reviews to ensure she's making the right choice.

2. Liam is an interior designer who frequently recommends flooring to his clients. He visits the Urbanfloor site to easily access detailed product specifications and high-quality images that he can share with his clients.

3. Sophia is a contractor who has never used Urbanfloor products before. She is researching flooring suppliers and stumbles upon the Urbanfloor website. She needs to quickly understand the product range, availability, and pricing to make an informed decision.

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.

Description of the image

Built to resposive

mobile optimization

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.

Description of the image

Simplifying product comparisons

addressing user pain points

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.

Description of the image

Visual consistency

typography and style guide

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.

Description of the image

Inspiration and connectivity

Inspiration gallery

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.

Description of the image

Reflections and future directions

The past year has been transformative, marked by significant improvements to enhance user experience and drive conversions. By redesigning our product page templates to be more mobile-friendly and concise, we addressed user engagement issues. Heatmap analysis helped us reorganize content, ensuring that important storytelling elements were more accessible and impactful.

We also tackled the challenges of sticker shock and high bounce rates by reformatting product pages and introducing strategic upsell opportunities, boosting both average order value and overall revenue.

Navigating the complexities of e-commerce has been an enlightening experience, deepening my appreciation for the intricacies involved in creating a seamless online shopping journey. While there is always room for further enhancements, I am proud of the progress we’ve made. The past months have been fast-paced and challenging, yet incredibly rewarding, and I am excited about the continuous improvements and innovations we will bring to Urbanfloor’s online presence.

Get Template