Mark Oxier

OHGO

OHGO

Improving the usability of Ohio's official traffic app.

 
vertical-rule.png

PROJECT OVERVIEW

vertical-rule.png
 

Improving Usability for an Upcoming Release
OHGO is a mobile app owned by the Ohio Department of Transportation that helps Ohio drivers make informed decisions about their daily commute. Using real-time road sensors, live camera feeds and on-the-road personnel, OHGO is able to send users information about their commute often faster and more accurately than Apple, Google and Waze. As a designer at CWT Interactive, the agency that designed and developed the app, I had the opportunity make improvements to the usability of the product ahead of an upcoming release. These improvements were addressing insights drawn from both data and user feedback.

 
vertical-rule.png

PRODUCT UPDATES

vertical-rule.png
 

Reducing Confusion With UI Conventions
The first issue that we addressed was pretty straightforward. The app allows users to view the location of incidents, construction zones, road closures and more, all plotted on a map. Users can toggle on and off which elements they would like to see by tapping an icon at the bottom left corner of the map. The data showed that this feature was very under-utilized. To be fair, perhaps this just isn’t the most useful or desirable feature, but the users reported that they thought the icon, a gear, would take them to the app’s settings. We decided that creating a more accurate icon was a worthy initiative.

The old icon: misleading users

The old icon: misleading users

I did some research to see how other products represented this type of functionality. I found that many describe or depict these elements as layers. This made sense for what we are displaying on the map. I explored a few different style options and the team decided to use an icon depicting an isometric stack of layers.

The new icon: embracing convention

The new icon: embracing convention

The gear icon is a convention for accessing a product’s settings or preferences. We were misleading users by using it to represent something different. The layers icon is used by at least one popular navigation product to represent the same function that we were trying to represent. By adopting it we created a more intuitive and familiar experience for our users.

Guiding the User With a Revised Flow
If OHGO were a minimum viable product, its sole feature would be the creation of routes. Users create “routes” that they regularly travel, like their commute to work, so that they can receive push notifications when there is an incident or some other traffic delay and take an alternate route. The data showed a significant number of users installing and opening the app, but never creating a single route. Unfortunately, we didn’t have access to any user insight about this. It would have been helpful to determine why it wasn’t being utilized, which is a story that the data couldn’t tell. Did users not know that they could create a route? Was the creation process too difficult? Was OHGO not what they expected and they abandoned shortly after opening it? Without being able to determine, we decided to help the users who might fall into the first category.

Out of the gate, the team decided that adding an instructional overlay was the best way to guide users to route creation. I believe that before adding even the smallest feature, UI element or bit of copy to a product, it is important to zoom out and determine if a simpler, more fundamental solution can be found on the UX plane. I took a look at the existing user flow. Once the app loaded, users were dropped onto an empty map. With no guidance, and little hierarchy in the features on their screen, they were basically left to figure it out on their own.

Old user flow

Old user flow

What if we dropped first-time users directly into the creation of their first route, much like a social media app asking first-time users to set up a profile? We would give them the option to skip, and if they did choose to, provide them with some helper text on how to create a route later on.

New user flow (click to expand)

New screen welcomes users and offers them the first step in route creation

New screen welcomes users and offers them the first step in route creation

If a user decides to skip, this is what they see before landing on the map screen

If a user decides to skip, this is what they see before landing on the map screen

By zooming out and looking at the UX of the product, I was able to propose a more elegant solution that simply rearranged and tweaked parts of the experience to solve our problem. Unfortunately, with a limited number of development hours allocated to this project, we had to opt for the instructional overlay. I designed the overlay to be as friendly to the overall experience as possible, with a limited number of tips, short, direct copy, and a clear dismissal button.

Eliminating Steps in the Route Creation Process
Data showed that many users received notifications for both their commute to work in the morning and their commute home in the evening. To do this, they had to create two entirely separate routes, even though both use the same two locations and the same days of the week, just different times in the day.

Users had to create two separate routes for a round trip

Users had to create two separate routes for a round trip

The team suspected there was a way to consolidate both of these trips into one route, making the creation process much simpler for users. I explored some different ways to integrate the “return trip” into the existing route creation screen. What seemed to be the simplest and most intuitive solution was to allow users to add multiple time ranges to their route.

To add a return trip, the user simply taps the plus icon to add another time range to the route

To add a return trip, the user simply taps the plus icon to add another time range to the route

If the user needs to remove the new time range, they simply tap the x icon

If the user needs to remove the new time range, they simply tap the x icon

 
vertical-rule.png

MARKETING PAGE

vertical-rule.png
 

Designing a Marketing Page
Another initiative for this release was to design a marketing page for the OHGO mobile app. The team at CWT had just put together a marketing campaign comprised of digital, printed and video ads. While the digital ads could link potential users directly to the App Store or Google Play, the printed and video ads needed a URL that they could send potential users to that contained both App Store and Google Play links and, of course, further promoted the product.

Desktop view of the marketing page

Desktop view of the marketing page

Mobile view of the marketing page

Mobile view of the marketing page