Business of Home

Redesign the home industry's

leading business media.

UI

New Design system

UX

Summary

Project Overview

Established in 2009, Business of Home has become the home industry’s leading business media brand, delivering essential news, analysis, and insights to interior designers and industry professionals.


In 2024, BOH joined the Recurrent Ventures. To celebrate this high point, BOH wants a fresh new look to showcase its professionalism.

My Role & Constrains

As the sole Product Designer, my primary responsibility was to lead the UI redesign.

The key challenge was balancing the need for a refreshed visual experience with the constraints of limited engineering resources (one engineer) and maintaining the existing technical architecture due to legacy code dependencies.

Deliverables

UI redesign for reader-facing website

UI redesign for user dashboard

New design system

UX improvement for website & editor tools

highlights

96+ web pages redesign

100+ components new design system

20+ UX bugs fixed

Challenge - visual clutter

The original design featured a well-established information structure, but its visuals felt outdated, with a gray background and multiple stacked text cards. This created a cluttered appearance that disrupted the reading experience.

Solution - less is more

After analyzing multiple leading media websites, we opted for a minimalist approach—removing unnecessary visual elements to let the content take center stage. The new design features updated section headers and optimized spacing, ensuring related content is grouped together while maintaining a modern, clean aesthetic.

home Before

home After

article Before

article After

Challenge - no images available

The recording section serves as an archive for past online workshops. Due to the lack of images, the original design is text-heavy, making it difficult to distinguish topics at a glance. This lack of visual appeal also reduces user engagement and fails to create an inviting experience.

Solution - color with purpose

In the absence of images, I used colors as visual differentiators to help users quickly identify topics at a glance. Additionally, I introduced other visual elements, such as avatars and tags, to enhance visual interest and improve usability.


With the new design system, the call-to-action (CTA) is visually prominent, encouraging users to engage with the content.

In the absence of images, I used colors as visual differentiators to help users quickly identify topics at a glance. Additionally, I introduced other visual elements, such as avatars and tags, to enhance visual interest and improve usability.


With the new design system, the call-to-action (CTA) is visually prominent, encouraging users to engage with the content.

past recordings section Before

past recordings section After

Challenge - outdated design library

When I inherited the project, the design library was essentially a basic style guide, containing foundational visual elements like fonts, colors, and a few text components.


As the website evolved over time, the design library lacked proper maintenance. Many design decisions went undocumented, leading to inconsistencies between the product designs and the original style guide.

Solution - standardizing building blocks

To address this issue, I decided to create a new design system alongside the redesign. This ensured that components adhered to technical constraints while maintaining consistency between the design system and the new website moving forward.


My approach focused on balancing uniqueness and standardization—creating reusable components that stood out visually while minimizing unnecessary engineering workload.

To address this issue, I decided to create a new design system alongside the redesign. This ensured that components adhered to technical constraints while maintaining consistency between the design system and the new website moving forward.


My approach focused on balancing uniqueness and standardization—creating reusable components that stood out visually while minimizing unnecessary engineering workload.

one column text component

two column text component

three column text component

partnership text component

a small collection of component from the new design system

Challenge - limited resource for ux

With limited resources, my primary responsibility was the visual redesign. This left little room for in-depth UX research or a complete overhaul of the user experience.

Solution - effortless UX improvement

While revamping the visuals, I also aimed to improve the user experience with minimal effort. I prioritized: 1) addressing obvious UX issues, such as fixing input fields, 2) optimizing user flows critical to business success, and 3) tackling low-hanging opportunities, such as refining UX copy for clarity and engagement.

While revamping the visuals, I also aimed to improve the user experience with minimal effort. I prioritized: 1) addressing obvious UX issues, such as fixing input fields, 2) optimizing user flows critical to business success, and 3) tackling low-hanging opportunities, such as refining UX copy for clarity and engagement.

Input form before

input form after

Lights on·off