FleetCor Administrator App
Designing a mobile app using web portal pages
Industry / Market Sector
Financial and payment services, spend management, payment processing, fintech, mobile apps
Challenge
FleetCor (now Corpay) had an administrator web portal that fleet managers could use to configure and manage prepaid fuel and expense cards for drivers. This worked well for companies with a large fleet and a dedicated manager or administrator. However, a good portion of their customers were smaller companies where the person who would serve as the administrator was also a fleet driver. The existing administrator website was unwieldy and difficult to use on a mobile screen. FleetCor needed to roll out an administrator app quickly to fill the gap for users who needed to access administrator features from their phone on the road. I led the design of the administrator application within a compressed, several-month timeframe.
My role
UX lead, UX/UI design, user research
In collaboration with
Product, Engineering, Marketing, Operations, UX and UI designers
Determining the features
To meet the short timeframe and get a working app out quickly for administrators on the go, we agreed that we needed to keep the initial version lean. As such, we started with user research to determine the most-used administrator features and functionality. Besides talking to users, we leveraged Adobe Analytics usage data for the admin web portal to determine the most used features in terms of length of time and frequency.
We organized the top most-used features into buckets and came up with a list of recommendations for the initial version of the app.
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. The administrator portal also required a separate account. This means 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.