ServiceMax is an enterprise software company that provides industry leading field service solutions to service organizations globally. These end-to-end field service solutions help dispatchers, technicians, and administrators get through their work day so that they can keep wind turbines, jet engines, and the rest of the world up and running. 

While I've spent time designing for both web and mobile, my work at ServiceMax has focused on forging a more seamless experience for technicians using phones and tablets. My days are spent thinking about how to support and motivate technicians to start, continue, and complete their work by focusing on providing more clarity in a revamp of ServiceMax's current mobile product. One project I worked on was the Work Order screen. Part of this project also included a concurrent branding update to ServiceMax’s mobile product line. With that said, let’s get started!

Objective

Make it easier to navigate to a specific section in a work order.

In collaboration with PM and Engineering, I was tasked with addressing the issue of it being too cumbersome to get to a desired section in a work order when there are a lot of sections configured.

Our initial hypothesis was that if we preview a limited number of lines in each section (i.e., 5 in this scenario), the user would be able to quickly and more easily access the desired section. However, what we didn’t anticipate was the possibility of there being a large number of sections, such that a user would still have to scroll excessively to get to a particular section that might be buried at the bottom. Because of this, we decided to explore a tabbed navigation within the work order.

Process

Preview Sections

In ServiceMax’s phone app, the work order screen is very important to our users—technicians and field service engineers (FSEs). This is where their work is captured, missing parts are ordered, and everything else related to getting a job done.

A work order is generally structured by header details and various sections. Header details are informational and the sections are where technicians document the work they did.

In our current design, we wanted users to be able to preview the content in each section. This made sense at the time because of what we knew about the work order screen:

• View only (no editing here)

• One stop shop for all things related to this work order

• Commonly configured sections were: Parts, Labor, Expenses, Service Quotes, and Documents (less than 10 sections per work order)

The goal was to create a view that balanced usability and technical capabilities. We came up with the above screen as a minimum viable effort to address the difficulties in navigating to specific sections in a work order view because previously, sections were stacked on top of each other without any breaks or clear delineation of between sections. This meant that if you needed access to the second section in a work order and the first section had 400 line items, you would have to scroll through all 400 lines before you could get to the beginning of the second section. If the second section also contained 400 lines, but you needed the 400th line, then you would, again, have to scroll repeatedly to get there. Therefore, our initial hypothesis was that if we preview a limited number of lines in each section (i.e., 5 in this scenario), the user would be able to quickly and more easily access the desired section. However, what we didn’t anticipate was the possibility of there being a large number of sections, such that a user would still have to scroll excessively to get to a particular section that might be buried at the bottom. Because of this, we decided to explore other options.

Branding changes

There was a lot going on during the time of this design and adopting a look and feel as a company was definitely one of them. In addition to experimenting with the layout of the work order screen, we were also needed to incorporate the new branding of ServiceMax into our designs. Due to time and development constraints, we took an iterative approach where we’d have the least technical impact with the most brand appeal.

Tabbed Sections

Since we learned that users needed quicker access to the complete list of lines per section, we decided to test out spreading the sections out horizontally. This meant removing the concept of a preview for each section and placing all lines within a section into their own tab.

This decision was made in an effort to combat a couple challenges we uncovered while socializing the initial preview-able sections design:

• Confusion around the whole concept of previewing sections (e.g., how many lines would live in a preview?, is that quantity configurable?, etc.)

• Excessive amount of scrolling vertically if there were an above average amount of sections

Put it to the test

For this particular project, we ran a parallel exploration of this design and the tool used to create it—Figma:

I used Figma to quickly build out the screens and work in some interactions between the screens to demonstrate roughly how scrollable tabs in a work order would look like. This prototype was then socialized internally to get some quick feedback.

Results

Overall, the reception was positive. However, we did not get a chance to test extensively. Thus, the test size is not representative of all use cases and we will move forward with this caveat in mind. There were some notable insights that proved important to consider further iterations:

As we move forward with scrollable tabbed work orders, it will be imperative that we monitor how the tabs will stand up against the concerns mentioned above. With that being said, we also received enough positive feedback to continue carrying out this design.

Thanks for reading! Hope you enjoyed learning more about my work at ServiceMax. Feel free to share any thoughts or questions. I’m always open to feedback!