Update the TripIt app headers to become more accessible, as well as improve the general user experience, update the visual design, and tackle localization concerns as well.
Defining the Problem
We identified 3 key issues with our current headers. (1) Both of our colored headers did not pass color contrast checks. (2) Because the titles were sandwiched between left and right UI controls, they would often get truncated. (3) Because of limited space, our subtitles were not at a readable font size.
Through competitive analysis we found that a large portion of popular apps used their brand color as the header background (just as we did) and that this resulted in a large majority of apps not having headers that pass contrast checks. A common solution seemed to be the white header trend used by such apps as AirBnb, Instagram, Pinterest, Duolingo, Google Calendar… etc.
Does removing our TripIt blue from the header lower brand strength?
First Hurdle: Brand
Our first challenge in considering the white header was to come from the brand team and the possible question of whether or not removing our brand color from the header would negatively affect brand strength. White headers were primarily used by big brands such as Instagram and Pinterest, for whom brand strength would not be such a strong concern.
My solution was to take their concerns and turn them around by making it so that removing the brand color from the header would actually strengthen the brand as opposed to weakening it.
With the initial concern turned into a strength, we moved on to layout adjustments to address the truncation of long header titles and the unreadably small subtitle text. I took cues from AirBnb and iOS11 for the general idea to drop the title itself outside of the “notification bar” space and down to its own row. The addition of dynamic text allowance made it so that long titles, or titles in other languages had more room. This accomplished 3 main goals.
- Great support for localization efforts and internal concerns about verbose languages such as German
- A victory for universal design by allowing users with large text settings on in their devices to view TripIt the way they’d like to
- Making the header titles and subtitles more readable for everyone by adhering to readable text size standards
With everyone on board, the next steps were to complete an app-wide header audit and to identify one-off headers and screens that needed some UX/UI adjustments.
Certain older screens would require interaction and visual adjustments in order to adhere to a simple set of new header logic, eliminating one-off headers.
The new versions of these screens include adjusted patterns that allow us to keep to a streamlined header logic while also simplifying the UX.