Crown Cabinetry | UX/UI Designer

Crown Cabinetry Website Design

OVERVIEW

As the UX/UI designer for Crown Cabinetry, I redesigned the website to showcase their custom cabinetry, focusing on wood quality and distinct styles (traditional, transitional, and modern). The minimalist design streamlined navigation, guiding users to product details and customization options. Based on empathy mapping, I prioritized clear product categories and high-quality images, while incorporating earthy tones and textures to reflect the craftsmanship and woodworking essence.

Roles

As the UX/UI designer for Crown Cabinetry, I redesigned the website to align with both the client’s needs and user experience. The client wanted to showcase their custom cabinetry, focusing on wood quality and distinct styles: traditional, transitional, and modern. The design incorporated minimal aesthetics to streamline navigation while guiding users to the information they sought, such as product details and customization options.

Tools: Figma
Timeline: Spring 2024 (8 weeks)

Skills Applied:

Ideation and brainstorming
Crafting user stories and flows
Persona development
Empathy mapping
Sketching, wire-framing, and prototyping
User testing and analysis
Branding

Problem

Crown Cabinetry's original website struggled to effectively showcase its high-quality custom cabinetry and distinct styles. The site lacked clear navigation, making it difficult for users to find relevant product details, customization options, and inspiration. Additionally, the design didn’t adequately reflect the craftsmanship or the essence of the brand, leading to a disconnect between the company’s expertise and the user’s online experience. This hindered user engagement and limited the site's ability to convert visitors into leads.

Solution

The solution for the Crown Cabinetry website redesign emphasized a user-friendly and visually engaging experience. We streamlined navigation, organized product categories, and showcased high-quality images to facilitate the exploration of cabinetry styles and customization options. Woody tones and textures were integrated into the design to evoke woodworking, aligning with the client's focus on craftsmanship.

Audience

Interior Designers: Professionals seeking high-quality cabinetry options for their projects, looking for detailed specifications and customization capabilities.
Homeowners: Individuals interested in upgrading or renovating their spaces, searching for inspiration, styles, and practical information on cabinetry.
Contractors and Builders: Those seeking reliable cabinetry solutions that balance aesthetics, functionality, and client needs.
Architects: Professionals looking for unique cabinetry styles that emphasize craftsmanship and material quality.

Tools

Tools Used in This Project:

Figma, Adobe Creative Suites, Google Optimize (for A/B testing)

Goal

Enhance User Engagement: Develop an intuitive, visually appealing experience that encourages users to explore cabinetry styles and customization options.
Boost Conversions: Improve the visibility of calls-to-action and simplify the user journey to increase inquiries and consultations.
Showcase Craftsmanship: Highlight Crown Cabinetry's expertise by showcasing high-quality images and detailed product descriptions.
Optimize Mobile Experience: Ensure the website is fully responsive, providing a seamless experience for mobile users.
Increase Brand Trust: Establish Crown Cabinetry as a trusted leader in custom cabinetry by emphasizing quality materials and craftsmanship throughout the site.

Design Process

Underestand

User research

Define

User persona

Empathy map

Ideate

User flow

Information Architecture

Design

Wireframe

Hi-Fi Designs

Prototype

Test

Feedback

Conclusion

User research

Before beginning the design, I conducted user research to gain insights into Crown Cabinetry's target audience, which included homeowners and designers seeking custom cabinetry solutions. Using Persona, and empathy maps, I captured user sentiments and motivations regarding the customization process, design inspiration, and the assurance of craftsmanship quality. This research shaped the design strategy, ensuring the website catered to both emotional and practical needs, such as offering clear product categories, showcasing premium materials, and providing an intuitive browsing experience that facilitated design exploration and inspiration.

Persona

Drawing on insights from proto-personas and data gathered from user interviews, I created a detailed persona that embodies the target users of the Crown Cabinetry website. This persona informed our design decisions, ensuring the website effectively addresses user needs and expectations for a streamlined, engaging experience in exploring custom cabinetry options.

Empathy Mapping

Empathy mapping was crucial in understanding the needs and pain points of Crown Cabinetry's target audience—interior designers and homeowners. This approach emphasized their preference for high-quality craftsmanship and distinctive styles, allowing us to design a website that effectively showcases Crown Cabinetry's offerings and reinforces its reputation for quality and customization.

Key insights from the empathy map guided the design choices:

Feelings: Users are excited yet overwhelmed by cabinetry choices, and need clear, organized information.
Thinking: Users prioritize the materials used, style options, and customization.
Seeing: They want to visually compare the three cabinetry styles and materials.
Doing: Users often explore various styles before seeking a consultation or quote.

Based on the empathy map insights, I focused on:

Crafting a visually appealing, well-organized layout that instills confidence in the quality of craftsmanship.
Ensuring easy access to product categories and detailed material information.
Simplifying the customization process for effortless exploration of options.
Incorporating high-quality imagery to inspire and inform design choices.
Creating clear pathways for users to request quotes and engage with the brand.

User flow

To streamline the path from inspiration to customization, I mapped out key user journeys.

For instance: A visitor starts on the homepage, browsing various cabinetry styles, then selects a specific style to view customization options. After exploring design ideas in the inspiration gallery, they can easily navigate to detailed product information. This flow ensures users can easily navigate from discovering designs to making informed decisions about their cabinetry choices.

Information Architecture

The website’s structure was designed to provide an intuitive user flow, helping visitors quickly find and explore cabinetry options.
Homepage: Featured an overview of the cabinetry styles, quality materials, and trust-building elements like customer testimonials.
Cabinet Styles: Traditional, transitional, and modern categories were prominently displayed with hover effects that zoomed in on images to enhance user engagement.

Simplified Navigation
 A clear, minimalist navigation allowed users to browse styles, get inspired, and contact the company for quotes or consultations. Sticky headers ensured users could easily switch between styles or explore further without scrolling.

Conversion Optimization (A/B Testing)

Key Elements Tested:

CTAs: Different versions of the CTAs were tested, focusing on positioning and color variations. Bold colors paired with action-oriented text like “See Details” showed improved engagement, leading to a 20% increase in user interactions. This adjustment not only captured attention but also encouraged users to explore cabinetry options more thoroughly, enhancing their overall experience.
The gallery layout: The A/B testing evaluated two gallery designs: one minimalistic, allowing users to focus on cabinetry details, and another with additional visual elements. The minimal layout significantly outperformed the alternative, resulting in a 25% increase in user engagement. This shows that a simple design enhances users' appreciation for craftsmanship and makes it easier to explore customization options.
A hover-zoom gallery with zoom effects: The zoom effect resulted in a 30% higher engagement as it provided users with a more interactive experience.

Visual and Interactive Elements

Color Palette
Inspired by wood tones, the color palette featured rich browns, neutral whites, and gray tones to evoke warmth and craftsmanship. This helped to visually connect the site to the client’s woodworking expertise.

Typography
A sans-serif font was chosen to balance modern aesthetics with high readability across devices. Headers were bold and large, ensuring that users could quickly grasp key information like pricing, storage features, or promotions.

Interactive Elements

Enhance User Engagement with Interactive Zoom Effects: Use subtle hover effects on buttons and links to create a sense of depth, reflecting the nuances of interior design. Prominent calls-to-action like "Get a Free Proposal" and "Call Us Today" guide users smoothly through the site’s conversion paths.

Imagery

Showcase Expertise and Build Trust with High-Quality Imagery: Featuring stunning images of client projects and team members highlights the company’s craftsmanship while humanizing the brand, fostering a deeper connection and trust with visitors.

Mobile Responsiveness

Given the mobile usage trends, the site was designed to be fully responsive across desktop, tablet, and mobile. Each page and section adapted fluidly to smaller screens, ensuring that users could navigate and engage with content on any device.

Wireframe Design

The initial wireframes for Crown Cabinetry's homepage were crafted to ensure an intuitive layout that highlights essential features like clear navigation, effective CTAs, and detailed product information. This design strategy focused on enhancing user flow by addressing pain points related to design inspiration and quality assurance. By balancing functionality and visual appeal, the site aims to provide a seamless experience, allowing customers to easily explore and customize their cabinetry options.

Here are some examples of the wireframes:

Low-Fidelity Prototype:

The low-fidelity prototypes for the Crown Cabinetry website were developed through insights from user research and client feedback. These initial wireframes focused on functionality and user navigation, utilizing simple visuals and placeholders to highlight key interactions, such as browsing cabinetry styles and accessing customization features. This iterative process allowed for swift adjustments and gathered feedback, ensuring that the design met both user expectations and client requirements before advancing to the high-fidelity design stage.

High-Fidelity Prototype:

After refining the wireframes with user feedback, I created high-fidelity prototypes for Crown Cabinetry, incorporating finalized design elements such as colors, typography, icons, and images to enhance usability and visual appeal. Following client approval of the homepage and product pages, I moved on to design the additional sections while ensuring continuous communication. This process prioritized user experience, aligning the design closely with user needs and the company’s business objectives.

Here are some examples of the High-Fidelity Prototype:

Internal Pages for Crown Cabinetry

These pages are crafted to ensure a smooth, user-friendly experience while showcasing Crown Cabinetry’s expertise.

Services: This page is divided into three key categories—Wood, Paint, and Stain. Each section highlights Crown’s dedication to quality materials, finishes, and custom cabinetry solutions, providing detailed information about the options available to suit various design needs.
Gallery: A categorized display of completed projects, organized by Traditional, Transitional, and Modern styles. High-quality imagery showcases the breadth of Crown’s work and serves as inspiration for potential clients.
About Us: Introducing Crown Cabinetry’s mission, values, and team, this page builds trust by sharing the story behind the brand and its commitment to craftsmanship.
Contact Us: A simple and accessible contact page featuring a form and direct contact information for easy inquiries and consultations.

This structure enhances the user experience, making it easy to explore services and find inspiration in Crown Cabinetry’s portfolio. Let me know if you'd like any changes!

Conclusion

The redesign of Crown Cabinetry’s website successfully balanced the client’s desire to showcase their craftsmanship with the need for an intuitive, user-friendly experience. By using empathy mapping to understand the target audience and conducting A/B testing to refine the design, the new site increased user engagement and conversions, while maintaining a clean, minimal aesthetic that reflected the brand’s values.