Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot

Part 2 | Creating a complex

Part 2 | Creating a complex

SaaS Product User Interface Design

SaaS Product User Interface Design

Proptech

B2B

B2C

SaaS

Responsive Web App

Company

Howbuild

Role & Responsibility

Product Designer & Design Lead

Project Duration

12 Months

Area of Impact

UX Design, Interface Design

Previously on the project…


Previously on the project…

Problem & Mission


Problem & Mission

There is a huge lack of transparency and visibility of information when it comes to managing construction projects. Not a single person working on a construction project uses same software even though they are building it together.

Howbuild thought that this was a big problem (and opportunity) and wanted to provide a better way to monitor, manage, and pay construction projects. Thus, the company built the one and only integrated construction management software in the industry, about 10 years ago; Today the software is in need of a complete transformation, because the way it was built is not only archaic and unscalable but no longer serves current users' needs.

As the company was funded by Softbank in 2020, I joined the core product team as Head of Design and Product Design Lead to spearhead the complete transformation of existing software, which took 12 months of product team of 5 designers, 3 product owners, 2 researchers, and 100+ engineers.

This case study will examine the process of designing user interface for a complex system with multiple stakeholders. In case you have not read the first part of structuring UX and design strategy for the project, click on this link : Part I Case Study before continuing further.


There is a huge lack of transparency and visibility of information when it comes to managing construction projects. Not a single person working on a construction project uses same software even though they are building it together.

Howbuild thought that this was a big problem (and opportunity) and wanted to provide a better way to monitor, manage, and pay construction projects. Thus, the company built the one and only integrated construction management software in the industry, about 10 years ago; Today the software is in need of a complete transformation, because the way it was built is not only archaic and unscalable but no longer serves current users' needs.

As the company was funded by Softbank in 2020, I joined the core product team as Head of Design and Product Design Lead to spearhead the complete transformation of existing software, which took 12 months of product team of 5 designers, 3 product owners, 2 researchers, and 100+ engineers.

This case study will examine the process of designing user interface for a complex system with multiple stakeholders. In case you have not read the first part of structuring UX and design strategy for the project, click on this link : Part I Case Study before continuing further.

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot

Each card shows key feature and stakeholders who have access to the information.

Designinging for

Multiple Stakeholders

The Design Challenge

Howbuild's software serves 5 different stakeholders; Home owner, real estate developer/ head contractor, sub contractors, project manager and financial institutions. While every stakeholder is working together on the same project and uses the same software, everyone has different role in the project. This means that each user has different priority and needs for different set of information.

While general information such as financial summary or project timeline, is shared with everyone, certain information is tiered and shared only with directly responsible stakeholders; For example, a project's escrow account information is shared only between bank, home owner, and head contractor, but not with subcontractors or project manager. This complexity of interdependent information requires the main dashboard page to render and display information differently for each user in a different hierarchy.

So, what is be the best form of interface design that maintains high-level visual hierarchy for every stakeholder but is flexible enough to adapt to each one's granular differences?

To me, that is modular card system.

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot

Modular card system is flexible enough to display granular differences for each stakeholder while maintaining overall high-level visual hierarchy.

Modular card system is flexible enough to display granular differences for each stakeholder while maintaining overall high-level visual hierarchy.

Modular card system is flexible enough to display granular differences for each stakeholder while maintaining overall high-level visual hierarchy.

Modular card system is flexible enough to display granular differences for each stakeholder while maintaining overall high-level visual hierarchy.

Designing

Modular Card System

Modular card system is great because it is versatile and scalable.

We know user's gaze flows from top left corner to bottom right. So this easily dictates which location is prime and has better visual hierarchy. The card with the highest visual hierarchy, such as card #1 in the image below, would contain the highest priority information of the project, Financial summary such as budget overview.

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot


Continuing with the same pattern, card module 2 to 4 should contain high to medium-high priority items that need user's attention and action. Cards can expand from one column to two, depending on volume of information.

Card Module Skeleton
Card Module Skeleton
Card Module Skeleton


Another great thing about using card modules is scalability.
As/if user needs more information, new cards can be added to the bottom row or shuffled around within the module. This gives both designers and engineers more flexibility to add and deploy new information without interdependency of already existing data.

Project Hero Shot
Project Hero Shot

Designing a structure of

Data within Card

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot

Once the high-level hierarchy of cards was set within the module, I designed each card and its data structure. The same goes for data in each card; What one stakeholder sees within a card, Financial Summary card for instance, is different from what other stakeholders might see, depending on their role in the project.

Therefore, I carried over the same design principle for data within cards as well. I setup another subset module within a card so that data can be added or subtracted as necessary.

Let's take a look at an example of a card and how it was subdivided for each stakeholder:

Once the high-level hierarchy of cards was set within the module, I designed each card and its data structure. The same goes for data in each card; What one stakeholder sees within a card, Financial Summary card for instance, is different from what other stakeholders might see, depending on their role in the project.

Therefore, I carried over the same design principle for data within cards as well. I setup another subset module within a card so that data can be added or subtracted as necessary.

Let's take a look at an example of a card and how it was subdivided for each stakeholder:

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot


This is one of primary cards that is located at the top of the page. This card is for financial summary of project, which is the primary data that every stakeholder wants to see.

However, not everyone needs the same subset of data. For a home owner, these are three top things she needs to see: Budget overview, balance of money in escrow account, and payments that are due.
For another stakeholder who is not directly responsible for project budgeting, a contractor for instance, he doesn't need to see escrow account balance.

To display different data subsets for each stakeholder, I divided one card into sub-modules.

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot

Home owner and head contractor are in charge of budgeting and monitoring flow of money, therefore, their financial summary card will hold three subsections. Each subsection is interdependent with the others, and this is useful to gauge the money flow as whole.

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot

For subcontractors who usually deliver their service and request payments to head contractor, the same card would contain only two subsets of data. Their primary needs are to understand how much of their payment was received and to request a new payment.

Having different subsets of data within, one card caters to each and every stakeholders in the project and their different wants and needs.

Form should always follow function.

Form should always follow function.

Project Hero Shot
Project Hero Shot
Project Hero Shot

Transferring the experience to

Responsive UI

Most contractors and workers in a construction site do not have immediate access to a laptop or desktop, so mobile experience of the product becomes very important.

Using the card module in main dashboard as primary design components, maintaining design consistency and transferring visual hierarchy became easier; One of many great reasons of adopting card module was its versatility.

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot

Designers working on the project, including myself, paid extra attention to creating seamless user experience for subcontractors and head contractor; most of their interactions with the product is for signing a contract or confirmation of delivery of service, based on their contract.

Most subcontractors do not have time or bandwidth to open a laptop to confirm delivery or send a request for payments during their busy hours. Their go-to device is almost always mobile.

Knowing that mobile usability of the SaaS product is critical for the target users, designers started creating pages for a mobile device first for certain features. This naturally prompted designers to create a feature/s that focus only on must-haves, maintaining visual simplicity and seamless functionality.

Project Hero Shot
Project Hero Shot

Mobile-first design approach for target users who mainly use mobile device for the product.

Total of

524

Pages redesigned

DAU Increase

89%

for Timecard Log & Daily Report

MAU Increase

23%

in Dashboard

Results

After more than 12 months for complete transformation of the entire product, the product team saw a great increase in both DAU and MAU in many features and pages, but especially in dashboard and important features like Timecard log and daily report, which are logged by subcontractors.

This success was big because these features engage home owners in return, who holds the key to adopting and paying for Howbuild's software for their construction site.

After more than 12 months for complete transformation of the entire product, the product team saw a great increase in both DAU and MAU in many features and pages, but especially in dashboard and important features like Timecard log and daily report, which are logged by subcontractors.

This success was big because these features engage home owners in return, who holds the key to adopting and paying for Howbuild's software for their construction site.

Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot
Project Hero Shot