Overview

I joined Home Partner of America (HPA) in September 2021 as the second full-time designer hired to work with the head of product and led the transformation of the in-house digital platforms. HPA is a real estate investment company that specializes in Rent-to-Purchase single-family homes. The company supports prospective candidates and residents throughout their entire journey to homeownership.

The Problem

After its acquisition by Blackstone, HPA experienced rapid growth, increasing the need to align internal tools with the product identity, scale operations, and implement customizable legal compliance measures.

The Goal

Establish a scalable, consistent, and manageable design system that reflects the enterprise identity across all internal portals.

Commercialize and integrate this system into other property management entities within Blackstone's ecosystem.

My Role
Phase1: Sole Designer. Phase2: Lead Designer.

Tools

Figma. FigJam. Teams

Scope

Phase 1. 2 Months. Me

Phase 2. 4 Months. Me + 1 Junior Designer + 1 UI Offshore Contractor.

Outcomes

Show the outcome of the design system, before and after

Phase 1: 2 months. Me.
My Role: Sole designer; conducted research, presented to leadership, built out components.

How It Started

For Phase 1, I worked as a solo designer, which meant I had limited time to develop the design system alongside other rapid UX tasks. As a result, I needed to approach this challenge strategically. I decided to first align the fundamental elements — color palette, typography, grid system, and a set of icons — with senior leadership before building components.

Laying Down Foundation

Working in a subsidiary of Blackstone, all the decisions which make an impact on the brand needs the green light by senior leadership. Therefore, I began by reaching out to the marketing and the head of product regarding the color guidelines to ensure the product’s hue aligned with the company’s existing identity.
After 3 rounds of discussions, Midnight Blue and Cerulean Blue were chosen as the brand colors, matching the HPA product identity, and providing a tone that is both trustworthy and inviting.

Next, I conducted a competitive analysis of design systems from companies with publicly established internal portal design systems, such as Salesforce (Lightning), Google (Material), Atlassian, and Bifrost. After studying these industry leaders, I developed several proposals that aim to capture a friendly yet professional tone, tailored for a task-oriented B2B platform with simple and intuitive interfaces.

After rounds of discussion with business stakeholders and marketing, we align on:

Poppins Font - modern, versatile font with a minimalistic design that enhances readability across screen sizes.
A left-side menu layout - intuitive and easy for users to navigate and adapt, as well as maximizes vertical space.
Button with 4 radius corner - slightly rounded edges provide a balance of professional and approachable.
IconPark by ByteDance - wide range of high quality, customizable, and scalable icon sets.

Accessibility Baked Into The Process

Building a Design System from scratch allowed me to integrate accessibility into its foundation. Once the brand colors and fonts were approved by leadership, I focused on ensuring that all color contrasts and typography sizes met WCAG requirements.

Real User Case to Define More Complex Elements

After laying the foundation, the next step is to expand into building and defining components. A key consideration at this stage is designing with real user cases and data in mind, and minimizing the risk of running to “what if” roadblocks at a later stage:

(UX case) What if the lease administrator needs to change lease information?
(UI display) What if the property address goes over 1 line?

This doesn’t mean making all decisions upfront, but leveraging existing user flows (e.g., administrator approving a new lease) helped me recognize frequently used interaction patterns, address real scenarios, and define components that need to be included in the library early on.

All the components created at the stage were reviewed by developers to ensure feasibility and scalability.

Atomic Design and Pragmatic Approach

Before the ever-evolving set of components, I compiled a list of items to include in the designs and organized them using Atomic Design, which provides a structured framework, and a Pragmatic Approach, which offers flexibility.

This allows designers to make quick decisions rather than rigidly following a predefined process — especially during early-stage product development, when the scope tends to evolve significantly over time.

Fundamental elements and unchanging components fall under Atomic Design

Components that may change based on user needs and business requirements fall under the Pragmatic Approach

Phase 2: 4 Months. Me + 1 Junior Designer + 1 UI Offshore Contractor.
My Role: Lead Designer. Reviewed new components, built out new annotating components, coordinated collaboration

Expanding and Building Out

At this stage, I transitioned into a 70% review and 30% building role as other tasks began to ramp up. We onboarded a junior designer who primarily focused on the lease management side, as well as an offshore UI contractor to assist with building out the component library.

Not every element and style was fully finalized, so clear communication became crucial. We touched base twice a week to ensure alignment on iterations and styles of new components.

Elements and components are listed out in the format of UI Element / Example / Use Case to ensure we document rationales behind each design system cohesively.

Guidelines and Annotations

After building and integrating the design system into the lease portal development, we realized that simply having a set of components wasn't enough to maintain a successful system. It’s crucial to provide sufficient context to make it accessible to internal users, especially developers and future designers. To address this, we took the following approaches:

Created handoff guidelines and annotated components, highlighting iterations, new interactions, and the design stage (for handover to developers).
Cited research sources, team members involved in the project, and alternative options considered (to help future designers and the wider Product team onboard quickly).

Results

In the 6 months since starting the project, we successfully launched the lease management portal. The design system has also been adopted across all other internal platforms, such as the vendor management portal and communication center.

Overall, The impact of the design system extends beyond this project:

It unified the styling across all internal tools.
It delivered a cohesive and professional look that aligns with our product’s identity.
It provided a clear structure and set of principles for designers to guide decision-making.
It improved design-to-market efficiency by giving developers a library of reusable components and patterns.

Next Steps: Token Naming Convention

As we move forward with scaling and reffing the design system, a critical next step is establish a clear and consistent Token Naming Convention. This shared language across design and development teams, ensuring consistency across platforms, and ensure the design system remains organized, scalable, and easily maintainable as it evolves .