Upfitter Integration System: Canvas & Usability Modernisation
January 2024 - April 2024
ROLE
UX & UI
TEAM
Ford Motor Company
TOOLS
Figma, Miro
USERS
1,000+
PROBLEM
Usability
Overview
Building on my earlier work improving the service design and after-sales support for Ford’s Upfitter Integration System (UIS), I was asked to lead the next phase: modernising the tool itself.
Working closely with a U.S.-based designer, I led the UX and UI upgrades for the web app — making it feel more like a modern design product, while keeping it fast and reliable for specialist users.
The Problem
UIS is a major capability for Ford — it helps upfitters configure vehicle integrations for products like Super Duty and Transit, reducing complexity and making builds more consistent.
By 2024, feedback on the system was still strong, but the experience of the tool had fallen behind user expectations. The biggest pain points were practical and workflow-breaking:
-
A finite canvas that made complex builds hard to manage
-
Limited zoom, forcing users into awkward workarounds
-
Heavy reliance on scrollbars, which often led to “fragmented” projects and mistakes
-
A UI that felt dated compared to the quality users expect from modern web tools
Objective: Prioritise and deliver the highest-impact UX upgrades — improving usability and aligning the tool with contemporary product standards.
Outcome: The redesigned interface increased user satisfaction, improved efficiency for upfitters, and helped reinforce preference for Ford vehicles because UIS was easier and faster to work with.
My Role
-
Lead designer for the UIS tool upgrades (UX + UI)
-
Research synthesis and prioritisation
-
Wireframes → prototypes → high-fidelity design
-
Stakeholder alignment with senior managers
-
Collaboration with engineering to balance ambition with feasibility
Process
I used the Double Diamond to keep the work grounded in real user needs and to avoid jumping straight to visuals.
-
Discover: Reviewed user feedback and interview insights to understand friction points and unmet needs
-
Define: Turned those insights into clear objectives, constraints, and success criteria (including technical realities)
-
Develop: Explored multiple directions through wireframes and prototypes, validating decisions with users and stakeholders
-
Deliver: Finalised designs and supported implementation, staying consistent with the Ford Pro Design System
Strategy and Prioritisation
This project was as much about choosing the right problems as it was about solving them.
To prioritise properly, I reviewed 20 hours of past interview recordings, pulled out recurring themes, and translated them into a clear backlog. I grouped potential improvements into a prioritisation matrix (impact vs effort / feasibility), then presented it to senior leadership to align on what to tackle first.
The clearest “must-fix” was the canvas experience.
Comparators and Inspiration
The upfitting space has plenty of legacy tools — some competitors still require manual coding with limited visual feedback, which creates a steep learning curve.
Rather than benchmarking only within the industry, I looked at best-in-class interaction models from tools that do complex things without feeling overwhelming:
-
Scratch (drag-and-drop logic on a canvas) — surprisingly relevant for building intuitive, visual workflows
-
Figma / Miro — powerful canvas-based tools with strong patterns for zooming, navigation, shortcuts, and layered toolbars
That mix helped set the bar: advanced capability, but approachable and efficient.
Design and Key Improvements
1) Canvas + Zoom (core usability win)
I designed an infinite canvas with a more advanced zoom interaction (closer to Miro), so users could:
-
Zoom out to understand the whole build
-
Zoom in to work precisely on one section
-
Avoid the “lost in scrollbars” experience that caused fragmented projects
This became the most celebrated change after rollout.
2) Keyboard Shortcuts (speed for expert users)
Because UIS users work quickly and often repeat tasks, I added a keyboard shortcuts modal (inspired by Figma/Miro). It gave users a single place to learn and reference shortcuts, improving speed without adding UI clutter.
3) Toolbar streamlining + clearer workflow structure
Next, I tackled the tool’s layout to support more advanced features without making the interface feel heavy. I explored a dual-toolbar model to separate user intent:
-
Left toolbar: navigation across project pages (new), and a structured breakdown of canvas elements
-
Right toolbar: drag-and-drop vehicle signals and building blocks users can add or modify
This separation reduced cognitive load and made the tool easier to learn, while still supporting power-user workflows.
4) Prototyping and system alignment
I started with wireframes and interaction prototypes in Miro, then moved into Figma for high-fidelity design and iterative prototyping.
All work aligned with the Ford Pro Design System, using custom components only when necessary. I also used advanced Figma features (variables, component sets) to keep the files scalable and to support clean handoff to engineering.
Some concepts were intentionally parked due to technical constraints — but the shipped solution preserved the core value: faster, clearer workflows with room to grow.
Results
After rollout, users responded especially positively to:
-
The infinite canvas and zoom, which made complex projects manageable
-
A clearer UI that reduced time spent “fighting the tool”
-
Improvements that supported both new users and experienced upfitters
On the business side, the improved tool experience supported:
-
Increased tool usage
-
Higher user satisfaction
-
Stronger preference for Ford vehicles where UIS reduces friction and improves build confidence
Reflections
This project reinforced a few principles I now bring into any complex tool redesign:
-
Fix the structure and interaction model first — UI polish comes second
-
Use prioritisation frameworks to earn stakeholder trust and protect scope
-
Pair ambition with feasibility early so design doesn’t drift away from what can ship
Next Steps
Future updates continue down the prioritisation matrix, including deeper workflow improvements such as logic blocks to define relationships and hierarchies between elements.
As I transitioned into the Ford Pro Mobile team, I handed the work over to two U.S.-based designers to continue collaborating with engineering — with a clear design direction and scalable foundations in place.
“The new Ford Pro Upfit Integration System* (UIS) is a game changer for anyone installing or operating upfits. This hardware/software solution allows upfitters to seamlessly integrate equipment on the truck. Ultimately, UIS will unleash capabilities many may not have known existed and open up a new world of possibilities.”
— FORD MOTOR COMPANY, GLOBAL