Project Details

Overview: 247PRO is a web-based estimating software for general contractors to create detailed estimates for residential remodeling and construction projects.

Role: In 2015, I started at the company in customer success and did minor design work on the current application and worked on redesigning the homepage.

In 2017, I became the lead designer to redesign the full product from the ground up.

Responsibilities: Competitive analysis, user flow analysis, user interviews, wireframing, information architecture, user interface design, low-high fidelity prototypes and usability testing.

Background and research

Before I was designing, I was working in customer success for several months.  I was tasked to offer assistance to new and existing users on the platform. This included handling emails, phone calls, training and product demos. These months also included understanding the industry and why users need a software like 247PRO.

I spent months exploring the platform to understand the user flow. This included speaking with clients through the phone or using Join.me to provide demos or training.

Additional research also came from the comments and feedback that we received via email and phone support. Common email comments explain how the software is "cumbersome," or hard to use. Many contractors did not like the pricing for materials that were used for the templates. It resulted in lost jobs because the estimate cost were too high or even low. During phone calls, users would question how to change certain values and how to navigate within areas in the software.

Most users that I've spoke to were not tech savvy. Since most of them are out on the field, they have no time to go on the computer to learn something new.

The product is advertised for users to easily create a detailed estimate without any prior knowledge. From my research, many users did not find it easy to create an estimate. Their goal was to come in and create a detailed estimate with ease, but most will spend time learning the software without producing an estimate or simply giving up in the process of creating one. 

Even though the product needed changes in visual design, it was more important to assess the UX of the application and improve upon it. 

Competitive analysis

I researched 247PRO's competitors and collected information from users who shared about their experiences with other products and services. Most users have previously used ClearEstimates, Joist App, Xactimate, The Home Depot Estimator by Eagleview, and National Estimator. 

When speaking to new clients and existing users via phone, most of them wanted an estimating tool that is easy-to-use, up to date pricing for materials and labor cost and an affordable software to pay monthly or yearly.

  • Ease of use
  • Cost book (Data pricing for materials)
  • Affordable plan

The competitors offered the latter however, clients who shared their experience say, some of these applications are difficult to use and are expensive. What 247PRO lacks is a cost book information which many of the applications benefited from. A cost book holds up to date data of material pricing which saved users time from calling in their local supply store for pricing. 247PRO fits in the niche market which made some of the users use the application instead of the others. 

Challenges and approach

Although the platform lacked the look and feel, we were challenged to make improvements without changing the interface. We aimed at finding solutions to the most common issues and feedback shared by our users. The feedback we received were evaluated to take the next steps to improve the current experience of the software. 

The Estimator

The Estimator contains all scopes of the project where users go through each line item to complete an estimate. 

These are the changes that I've contributed when making design changes to the current user interface.

Reveal item list: The 247PRO Estimator was improved by letting the users see all line items on the left per template. Initially, they did not appear on the left column until the user clicked next. This was an issue because users wanted to know what was involved in each scope of the project. 

 

New buttons: The previous and next button were added to the top right for users to go through each item quickly. Before the update, users would have to scroll down to the bottom of the page to proceed on to the next item. 

Hiding initial grand total: The grand total was removed in the beginning of each scope. It was originally revealed on the top right below the tab button. Users questioned where the cost was coming from because it was either too high or too low for their project.  Now users will only see the tab total for each completed template and the grand total for the project when it is completed.

 

Modal window for configuring labor and material cost.

Based on feedback that we received, users wanted a simple solution for them to get a calculated cost for their material and labor based on size or quantity. I was involved in presenting various iterations of the new modal window.

 

2014 - Current Design

2015 - Final Design

 

The Estimate Proposal

Many general contractors have requested an overview of all the categories involved in the project and they wanted to be able to hide or show the cost for certain areas of the project.

By providing the option to display the cost, it helped users hide their operation profit, overhead expense, and the cost for mark ups. Other design changes include expanding tables, using cells for the project address and client info and increasing the spacing between each line item.

Download a sample proposal

2014

2015-Current

The current system and its state

Since 2015, the platform remained the same. The product owner hired a full stack developer and wanted to shift his focus into a new market while keeping 247PRO in its current state. I've kept my research data, ideas and sketches so that I could use them to back up my process when designing the new platform. In order to improve on top of what we have, we still want our users to save time by having them seamlessly work through estimates that give them accurate cost to win jobs. 

 
 

247PRO Redesign

Background

247PRO remained available for the public, but the software itself became out dated. The software remained the same since 2014 with the slight few changes I contributed in 2015. I returned to this project in 2017 to help focus on redesigning the software that would make it efficient for users to meet their expectations and goals.

Role

I am leading all UI/UX work from research to deliverables. I am currently working closely with the product owner and web engineer to launch a minimum viable product for the first phase.

USER Research

User feedback through support inquiries via email or phone and also feedback from users who cancelled their subscription. All my research came from my role in customer success. I sent out a survey (Google Forms) to our active users and also interviewed and a handful of users to learn about their background and goals. Our team brainstormed on what new features we should implement and what current features to improve on.

Survey

I sent out a survey using Google Forms.

  • How often do they use 247PRO?
  • On average, how long does it take for them to complete an estimate?
  • What do they like most about the estimator?
  • What do you like the least about 247PRO?
  • Is there anything that you wish 247PRO allowed you to do that it doesn't allow now?

Mockups 

Before going through the design process, I do look for inspiration on the web and sketch wireframes before proceeding with high-fidelity mockups. During my wireframe phase, I'll have meets with the product owner and web engineer to present my ideas. Any feedback from them will put me back to the drawing board until we come to an agreement. I also do work closely with the web engineer to ensure that UI elements and interaction can be worked with.

The UI design below does not represent the final product. 

Account Settings, Contact List, Estimate list

Estimator, Scope of work (Template Selection), Dashboard

Estimate Summary page, Downloadable PDF

Usability Testing

Testing between early-mid April.

Before completing phase one of this project, I will be recruiting 5-10 users to conduct usability testing. Clients range from frequent users to new users (people who just signed up) and people who have cancelled and willing to give 247PRO another try.

Tools to be used Zoom or Join.me

Scenarios would be provided such as: 

  • A client inquires for a kitchen remodel estimate, their budget is $20,000, create an estimate with 247PRO within their budget.
  • A client wants their bathroom walls repainted and the flooring replaced, create an estimate using only those items.
  • You just finished inspecting a potential client's backyard deck, you will need to provide a deck estimate within the same day.

Things to look for during this test are:

  • How would they approach the application to do the required task?
  • What problem/pain points occur during the process of creating an estimate?
  • Do he/she choose a template or create their own?
  • Do they make a modification to the template?
  • Do the templates provide them what they need in order to complete their task?
  • Is the pricing in the templates or cost data book concern them? 

Homepage

I am designing the homepage that would align with business goals and meet client expectations. 

247pro.jpg