Background

Since Honest Buildings was founded, Design and Engineering’s top priority was to rapidly deliver proof of concept features to demonstrate the value of digitizing traditional workflows by modern technology to help commercial real estate projects stay on time and budget.

Velocity was the center of our team’s focus, while quality wasn’t valued and prioritized at the time. 

Challenge

After a rapid growth period, both design and engineering faced a bottleneck to further scale up the product due to the fragmentation of design and front-end UI implementation. I was tasked to lead the development of Honest Buildings’ very first design system.

To understand different perspectives and evaluate the team’s level of familiarity with the design system, I started by interviewing key design & engineering stakeholders and members. It was followed by a design pattern audit of the entire platform and an assessment of both Design & Engineering’s collaboration and implementation workflows. Problems were identified. 

Key Problems for Customers

  • Poor accessibility 
  • Low productivity 
  • Steep learning curve

Key Problems for Designers

  • Lack of foundational design guideline
  • Duplicate work

Key Problems for Developers

  • Frequently used stylings and patterns have not been componentized and made reusable
  • Difficult for maintenance 
  • Duplicate work
  • Many one-offs aka. snowflakes 

Key Problems for Collaboration

  • Lack of creation process & communication between design & engineering
  • Lack of transparency & shared backlog

Opportunity

We had a huge opportunity to unify the entire platform’s interface and elevate the overall design quality. However, the scope was far beyond just a facelift of the product user interface. We were challenging the “good enough” mindset of building enterprise software. The quality of our product needed to be raised.

How might we build a design system that enables design & engineering to work collaboratively to bring a delightful experience to our customers…?

Level Set the Vison

After a thorough evaluation of the situation, the vision was supported by leadership. We were ready to establish Honest Buildings’ own design system and more importantly, standardize the way we design and built things.

Goal

  • Reduce design time and engineering effort on new projects
  • Improve the overall quality of design solutions
  • Facilitate communication between designers and developers
  • Educate and onboard designers & developers 

Scope

  • Establish HB Design principles 
  • Organize component library in Figma & Storybook 
  • Create roadmap for phase 1 & phase 2 implementation 
  • Initiate design system operation & collaboration process

HB Design System 1.0 (Oasis)

A solution that aims to rapidly empower business scalability while setting up the foundation that aligns with Honest Buildings’ vision to serve an industry that builds accommodation for human beings that spend 90% of their time. 

Intuitive Interface that Mitigates Friction and Learning Curve

Long learning curve is the antithesis of enterprise product adoption and user retention. The foundation of the user interface was optimized for a simple and delightful experience that boosts learnability. 

Empower Designers & Engineers to Do Their Best Work

A system that aims to do all the heavy lifting to build out the backbones of the product platform so engineers and designers can focus on solving our customers’ problems with optimal efficiency and minimal waste of resources. 

Break Down Complexity to Simplicity

“Everything should be made as simple as possible, but no simpler.” – Albert Einstein

Flexible and reusable components and modules are purposely made to help build intuitive workflows that are easy to use while respecting real estate’s complex operations & financial processes. 

Build Trust thru Collaboration

Running a design system is all about unifying cross-functional teams and building shared understanding. I teamed up with front-end leads to establish a working guild and facilitate weekly operations such as weekly syncs, design system backlog groomings, and sprint planning. I served as a liaison between the Design System Guild and all engineering squads.

HB Design System is fully built and managed by Stroybook and Figma respectively.

Result & Impact

By the end of 2018, we updated the whole HB product platform with a fresh look with the new core visual styling, and the majority of all new features, such as Budgeting & Capital Planning, have adopted almost 100% of the components from the Design Language System.