UX Design

DEN Outdoors

Project scope

Website goals

DEN Outdoors offers efficient PDF house plans with customization options to simplify building dream homes. Due to the nature of their product (house plans are not exactly an impulse purchase), they were looking for advice to educate prospecting visitors and to reduce the number of CX questions.

What I worked on
  • Redesigned the homepage, navigation menu, cart, and product page in 2022
  • Designed the landing page and product page for a new product offering, BuiltBy DEN in 2023
Results
  • Lowered overall bounce rates and exit rates
  • Signups for BuiltBy DEN surpassed the original goals

Initial Research

Learning how people shop for homes

As a smaller and newer company, DEN was having personal conversations with its customers and following them on their homebuilding process. Because of this, we had a lot of information about what competitors users had considered and why they ultimately chose DEN and we knew DEN's main value propositions were their quality plans and customer service.

Benchmarking similar companies

I assessed how other companies in a similar space were marketing their products and what keywords kept popping up. There were quite a few direct competitors, and we wanted to make sure our updates would appeal the most to customers and stand out from the crowd while not needing to reinvent the wheel or take enormous risks for our clients.

What I learned worked well
  • Include inspiring copy such as 'dream home' and 'perfect city getaway' to keep visitors engaged
  • Keep things visual-heavy; large, full-screen images dominated homepages
  • Showcase beautiful products to capture attention before delving into the details
  • Keep the navigation menu as simple as possible and guide users through exploring different buidls
Competitor 1Competitor 2Competitor 3Competitor 4Competitor 5Competitor 6

Navigation redesign

Designing an expansive navigation menu

Simplifying product categories

A main priority was to make sure users could easily choose between all of the different plans DEN offered, so I first grouped all of their current products while keeping in mind possible future launches.

DEN full range of products
Intuitive tabs

I divided the navigation tabs into Shop, Inspire, and Learn. I wanted a large, visual navigation menu that matched the direction of the rest of the site redesign, and experimented with a few different approaches. I focused first on the Shop tab, settling on using a sidebar menu to display all the product categories, with multiple product images displayed for each collection.

DEN navigation menu

Homepage redesign

Designing an informative landing page

The first page I tackled was the homepage, as it was DEN's main landing page and received the most traffic. The goal for this redesign was to 1) better sell the concept of dream homes, 2) communicate DEN's offerings and benefits to first-time visitors, and 3) transform the homepage into a more visual experience.

Optimizing the product panel for easy browsing

I wanted to make sure users could navigate between the different types of homes, and I also wanted to list key features of each plan underneath each product name, such as square footage and number of bedrooms. Providing this information would help users make informed decisions on what plans to click into, making the overall user experience more pleasant.

Design exploration

DEN plans version 1

Version 1

This version took up too much vertical real estate, and would force DEN to produce images for each plan type.

DEN plans version 2

Version 2

This version took up too much horizontal real estate for the title and didn't look as elevated.

DEN plans version 3

Version 3

This version was closest to what we ended up launching, but we also added a CTA button and reduced the size of the images to show more products at a time.

What was launched

The new homepage highlights how anyone can be able to build their own dream home with the help of DEN, and provides an abundance of success stories.

Den homepage
Homepage - BeforeHomepage - After
Den homepage updates

PDP redesign

Improving conversion rates

Next, I tackled the product page, which originally was a basic Shopify template. My priority was to make it more obvious that the more affordable Starter Package was what we recommended new customers start with, and that they could easily upgrade to the Complete Package whenever they were ready to commit to a build.

Optimizing the top of the fold

I wanted to make the shopping experience as easy as possible and to include all of the specifications such as square footage and number of bedrooms at the top of the page.

Design exploration

DEN product page version 1

Version 1

Easiest to build, with all of the features at the top of the page. More clinical approach that doesn't inspire.

DEN product page version 2

Version 2

Focus on the 2 types of packages for each building plan. This works well for typical e-commerce products but we wanted more focus on the gorgeous product images.

DEN product page version 3

Version 3

Quick snapshot at the very top with heavy emphasis on product image carousel. This approach works well since customers might visit the PDP multiple times before making a purchase.

What was launched

This new PDP focuses on large images and showing real-life results from previous clients.

Den product page
Den PDPDen PDP After
Den product page updates

Cart

I simultaneously tackled two main problems when I worked on the cart: 1) allowing DEN the flexibility to test out special offers, 2) increase checkout rates, since most visitors were adding to cart and dropping off before completing a purchase.

Design exploration

DEN cart with special offer

Special offer

Full-width callout built into the cart so users don't miss out on the special offer. Users can skip the screen if they don't want to add the offer to their cart.

DEN cart with tags

product tags

Callouts for each product to show how easy it is to download or upgrade your purchases.

DEN cart

cross-selling panel

To increase AOV (average order value), adding a few smaller products at the bottom of the cart tends to work well across industries.

What was launched

Since all of DEN's products are online rather than physical, the Instant Download tag proved to be unnecessarily repetitive, so I moved it to the bottom of the cart near the subtotal. I also added a callout about 24/7 customer support to show that it would be easy to get in contact with a representative for any support you'd need.

DEN cart

Snapshot of the design system

Design system

Impact

  • Lowered overall bounce rates and exit rates
  • Signups for BuiltBy DEN surpassed the original goals

Learnings and next steps

I had focused so much on making the navigation menu as visual as possible without properly considering scalability, and we had to revisit the menu to accommodate for the new BuiltBy DEN pages. Now, the current navigation menu is much more simple and scalable, with room for future products and collections.

The next steps would be to tackle the How it Works pages to see if we could combine all three pages into one comprehensive guide.