top of page

HOUZZ PRO

TIME BILLING AND STOPWATCH

Houzz Pro is a lead and project management solution software designed for businesses in the home remodeling and design industries. It is an all-in-one platform where professionals get the tools to manage their teams and track the progress of any project, all the way from proposal to execution.

My Role

While working on this highly anticipated feature, I had a wide range of responsibilities some of which included ideation, research, wireframing, creating end-to-end designs, working closely with the product and R&D teams, as well as conducting extensive design QA until its release. This large-scale feature was developed in phases as there were many moving parts and can be accessed on both web and mobile platforms.

The Process

The goal was to provide pros with a simple way to log and bill working hours according to services that they provide. It is a tool that assists Pros in making project management and tracking more efficient. After having established the time entries table, we proceeded to develop the accompanying assets which include the stopwatch, manage services module, table summary, and a mobile adaptation that features a more intentional linear experience than that of the desktop. 

Group 8229.png

BUSINESS GOALS

The main principle behind this feature was to gain insight into managing and tracking projects and improve overall team performance. This tool makes it easy and intuitive to keep up with budgets and internal costs, understanding the team's work capacity, help make team members work more efficiently, as well as draw insights from the data gained from each project.

Group 8048.png

USER JOURNEY

A prominent aspect of this feature is that it is accessible from the global navigation/financial section as opposed to from within individual projects. Being that this is a high traffic feature, we had to make sure that it will be intuitive and discoverable both on desktop and mobile.

TABLE FUNCTIONALITY

After several iterations we decided to go with a list view so to make sure that all of the data was scannable at a glance. The table has many functionalities that include search, filtering, sorting, multiple selection, multiple entry creation, exporting, invoice creation, inline editing, and more. Due to the various columns and a considerable amount of data on each entry, the table can be viewed using both vertical and horizontal scrolling. 

Group 8137.png
Group 8231.png

Filtering menu

Table inline editing

Actions on hover

MANAGE SERVICES

Adding an entry point to manage the service types and pricing right from the table was crucial to in the effort to make this feature more self-reliant. From editing or deleting existing services to creating new services, it can all be done here. 

Group 8134.png

TABLE SUMMARY

The table summary view was a highly requested portion of this feature. Due to the vast amount of data provided through the table, we wanted to showcase a high-level summary of the entries with a breakdown of the hours and total cost of time spent, according to different groupings; by project, team member, service, and date. Essentially, this summary provides a more holistic analysis of the team's capacity which is strategic when making work processes more efficient.

Group 8132.png

STOPWATCH

Through user research, we found that in the fields of remodeling and design, stopwatches are commonly used to track project progression and performance so incorporating them into this feature was integral. A key motif here was to make the stopwatch accessible and manageable from any place around the platform which was made possible by implementing it in the global nav. After several design explorations for module types, it was concluded that a popover from the global nav would be best suitable. Functionalities include having multiple stopwatches running simultaneously and converting time tracking into time entries. 

Group 8148.png

Option 1: Popup

Option 2: Bottom Drawer

Option 3: Pop over

Group 8147.png
Group 8131.png

MOBILE APP

Adapting the time billing feature into the mobile app was vital to the work-on-the-go nature of Houzz Pro users. In order to promote intuitive gestures and intentional usage on the mobile experience, we implemented a more linear flow that features specific functionalities and has different UI/UX solutions.

Group 8130.png

STOWATCH FOR THE MOBILE APP

Bringing the stopwatch experience into mobile was a request made by our pros for them to use while on a job site or on the go, which is why it was so important to make navigation very manageable. In order to easily differentiate the stopwatches, they each got a distinct background color, and when sliding the info card below, the pro would slide into either the next or previous stopwatch. A lot of effort was put towards giving this tool a light and delightful experience, which is why there was such a big emphasis on the UI. 

Group 8128.png

TIME BILLING FOR MOBILE

Because there was so much information on each of the entries, when adapting to mobile it was vital to maintain clarity and hierarchy so that the entries would remain easily scannable. As opposed to the desktop experience, the entries list, now presented as cards would show more limited info such as the total amount, project name, service type, date, status, and team member avatar. Upon clicking a card the pro will be exposed to the rest of the data, as well as edit it if needed. We also included a FAB button from which new time entries can be created. 

Group 8129.png
Mask Group.png

PREVIOUS

NEXT

bottom of page