B2B
B2C
SaaS
Responsive Web
Proptech
Company
Howbuild
Role & Responsibility
Product Designer & Design Lead
Project Duration
12 Months
Area of Impact
UX Design, Interface Design
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.
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.
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.
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.
Designing a structure of
Data within Card
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.
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.
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.
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.
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.
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
