FordPass Pro:
Electric Vehicle Features
February 2021
ROLE
UX & UI
TEAM
Ford Motor Company
TOOLS
Sketch, Figma, Invision, Abstract, Userzoom, Miro
FordPass Pro, the global app designed by Ford Motor Company for commercial users, offers remote vehicle monitoring and control capabilities. It specifically caters to small business owners who possess between one and five vehicles. After the initial release of FordPass Pro, a series of systematic enhancements have been implemented to refine the user experience (UX) and user interface (UI). These improvements have been guided by extensive user research and the need to accommodate an expanding array of features and functionalities. As the lead product designer, I have played a pivotal role in this project, with a particular focus on delivering electric vehicle (EV) features through FordPass Pro.
My responsibilities have included designing and implementing features such as remote cabin temperature control, locating public charge points, setting up preferred charging schedules, and other functionalities related to electric vehicles on a global scale. I encourage readers to explore my work on FordPass Pro as it provides a comprehensive overview of the entire design process, showcasing the evolution of the app's design and its continuous improvement to meet the needs of users effectively.
Throughout this endeavour, I collaborated closely with the development team and project managers to ensure a holistic approach to the design process. By leveraging my expertise in user-centered design principles, I crafted intuitive and efficient user experiences tailored specifically to electric vehicle features. This encompassed designing interfaces for climate control settings, facilitating the discovery of nearby charging stations, enabling users to establish preferred charging schedules, and other essential functionalities related to electric vehicles.
Working in this small team setting allowed for close collaboration, enabling us to streamline decision-making processes and foster efficient communication. By combining our collective efforts and expertise, we successfully integrated electric vehicle functionality into the new app design, ultimately creating a comprehensive solution that aligned with Ford Motor Company's commitment to sustainable mobility.
Please note that due to proprietary constraints, specific details about the app's design and features cannot be disclosed. However, I invite you to explore my portfolio for a more comprehensive understanding of my design capabilities and the projects I have been involved in.
The Problem
In my role as the lead UX designer, I had the privilege of spearheading the UX and design efforts for Ford's pioneering commercial-vehicle companion app, FordPass Pro. While working on the app's 2.0 redesign project, we encountered several usability issues that arose as the initial design faced challenges in terms of scalability. These flaws needed to be addressed to ensure a seamless user experience.
Simultaneously, Ford Motor Company had set an ambitious goal of transitioning to an all-electric vehicle model by 2030 as part of its commitment to combat climate change. With the introduction of the e-Transit in 2021, I was entrusted as the sole product designer in a small, yet dedicated team consisting of developers and project managers. Our primary objective was to seamlessly integrate electric vehicle functionality into the new design of the FordPass Pro app.
The Barriers
In the midst of the ongoing COVID-19 pandemic, all work and testing for the FordPass Pro app were conducted remotely. As the release of the e-Transit was imminent, a pilot program was organized for Europe, scheduled to commence in July 2021. This posed a significant time constraint, providing the team and me with only 8 weeks to design, iterate, test, and develop various core electric vehicle (EV) features. These features included remote cabin temperature control, locating public charge points, and setting up preferred charging schedules.
To ensure timely delivery, I prioritized effective communication and collaboration within the team. I dedicated time with the project manager to determine the key requirements for the minimum viable product (MVP). Furthermore, I engaged in discussions with the developers to gain insights into technical feasibility, identifying areas where components from the recently developed design system could be leveraged to expedite the process across multiple screens.
Adding to the intensity of the situation, I used this time to enhance my skill set even further. In the evenings, alongside my demanding work schedule, I pursued advanced visual design techniques through General Assembly. As a personal project, I embarked on creating a concept product website from scratch, which I named "Hōm."
Despite the pressure and tight deadlines, the team remained dedicated to delivering a high-quality product. We embraced the remote work setup, leveraging effective communication channels and employing agile methodologies to ensure seamless collaboration and progress.
The Process
Much of the initial research (Discover Phase) was carried over from FordPass Pro 2.0 project and highlighted some of the core issues with the current app in its existing form.
To cater to the needs of new electric vehicle (EV) drivers and owners, I took a proactive approach by designing an interview script that aimed to delve into the challenges and issues surrounding EV ownership. To conduct remote interviews efficiently, I leveraged the Userzoom user testing platform. This allowed me to gather valuable insights and feedback directly from the target audience.
Based on the findings from the interviews, I iterated on the designs, striving to address the identified pain points and improve the user experience. Throughout this process, I maintained close collaboration with the team by utilizing the Miro collaboration tool. This platform enabled us to share progress, provide feedback, and highlight potential issues or suggested improvements using digital post-it notes. By embracing this collaborative approach, we fostered an environment of shared ownership and continuous improvement.
Within a few weeks, I was able to develop high-fidelity screens that accurately reflected the evolving design. Working closely with the development team, I ensured that an MVP was released as quickly as possible, allowing us to validate the designs and gather user feedback early in the development cycle.
Subsequently, I employed Sketch, integrated with our newly developed Pro Design System, to create component-based screens. This approach enabled the design team and the development team to work seamlessly, leveraging a shared library of components to expedite the design process. By utilising native design principles such as Material Design and Human Interface Guidelines, I aimed to simplify the designs and enhance usability. Focusing on aspects like colours, typography, top bar, and buttons, I elevated the initial designs to a refined 2.0 version, as witnessed in the previous project.
User Research
Within a mere two weeks of initiating the project, I successfully conducted the team's first round of user research. Leveraging Ford's Commercial Vehicle division, I arranged and facilitated six user interviews, specifically targeting our intended audience. By following a carefully crafted script, I ensured that the interviews were structured and comprehensive.
After the interviews, I led the team in utilising the remote affinity-mapping technique on the Miro platform. This collaborative exercise allowed us to synthesise the wealth of user data we had gathered. Together, we identified relevant trends, patterns, and key areas of interest from the interviews. This process shattered many of our previous assumptions. Surprisingly, the cost comparison with diesel vans did not emerge as a significant concern for the users. More intriguingly, we discovered that many of the participants exhibited a very progressive mindset, displaying a deep concern for the environment. One participant even expressed delight in "listening to the birds singing" at traffic lights, revealing a level of appreciation that went beyond the stereotypical image of a conventional van driver.
These insights provided a profound understanding of our target audience, allowing us to tailor our design approach accordingly. It became evident that emphasizing the environmental benefits of electric vehicles would resonate strongly with this audience, going beyond mere cost considerations. By challenging and revising our assumptions, we were able to develop a user-centric design strategy that aligned with the values and preferences of these unique individuals.
Prototyping
Based on the valuable insights obtained from user research, two essential features emerged as focal points for the design:
-
Locating public charging stations: Users expressed a strong need for a feature that enables them to easily find public charging stations. Additionally, real-time availability information was highly desirable. This feature would empower users to plan their charging stops efficiently and avoid potential inconveniences.
-
Setting charge schedules: The ability to set charge schedules was identified as another crucial feature. Users expressed their desire to save money by taking advantage of off-peak charging rates. Furthermore, they highlighted the importance of pre-warming their vehicles before their morning commute, enhancing convenience and ensuring a comfortable driving experience.
To effectively communicate and present these features within the product team meetings, I utilised Miro to create low-fidelity wireframes. These wireframes served as visual representations of the proposed designs, allowing the team to comprehend the concepts and engage in discussions. By presenting the wireframes, I could address any potential technical challenges that may arise and prompt relevant questions regarding the app flow.
Furthermore, sharing user feedback and quotes from the previous round of user interviews during these presentations helped foster user empathy within the team. By relaying the actual voices and experiences of the users, I could effectively convey their needs, desires, and pain points. This approach not only aided in building a deeper understanding of the users' perspectives but also encouraged the team to prioritize user-centric design decisions.
Once the development team provided their approval, I proceeded to translate the initial low-fidelity wireframes into high-fidelity prototypes using Sketch. Leveraging the comprehensive Design System that I had previously developed, I ensured consistency and efficiency throughout the design process.
By utilising Sketch, a powerful design tool, I refined the crude wireframes and transformed them into polished, visually appealing prototypes. These high-fidelity prototypes were meticulously crafted to capture the intended look, feel, and functionality of the final product. The prototypes were carefully aligned with the established Design System, ensuring a cohesive and seamless user experience.
The objective was to deliver prototypes that were ready for the July pilot program. This stringent timeline necessitated focused effort and attention to detail. By utilising Sketch and the Design System, I streamlined the design process, enabling me to efficiently create high-fidelity prototypes that were on par with the desired level of quality and functionality.
Following the creation of high-fidelity prototypes, I proceeded to develop app flow screens that demonstrated how the various screens and features interconnected. To facilitate team engagement and collaboration, I once again turned to Miro, a versatile collaboration platform.
Through presentation sessions led by myself, the team was able to actively participate in the review and discussion of the app flow. By sharing the app flow screens on Miro, team members could interact with the designs and provide valuable feedback. The digital post-it notes feature in Miro allowed team members to jot down their thoughts, raise questions, and offer suggestions directly on the screens. This collaborative approach fostered a deeper understanding of the feature as a whole and encouraged open dialogue among team members.
By leveraging Miro for the presentation sessions, I ensured that the team had a clear understanding of the feature's functionality, user flow, and the rationale behind design decisions. This process enabled the team to provide input and raise any concerns or considerations that may have emerged during the review sessions.
The sprint was successfully completed on time, thanks to the effective pre-planning and hard work put in by both myself and the development team. Throughout the development process, we made several adjustments, but due to the strong teamwork established from the beginning and the implementation of a component-based design system, incorporating these changes was both effortless and efficient.
One valuable lesson I learned from this process was the importance of creating wireframes in a public channel. By sharing them openly, I was able to receive quick feedback from the developers and make significant modifications promptly.
The features we developed received a highly positive response, resulting in my promotion to the role of Senior Designer. In my new position, I now lead the Rapid Digital Prototyping Team at Ford Enterprise Connectivity. Additionally, I facilitated a smooth handover to the new designers responsible for working on FordPass Pro and provided support during this transition period.