Mobile App Re-Design with a New Design System
Ryan Tanner
FieldRoutes App
FieldRoutes Mobile App
an iOS and Android re-design and re-write to replace three legacy apps
The FieldRoutes mobile app is replacing three legacy applications that focused on the two core functions: door-to-door sales and service appointments.
FieldRoutes first apps: SalesRoutes, PestRoutes, TechRoutes
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.
Issues Identified:
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, <2.0
Research, Discovery, & Planning
Research & Planning
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.
Key Findings
Stability and reliability were questioned all the time
“Newer” app (PestRoutes 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
Planned Implementation
Create and use a Design System
Brand new build in React Native
Massive launch with iterative feature enhancements
Early exploration
IA, 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. We were able to reorganize all of that info into more intelligent options spread across three tabs.
From there, we wireframed, gathered feedback, re-worked the user journey and workflow, and got to a great place before a single line of code was written.
Documentation for components in the mobile design system
Build a System
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’.”
Final designs of the new FieldRoutes mobile app
Old vs. New
Get Retrospective
What worked
Small agile triad team of PM/UX/Dev(2x)
Getting real world data for usability
Speaking with all levels of customers
Building the design system from the start
Time investment on interaction design
What didn’t work
Backend hurdles to build with any velocity
Having to rewrite the app twice
Testing not as thorough as we desired
Like this project
Posted Jan 27, 2025
FieldRoutes needed their three underperforming mobile applications redesigned; we consolidated the functionality all three apps into a brand new mobile app.
