Visual Service

visual service desktop and mobile app views

Overview & Users

Visual Service is a California-based entity transforming the HVAC (Heating, Ventilation, and Air Conditioning) industry through the creation of tools that train and support technicians both in the field and in the office. Visual Service is provided through IHACI, the Institute for Heating and Air Conditioning Industries, which is an association focused on supporting the HVAC industry and its professionals as a whole.

The first key user group for the mobile portion of this project was field technicians working to repair and maintain HVAC systems. For the desktop application, key users were more advanced contractors who serve as service managers at the office and oversee multiple HVAC technicians out in the field doing work.

visual service challenge illustration

Challenges

Design a mobile app to help HVAC professionals in the field working to repair and maintain residential and commercial HVAC systems and create a desktop app for HVAC contractors in the office to manage a set of technicians in the field.

Solutions

Design an android-based mobile app for HVAC field technicians to help them with HVAC instrument management, jobsite information and organization, and the collection of data and measurements from HVAC systems.

Create a companion Desktop app to serve as a hub for HVAC office contractors to help them manage, assist, and coordinate a set of technicians out in the field repairing and mainataining HVAC systems.

visual service solution illustration

Methods & Deliverables

Learning About the HVAC World

Secondary Research

An extensive amount of secondary research was needed for this project in order to help us learn about the experiences of HVAC field technicians and contractors. It was important for us to learn about the types of environments these HVAC professionals work in and have an understanding of the systems, tools, and instruments that are used in HVAC industry work.

air conditioning circuit diagram

Image Credit: Visual Service/IHACI

Exploring User Needs

usability testing document

User Research & Testing

Usability testing during some segments of the project was one method we utilized with design prototypes. We were also very fortunate that two members of the Visual Service client team were former HVAC professionals. During most phases of the project, we were able to gather feedback on a weekly basis through interviews with these individuals about wireframe and prototype designs.

Mapping Out an Organizational Scheme

Sitemaps

We created two simple sitemaps to help us organize our approach to wireframing and prototyping screens for the mobile and desktop apps. Referencing the sitemaps when creating new user flows and experiences, allowed us to better understand the structure of the apps and helped us to keep track of where screens fit into these overall structures.

visual service sitemap
visual service sitemap diagram

Brainstorming Initial Designs & Flows

Sketching

As is the case with many UX Design projects, we found that sketching and whiteboarding were constant companions during the Visual Service project. With the highly technical nature of the project, it was important to map out possible components, app sections, and entire screens early on together as a team in order to understand what might be the best approach to solving a problem or set of problems.

whiteboard sketching example one
whiteboard sketching example two
whiteboard sketching example three

Creating Screen Outlines & Layouts

Wireframing

With wireframing, we worked through early iterations of the components, sections, and screens for both the mobile and desktop apps. We utilized Sketch and the online visual collaboration tool, Whimsical, to create early wireframes and wireframe flows.

Mobile Field Technician App

mobile app wireframe measurement overview
mobile app wireframe measurement details
mobile app wireframe add a job
mobile app wireframe instrument list

Desktop Service Manager App

desktop app wireframes session dashboard
desktop app wireframe job information
desktop app wireframe technician dashboard
desktop app wireframe measurements dashboard

Setting Up Interactive Flows

Prototyping

Another part of our process was to create sets of prototype screenflows for various sections of both the mobile and the desktop apps. We worked through several iterations of these flows in order to find the best solutions and come up with the final designs for the apps.

visual service prototyping diagram

Finalizing the User Experience

Visual Designs

The following are selected screens from the final visual designs for the Visual Service mobile field technician and desktop service manager apps.

Mobile Field Technician App

mobile app measurement dashboard
mobile app system checklist dashboard
mobile app jobs search
mobile app job addresses view
Measurement Dashboard

When a live, recorded Session is initiated by the field technician, the core of the Session is the gathering of measurements that provide information to the field tech and business about what kind of service or maintenance is needed for the HVAC system.

System Checklist

Before servicing the HVAC system at a residence or business, the tech needs to setup the app to gather information and date from the particular HVAC system. They use an extensive checklist for this process.

Search for Jobs

In preparation for repairing or maintaining a new customer’s HVAC system, field technicians using the Visual Service mobile app search for existing  “Job” records for a residential or commercial location.

Jobsite Information

Customers serviced in the past also exist within the app for the technicians to access. These Jobs allow the field technicians, and their respective businesses, to stay organized and up-to-date about service visits at a particular customer’s location or locations.

Desktop Service Manager App

desktop app technician dashboard
Technician Dashboard

HVAC Service Managers oversee a group of technicians out in the field and provide feedback and assistance as needed to these techs. They need to know where their assigned techs are located at all times. Service Managers also must be able to determine the status of these technicians and whether or not they are recording a live Session on a particular Job. This Technician Dashboard provides a way for Service Managers to keep track of and organize their field technicians.

desktop app session dashboard
Session Dashboard

The Session Dashboard is a kind of “data central” screen for the Service Manager which allows them to view what is happening in both a field technician’s live Session and previously recorded Sessions. The dashboard shows the following to the Service Manager: the measurements the field tech is gathering, a live recorded video chat with the tech if desired, individual details about the tech on the Job, charts and graphs comparing the data being collected during the Session, and a section for various types of notes.

desktop app session video call invitation
Session Video Call

During a Live Session, either the HVAC Service Manager or the Field Technician can initiate a group video call to discuss progress with the HVAC repair and maintenance and/or find help with any issues encountered with the system. Additional Service Managers or Field Technicians can also be added to the video call when necessary or desired.

visual service desktop app system checklist
System Checklist

A grouping of HVAC System settings and information gathered by the Field Technician on the job. Service Managers are able to view this information and make alterations if necessary to assist with the repair and maintenance of the system.

Project Summary

The Visual Service project focused on the creation of two experiences to assist HVAC professionals with their daily workflow. Both the mobile app for field technicians and the desktop app for service managers will provide extensive record management, in-depth data and statistics regarding HVAC systems and their performance, and also allow for communication among professionals as needed for providing excellent services to clients.

visual service desktop and mobile app views
Scroll to Top