Background

Ever since Honest Buildings gained great momentum in early 2016, design and the engineering team have been striving to deliver proof of concept features rapidly to demonstrate the value of leveraging modern technology for real-estate project management and cost reduction. Velocity was the center of our team’s focus while quality wasn’t deemed equally necessary at the time.  

Process

After a rapid growth period, both design and engineering faced pain to further scale up the product due to the fragmentation of design and front-end UI implementation. I was asked to lead the development of the Design Language System. In order to assess the current state of the product consistency and understand different perspectives, I started interviewing key design & engineering stakeholders and members and conducted a design pattern audit of the entire product platform.

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

It turned out the problems are beyond just a facelift of the product. We were actually challenging the mindset of enterprise software only meant to be useful and utilitarian.

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

Design Process

It turned out the problems are beyond just a facelift of the product. We were actually challenging the mindset of enterprise software only meant to be useful and utilitarian.

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

  • Design principles 
  • Components library
  • Roadmap
  • Operation & process

HB Oasis 1.0

A solution that aims to rapidly empower business scalability while setting up the foundation aligns with HB’s 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

It’s all about people and relationships. I teamed up with front-end leads to establish a working guild and established weekly meetings, running backlog and planning for implementation, contribution model.

Empower designers & engineers to do their best work

It’s all about people and relationships. I teamed up with front-end leads to establish a working guild and established weekly meetings, running backlog and planning for implementation, contribution model.

Breaking down the complex to simple

“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. 

Building trust thru collaboration

It’s all about people and relationships. I teamed up with front-end leads to establish a working guild and established weekly meetings, running backlog and planning for implementation, contribution model.

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.