UIS (Upfitter Integration System) Enhancements
January 2024 - April 2024
ROLE
UX & UI
TEAM
Ford Motor Company
TOOLS
Figma, Miro
Building on my experience with the Upfitter Integration System (UIS) at Ford, where I previously revamped the service design and enhanced after-sales support (see here), I was entrusted with leading the design upgrades for the tool itself. Collaborating with a designer in the U.S., we set out to modernise the web-based tool, focusing on improving both the user experience (UX) and user interface (UI).
The Problem
The UIS, a groundbreaking hardware innovation by Ford, revolutionized the upfitting process for vehicles like Super Duty trucks and Transit vehicles. However, by 2024, while user feedback remained positive, the tool's design didn't meet the polished expectations of modern applications. Users were frustrated by a finite-size canvas, limited zoom functionality, and reliance on scroll bars, which often led to fragmented projects.
Objective: Our goal was to prioritise and implement design upgrades for the UIS tool, enhancing usability and aligning with contemporary user expectations.
Results: The redesigned interface resulted in heightened user satisfaction, increased tool usage, and a preference among upfitters for Ford vehicles, thanks to the UIS system's ease and efficiency.
Methodology/ Process
I employed the Double Diamond UX process to guide the project from discovery through delivery. This approach allowed us to thoroughly explore user pain points, define clear objectives, develop innovative solutions, and refine designs through rigorous testing.
Discover: Conducted user interviews and gathered feedback to understand pain points and user needs.
Define: Identified key objectives and constraints, such as enhancing information accessibility, understanding developer limitations etc.
Develop: Explored design solutions through wireframing and prototyping, incorporating user feedback and competitive analysis insights.
Deliver: Finalised and implemented the design, adhering to the Ford Pro Design System.
Strategy & Prioritisation
Unlike other projects, this initiative required a strategic focus on design prioritisation. I analyzed 20 hours of past user interview recordings to identify pain points, then categorised potential upgrades into a prioritisation matrix, which I presented to senior managers.
The canvas emerged as a top priority for enhancements.
Comparitor Analysis
In this industry, many competitors relied on outdated systems that required users to manually code requirements with minimal feedback, creating a challenging user experience. Recognizing UIS's leading position in the field, I shifted my focus to exploring innovative comparators. A few years back, I volunteered at a local school, helping children learn to code in the classroom using a tool called 'Scratch.' This tool, familiar to many parents, allows children to code by dragging 'Sprites' onto a canvas and using drag-and-drop coding blocks to make the sprites move, dance, or interact.
Scratch served as a primary inspiration for the direction I envisioned for UIS, emphasizing an intuitive, user-friendly experience. Additionally, I drew insights from sophisticated design tools like Figma and Miro. These tools, while complex, offer powerful design capabilities and served as benchmarks for creating an advanced, yet accessible, design environment for UIS.
Design Process
I utilised Miro to create initial wireframes, engaging senior managers for feedback and demonstrating functionality through prototypes.
As I transitioned to Figma, I created high-fidelity mock-ups, continuously iterating based on user feedback to ensure the designs met user needs and expectations. While some concepts were set aside due to technical constraints, the final screens featured a streamlined set of functionalities with ample room for future enhancements.
Key features prioritised from the matrix included an advanced zoom control, akin to Miro's, allowing users to effortlessly zoom out to view the entire canvas or zoom in for detailed focus on specific areas. Additionally, I integrated a comprehensive keyboard shortcuts modal, inspired by Figma and Miro, enabling users to access all shortcuts in one place, thus accelerating their workflow.
All designs adhered meticulously to the Ford Pro Design System, incorporating custom components where necessary. The prototypes leveraged advanced Figma capabilities, such as variables and component sets. These features not only enhanced the design process but also laid the groundwork for a 2024 initiative to elevate the skillset of all designers at Ford (see the Ford Pro Mobile project for further details).
Upon rollout, the redesigned interface was met with significant enthusiasm, especially regarding the infinite canvas with zoom control. This feature empowered users to manage and simplify complex workflows by focusing on specific sections, greatly enhancing their overall experience.
The next focus was to streamline the toolbars and introduce "logic blocks," which would establish relationships and hierarchies between elements, significantly enhancing user functionality. Drawing inspiration from Figma, I opted for a dual-toolbar approach, differing from Miro, to distinctly separate workflows.
The left toolbar was designed to facilitate navigation across different project pages—a new feature—and provide a comprehensive breakdown of the elements on the canvas. Conversely, the right toolbar was engineered to allow users to drag and drop various vehicle signals onto the canvas, enabling them to expand or modify their projects seamlessly.
Despite the complexity of these enhancements, through numerous iterations, these features were successfully integrated into the final application. This not only refined the user interface but also substantially elevated the overall user experience, providing a more intuitive and efficient tool for users.
Reflections and Lessons Learned: This project reinforced the importance of user-centered design and iterative testing. It highlighted the need to align design goals with technical capabilities for feasible and impactful solutions.
Next Steps: Future updates will focus on additional priorities from the prioritisation matrix, continuing to enhance user experience based on ongoing feedback. As I was set to move into the Ford Pro Mobile team next, I handed the project over to two U.S. designers to continue the project with the developers.
“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