Per diem is the reimbursable daily allowance for lodging, meals and incidental expenses for federal employees when they travel to locations in the continental United States (CONUS). GSA establishes CONUS per diem rates (while the U.S. Department of Defense establishes rates for locations in Alaska, Hawaii and the U.S. territories, and the U.S. Department of State sets rates for foreign travel locations).
As a government contractor working for GSA, I had the opportunity to work as the visual designer on a redesign of the per diem mobile app. The first version was launched in 2011, and there were accessibility updates in 2017. We started work on the redesign in the fall of 2018 and launched in September 2019. The project was based out of the Digital Communication program management office (PMO) within the Office of Strategic Communication (OSC).
Above is the series of images of the app “introduction tour”—the user sees these the first time they launch the 2019 app. They show the some of the general interface and design elements.
Below are some screen captures of the 2011 version of the mobile app. This is the point where we started our project—evaluating the existing app.
When users launched the app, they saw the first screen on the left (above) with a list of states to choose from. In my case, I selected “Colorado” from the list, then on the second screen when I entered “Loveland,” the third screen appeared with the result. Then when I tapped on “Fort Collins/Loveland,” I saw the last window with the rates. I was then able to cycle through to check the lodging and meals rates by month for that location. If the user selected the ZIP code option at the top, the process and resulting screens gave a similar experience.
So, to begin, as a team we discussed and decided what the requirements were, and what to improve in the new version of the app. We wanted to give the users more information, make the app easier to use, and add helpful functionality. We referenced the GSA per diem desktop version, and how the app might be similar or different.
We made an initial workflow diagram—although it ended up changing quite a bit.
Below are some of the final screen captures of the redesigned app—the first four align with the 2011 screens shown above. Notable differences seen in the new version are: the ability to turn on GPS so the app knows your location to give you the current rates right away; the means to easily edit the location using a one-field location search (so when I enter “Loveland” the results page has any city/state that contains that word); and an easy way to switch to searching by travel date range or fiscal year.
In the second row of screens above, we see the date range selection and results screens, as well as an example of the Fiscal Year results tab. Additionally, we added an “FAQ & Resources” tab to offer helpful answers and other links if needed (shown at right).
We arrived at this design after many user interface mockups, revisions, prototypes, and user and quality assurance testing. I’ll share some of that journey here.
We started with a concept that had a photograph of a sky in the background (and ended up liking the sunrise/sunset version vs. a blue sky with clouds), and picked up the general color palette from GSA.gov. We tried a “tiled” approach, thinking the user could just tap on the different tiles to adjust the settings before getting their results. Below are two early drafts. For the initial idea (showing the two scenarios of GPS disabled and enabled), we started with five tiles, for the second, we reduced it to three.
There were some issues with this approach, and some user confusion when the UX group did some analysis and initial tests. See below—we next tried a simplified two-tile option (also showing the GSA disabled/enabled on launch), but users were confused by the search icon/button below the tiles (intended to lead to a results page). Then we tried a version that would start with a simple location entry (if GPS is disabled) or a “snapshot” of today’s rates for the current location above the two tiles (if GPS is enabled).
After a few tweaks, we ended up with an adjusted version of round 4. If users have GPS disabled, the first thing they will see will be a blank results page and they can then enter a location. If GPS is enabled, they see this month’s rates for their location, with the option to scroll through different months, edit the location, get results for a date range, or see fiscal year per diem results.
Next we set up an interactive InVision prototype of this scenario for user testing, and also to present the idea to management and stakeholders. Below is a screen capture of the prototype thumbnails.
I continued to refine, finalize and document the user interface design, as the front-end developer started building the screens for the iOS version, followed by the Android version. The back-end development and functionality had been underway all along. We did internal team QA testing and additional user testing, and fixed bugs and incorporated suggestions as necessary.
Once development was under way, I switched gears to optimize the icons used in the app (the per diem and search icons seen in the app are the same as we use in the header template on GSA.gov), and also I designed an app launch icon, shown below on the right. I posted electronic thumbnail sketches of the icon development on Dribbble to show a part of the design process. I am now using the icon look and feel as a basis for designing further icons for GSA.
2020 update: We’ve recently lost funding to maintain the app, so I believe it will be removed soon from Google Play and the App Store, and will fully go away at the end of FY 2021.
