Urbanfloor
UI/UX Designer
Urbanfloor
5 weeks
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.
THE BUSINESS OBJECTIVE
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.
THE GOAL + VISION
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.
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:
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.
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.
Sophie
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.
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.
Selection View
Users can browse various flooring options, selecting products to compare by clicking a 'Compare' button on each product tile, which includes a high-quality image and product name, with selected products appearing in a comparison bar at the bottom of the screen.
Comparison View
Users can see the detailed specifications of selected products in a side-by-side format, including SKU, color, species, finish, plank width, plank length, wear layer, sq ft per box, waterproofing, scratch resistance, and install type, with options to add or remove products and a 'View Floor' button for more in-depth information.
The product comparison feature addresses several key user pain points:
Ease of Comparison
Users no longer need to open multiple tabs or navigate back and forth between product pages to compare specifications. This streamlined approach saves time and reduces frustration.
Informed Decision-Making
By displaying detailed product specifications side by side, users can make more informed decisions. This transparency ensures that users understand the differences and benefits of each product, leading to higher satisfaction with their purchase.
Enhanced User Experience
The intuitive design of the comparison feature, with clear images and organized information, enhances the overall user experience. Users can quickly find the information they need without feeling overwhelmed.
Customization and Flexibility
Users can customize their comparison by adding or removing products, tailoring the experience to their specific needs. This flexibility ensures that the feature remains useful for a wide range of customers, from homeowners to interior designers and contractors.
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.
Inspiration Gallery
The inspiration gallery page for the Urbanfloor redesign project showcases beautiful interiors featuring various flooring options, serving as a source of inspiration for homeowners and designers seeking creative ideas for their own spaces.
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.
Style Guide
The Urbanfloor style guide provides a comprehensive overview of the brand's design elements, including header designs for both desktop and mobile views, a detailed color palette featuring specific brand colors such as UF Orange and UF Dark Blue, and typography guidelines for titles, headings, and body text, ensuring visual consistency and coherence across all digital platforms.
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.
The Power of Effective Communication
Having a plan is only the first step; effective communication is essential to ensure everyone is aligned, informed, and empowered to contribute their best work. By sharing updates, clarifying requirements, and addressing challenges, clear and consistent communication builds trust, fosters collaboration, and drives the project forward towards its goals.
It's Always About the User
At its core, UI/UX design is fundamentally about the user—understanding their needs, preferences, and behaviors to create meaningful and intuitive experiences. By placing the user at the center of the design process, we ensure that every decision is driven by empathy and user-centricity.
Brand Guidelines Matter
Establishing proper brand guidelines is paramount when designing a UI/UX product or website. By defining key elements such as color palettes, typography, iconography, and voice and tone, brand guidelines ensure consistency across all touchpoints, fostering brand recognition and trust.