FleetCor Cardholder App
Redesigning app to improve usability
Industry / Market Sector
Fintech, financial and payment services, spend management, payment processing, mobile apps
Challenge
FleetCor (now Corpay) maintained a cardholder application that allowed fleet drivers to access and view benefits on their company-issued prepaid fuel and expense cards. However, the existing app had usability issues and received a 1.3 rating on the Apple App Store. I led the user research and redesign of the application to address top user pain points.
My role
UX lead, UX/UI design, user research
In collaboration with
Product, Engineering, Consumers of fuel cards, Operations, UX and UI designers
User research
We started the effort by conducting evaluative research of the existing application and generative research to find areas where the app may not be fulfilling. We utilized quantitative data from Adobe Analytics to analyze activity funnels, user behavior, and potential problem areas. We also conducted usability tests to gather qualitative data to gain insight into the top user pain points.
Defining top pain points and opportunities
We organized feedback and topics from research on Mural, conducting affinity mapping, journey mapping, and other activities to create a prioritized list of opportunities for improvement. We also created personas and journey maps
Adobe Analytics usage
Organizing features in Mural
Migrating to single sign on
One of the top pain points we found when talking to users was that the different apps offered by FleetCor all required users to create a separate, new account. As such, employees at companies who utilized more than one FleetCor service needed to register on more than one app, with the administrator portal also requiring a separate account. Users serving both as a fleet driver and admin in a company using more than one FleetCor product were creating accounts and logging into four or more different portals.
We took the opportunity with the administrator app to start roll-out of a single sign-on branded under “Driven.” Users with existing accounts would be able to switch between the digital services without having to log in to multiple portals and apps. While the design of this seems deceptively simple, I worked extensively on this feature with product managers and engineering stakeholders. I needed to negotiate with stakeholders to help weigh the pros and cons of the effort, between the technical feasibility and the user experience, as well as work out the kinks with edge case scenarios to ensure a seamless migration for users with existing credentials.
Streamlining access to web application features
To save on development efforts, it was determined that we would take a hybrid technical approach and utilize pages from the existing administrator web portal. This meant that the mobile app could call on and link to the web portal pages, but we couldn’t build any new screens for the mobile app that the web portal would need to connect to.
Fleet drivers were short on time, and administrator users who were also drivers would only access the admin app if they had a high-priority need. With this in mind, we set a target to streamline access to features — we needed to be able to get everywhere within two clicks.
The web application had many functionality options in the menu, with a submenu for each area, which was previously presented as a list of text links under the main navigation options. To minimize the cognitive load on the mobile app, we limited the main bottom navigation to four main feature areas. When visiting a feature, we presented the top-used sub-features as floating navigation buttons. Tertiary and lesser-used features were organized into the main nav areas, on the app home page, or omitted altogether.
Web portal nav with My Settings submenu 
Mobile app My Settings designRedesigning web pages for mobile
The existing web application pages were not created to be mobile-friendly. On many of the screens, the main content or available actions appeared well below the fold. As part of the design for the mobile app, we redesigned all pages to be included to tighten the layout. On the home page, we omitted the lowest-ranking features and reorganized the page to fit more content above the fold. At the same time, we took the opportunity to address accessibility issues, such as the use of low contrast colors, which would be especially important as the screens may be viewed under suboptimal lighting inside a truck at the side of a road.
Before: Web portal Home page
After: Mobile app HomeWe took a similar approach with other screens. We removed the redundant account overview section, taking up the better part of a screen that appeared at the top of every screen, from all pages except the home page. We kept the status colors prevalent throughout the administrator site for consistency with other web app screens, while updating content into a more compact and scannable format to allow users to view more records on one screen and minimize scrolling.
Before: Web portal Manage Cards page
After: Mobile app Manage CardsOutcome
We validated the design through evaluative research with users. Although we redesigned many of the screens for the purpose of being used in the mobile application, we effectively improved the experience for the overall web administrator portal that served up the pages to the mobile app. Feedback from customers was very positive, with some desktop users commenting that the admin experience had improved.
We were able to meet the compressed timeline of designing a new administrator app while addressing the long-standing pain point of users needing to sign into multiple applications. We also increased the accessibility of administrator features, both in terms of making sure screens met high contrast and other accessibility standards, and in making the administrator functionality available and user-friendly for users needing to monitor card usage and manage payment cards for fleet drivers on the go. In the process, we improved and streamlined the experience for all administrator users.