MY ROLE
Mgr. Product Design
Lead Prod. Designer
Visual Designer
TOOLS
Sketch
Invision
Zeplin
TIMELINE
6-month project
TEAM
1 Lead Prod. Designer
1 Product Manager
2 Mobile Engineers
Overview
This case study showcases the state of the three FieldRoutes applications prior to the consolidation and redesign/relaunch. The three apps all serviced different segments of home service sales and technicians:
-
SalesRoutes: a door-to-door sales tool
-
TechRoutes: the first-ever FieldRoutes app built in 2011, eight years earlier, for technicians to view appointments, get customer info, input data from service
-
PestRoutes: the app meant to replace TechRoutes but never reached feature parody, so both apps were being used simultaneously by customers
About FieldRoutes
Above: screenshots from original legacy SalesRoutes/Techroutes/PestRoutes apps.
Field service management software that fuels growth, and helps you scale. FieldRoutes does more than just keep you running. It's the only platform that continues to innovate, bringing you the features you need to stand out. Create efficient processes, fuel your growth with insights, and scale your operations for sustained success.
Problem
Before the Product Team was hired, the product vision was handled by the CTO (co-founder) and the Engineering Team. From 2010 until 2020 when this project kicked off, the engineering team have been maintaining and building features for three mobile apps that are focused on two functions: sales and service. They were built in the early years of mobile app development and their tech stacks were no longer supported. Also, the applications were engineering designed and built since there wasn't a product team at the time. For this reason, there were a lot of modern usability issues present:
-
Frustrating User Experience
-
Tech stack for apps is severely outdated
-
Maintenance for three applications
-
Really poor stability and reliability
-
Failing ADA Compliance for all text and buttons
-
User experience was never a consideration
-
Time to complete any task is very high
-
No support for commercial structures/buildings
-
Incredibly poor app store ratings, <1.5
Solution
When it was decided to launch a brand new app, we recognized the opportunity to build a brand new design system for the mobile app with a focus on usability and ADA Compliance.
It was decided to focus on building, testing, iterating core components (text hierarchy, buttons, input fields) before building full UIs. This allowed the engineering team to focus on the usability of the interactive components, and when the full interfaces were designed later, it was an easy build. The design system helped speed up the time to design and build. It also helped immensely in the everyday vernacular, “just swap that field to a ‘read-only’ state instead of ‘disabled’.”
Key Solutions:
-
Redesign a WCAG accessible app with modern a modern UI and touch areas
-
Create a design system for shared components
-
Build on a modern tech stack (React Native) to ensure future availability and scaleability
-
Involve users throughout the process to ensure the app is meeting their needs
Deliverables
Working in tandem with the engineers, I created a mobile design system for the new mobile app, FieldRoutes. The focus of the new UI and the design system was large interactive touch areas for data entry and navigation and WCAG AAA rated contrast and type size.
At the end of the 6-month project, we launched the mobile application with a design system so tightly designed, creating custom forms became a matter of minutes vs hours. The form fields and headers of the mobile app were also created with mini, sub-design systems allowing for speedy design swaps.
44
Mobile-focused components designed, defined, and built
4.8
App store rating a quarter after initial re-launch; up from ~1.1
3→1
Three apps consolidated into one
Impact
When it was decided to launch a brand new app, we recognized the opportunity to build a brand new design system for the mobile app with a focus on usability and ADA Compliance. The design system helped speed up the time to design and build. It also helped immensely in the everyday vernacular, “just swap that field to a ‘read-only’ state instead of ‘disabled’.”
After it's release, a lot of users reported that data entry (customer info) was so easy, they would often hand their device to the prospect to simply input the information themselves. They confirmed data entry errors dropped significantly.
Research
01 — Gathering Feedback
Since users had hardly been consulted during the three legacy apps development, that was my first course of action. Research was completed using on-site ride-alongs with service technicians and door-to-door sales reps, video calls with their field managers, and in-person c-suite sessions.
02 — Empathy Building
One core method to gaining understanding to the user's needs was through shadowing sessions on ride alongs and sit-downs in the customer's offices with technicians and sales reps. This one-on-one approach was key in discovering workflow-breaking issues.
03 — Findings
From this in-person experience, there were several basic usability failures users had to work around with every single prospect or customer they worked with:
-
Stability and reliability were questioned all the time
-
“Newer” app increased time to complete by 1.5-2x
-
Text was difficult to read when outside in the sunshine
-
Required input types are not clear to users
-
Users used all three apps to complete daily tasks
-
Unfriendly user messaging; typically too tech-jargon heavy for regular human consumption
Design
04 — Information Architecture, Workflows, & Wireframing
Through an audit of the existing three apps, we were able to identify over 200 data points for users that were spread over eight tabs in an appointment. I was able to reorganize all of that info into more intelligent options spread across three tabs.
From there, I wireframed, gathered feedback, re-worked the user journey and workflow, and got to a great place before a single line of code was written.
05 — Implementation
The new FieldRoutes application was launched and customers were given the opportunity to operate with the new and legacy apps at the same time. If the new FieldRoutes app hit snags, the customers would still be able to complete their work from the older apps. It didn't take long for most customers to switch over to the new app and the legacy apps were sunset a year after the launch of FieldRoutes.
When I left, the following features were being planned:
-
Diagramming a home site with lawn, trees, shrubbery, driveways, etc. to enable on-site sales quotes
-
The ability for a technician to complete tasks by equipment type or chemical type; saving hours of data entry per week
06 — Assets, Documents, etc.
-
Sketch Library with typography, styles, components, guidelines (development, usage, anatomy, accessibility), branches for ideation/testing
-
Code Library
-
Guides for component usage and accessibility
Reflection
07 — Retrospective
The launch of the Rozú Design System launched and was fully adopted by all product squads within the quarter. It took a month or two, but after a couple program retrospectives the process really starting humming for all teams.
We started working through prioritization with each team to determine which needs could be met based on the engineering level-of-effort required. We operated with this process and structure for a year and through those retrospectives, we continued to learn and understand the needs of our users.
