Viewpoint Service Tech: Mobile Application
Project Overview
Problem to Solve
Viewpoint’s Service Tech was a 20 year old web based application that needed to be converted to a mobile application. Service Tech allowed users to login and see what jobs they had to perform for the day. The goal of the app was to create the ability for a technician to be completely autonomous and never have to go into the office unless they needed to restock or have a meeting.
We realized there were several features missing from the original application: an
- Easy to navigate list of jobs
- Links to google maps from the job location
- Ability to invoice the customer
- Ability to add additional technicians to a job
- Records of photos and documents, etc.
Process
Discovery
I worked with the product owner, the creator of the original web application, to learn and understand the product. I also spoke to a few technicians using the application to better understand what they felt was lacking.
Design
This was my first mobile app I designed from scratch and I was also mentoring a junior designer with the anticipation of handing it off for him to complete once we completed the primary sections. We collaborated on how to present the information and the final visual designs.
The hardest part was the information architecture. We had to decide how we were going to display the Work Orders and what goes into a Work Order.
Results
Global Navigation
We created a simple global navigation that focused on Company, User Profile, Work Order types, Account Settings and Time Cards. We agreed these options were the top level and rest belonged within a work order.
Work Order Navigation
The rest of the navigation was a subset of a project. We decided a tile based approach would be best. We didn’t want to add the Work Order level items to the global navigation as we feared it could be tricky. A technician would do multiple jobs in a day and allowing them to use the global navigation ran a risk of unnecessary errors. By keeping it within the work order the technician knows they are only making changes to a specific work order. We decided a tile based navigation would be the right choice. We thought this would be clear what the user was choosing.
You can see the navigations in action by viewing the prototype. There are a few dead ends and only the screens I worked on are available, the rest were done by the junior designer.
Business Impact
This breathed new life into a 20 year old application and repurposed it so it could be used by a wider audience. It helped to increase sales and connected Service Tech to Viewpoint’s suite of mobile apps. Lastly, it opened a whole new set of opportunities.
Client
Viewpoint
Services
- Information Architecture
- User Experience Design
- User Interface Design
Tools
- Sketch
- InVision
Design Elements
Outcomes
Open Assignments Landing Page
When a service technician logs into Service Tech, then proceeds to “today” the user sees a list of jobs they are meant to do for the day. The jobs include Google Maps links, client contact info, a job summary, ability to clock in/out and complete an assignment.
Job Details
A user can navigate to other jobs. They can clock in/out, change job status and see the number of assignments attached to the job. The tile based navigation options are job specific. Meaning the user couldn’t use the global hamburger menu to get to them.
Labor
A user can check their hours worked on a project, assign additional technicians to a project and clock in/out.
Add Technicians
Sometimes a project can be too big for one tech to handle so they can assign additional technicians. After they tap “+ ADD TECHNICIAN” they will see a filterable list of available techs the user can select and add to the project.
Labor: Additional Technicians Added
After additional techs have been added the user can now see how many hours they have worked, clock them in/out and see their work summaries.
Labor Summary
Different jobs and tasks require different types of billing, the labor summary allows the user to see every time they clocked in/out on a job.
Edit Labor
Each clock in has its own set of Tech codes, Pay types, Billing codes, etc. which a user can edit if needed.
Docs & Images
Saving images and documents can be very important for a project. I designed a simple way for users to upload, they can either take a photo straight to the app, upload a photo or upload a document. The process is fairly straight forward.
Docs & Images: List
Once images and/or documents are uploaded a user can edit their description or view the doc/image. (Can you tell I like Godzilla?)
Full View of a Selected Image
