Mobile Designs

Team Software has been a desktop/web based product for over 30 years. The mobile applications are slowly being introduced as field service workers need to stay up-to-date and modernize with the industry. The days of field service workers presenting carbon-copy paper invoicing are quickly fading. Thanks to Mobile applications, everything can be done electronically. I came in to help turn the process of filing paper copies, into digital proofs, which makes everyone’s life easier.

 

Role

Product

Platform(s)

Areas

Design Lead

TEAM Mobile

Mobile

Design, Prototyping, Research

 

Background

All of the products I work on have a mobile app, but I’m not always responsible for the mobile designs. In this section, I want to showcase some of the work I have done for our mobile designs on Team Mobile and Lighthouse. Both of these products work together for scheduling, invoicing, and completing field service work. The employees using the app are the workers going to the site to perform the duty, while the desktop software and website are used by the office workers doing all the admin. Although Team is a 30 year old service that is in dire need of modernization (see my work on modernizing WinTeam), the mobile app is new. Below I will show you some of the screens, workflows, and components used to create a user-friendly, on-site, field-ready software. To start, I will showcase Team Mobile.

 

Team Mobile

Without going into too much detail, these mobile projects followed a typical design cycle for me. I designed Team Mobile with the help of our mobile design system, but first, I started from the bottom. I identified the problem we are trying to solve with the product team, brainstorm solutions to that problem, how it will help, and check that we are staying in scope. We talked to users, SME’s, and other valuable resources to gather information, and validate our research. Then I start the wireframes, laying out potential flows, and am frequently checking in with the product team & developers for feedback. Low-fidelity mockups, prototypes, further ideation, high-fidelity mockups, prototypes, and user testing/user review comes next. Once that is all done, I worked with the developers and engineers one last time before handoff and further Dev/QA. Below, I am showing a glimpse into the Team Software design work just for adding a location manager for touring security guards, and a custom mobile branding for our clients. The custom branding meant meeting WCAG standards for color contrast, which was an undertaking in itself, as we had over 60 potential color schemes to coordinate.

 

WCAG standard testing for color contrast

Quick prototype showing some of the features of the location manager


Lighthouse

Below is a similar layout I created for the Lighthouse side. This is task was to re-design the way an auditor walks through their route and tracks if the cleaning services have been completed. The original audit was created without the help of a designer, which meant that it worked, but it wasn’t overly user-friendly. I brought in components from our design system, and worked on the user flows to give a more friendly experience. The highlight of this task was getting to work closely with users to make sure I was solving their issues. I was not super familiar with Lighthouse, and my initial idea for improving the mobile experience wasn’t actually what the users needed. It was very helpful having time with them to expediate the design process as I was getting feedback from the people that matter most, our end users.

 

Prototype of a walkthrough for an auditor

Just a snapshot of a design flow early on. This laid the ground work for what we have today

3 versions of the UI for the inspection groups

Showing the states for the UI that we landed on for the inspection groups.

Very early stages prototype of the existing UX for the audit.

Walkthrough for the final designs of the Audit improvement.