Tom Bergman

Mojio · 2016–2018

Showing information only when it matters

As an entry-level UX designer, I helped design and ship Mojio’s flagship native apps for tracking and monitoring your car, while the customer base grew from 2,000 to over 100,000. After being promoted to Senior Product Designer, I led the design team on a follow-up app that took the App Store rating from 3.7 to 4.7.

Role
UX Designer; promoted to Senior Product Designer, leading the design team
Team
2–4 designers, 1 PM, 4–6 engineers
Scope
Native mobile, IoT
Brief
Mobile app redesign
Mojio’s Motion app on a phone: a map showing where the car is parked, with a card for the car below.

What was Motion by Mojio?

Motion was an app developed by Mojio. The app paired with a device that plugged into your car. This allowed users to see where the car was, how much gas it had, when maintenance was due, and more. Three groups used it: drivers keeping tabs on gas, maintenance and their own driving, parents keeping track of their kids on the road, and business owners managing company-owned vehicles. After the MVP app did well, the company wanted to go beyond tracking and add services: roadside assistance, a gas station finder, and parking.

Re-architecting the app for all of that also gave us a chance to step back, take in feedback from more than 100,000 users, and rethink the experience.

Early explorations

Most of the features we wanted to add, like roadside assistance and the gas finder, were big enough to have whole apps devoted to them. Bolt them on and the app gets unwieldy. Everything had to be re-evaluated.

The existing app also showed you everything all the time, like the car’s battery level, even though batteries almost never fail. The big change was to show information only when it mattered. By choosing to surface information contextually and only as needed, we could regain precious screen real estate.

Dashboard exploration: a map with a large card of car details and actions.
What I liked
Where the car is and how much gas it has are front and center. It’s clear there’s more you can do from the card.
What concerned me
Cluttered, with too many options. Rare things like engine and battery issues get as much prominence as common ones.
Fig. 1Three explorations of the home screen.

Final design

After a few more rounds and user feedback, I landed here. It takes the best parts of the explorations and gives you everything the old app did, on one screen.

The key idea was what I called “context cards”: status updates that appear when we think something deserves your attention. This way, we could optimize the experience for the things that changed frequently.

Fig. 2A context card appears only when something needs your attention.
The final home screen: a map with the parked Ford Mustang and a P button for parking, the car’s address below, and the last trip from San Francisco to Palo Alto.

Map becomes central to experience, helps the app feel lighter and ‘modern’

Parking, the true outlier, could be accessed via a mode switch toggle

Most frequently sought information featured in a prominent location

“Context cards” deliver important, time-relevant updates

Fig. 3The final home screen.

Vehicle drill-downs

The home screen covered most of what people needed, but the deeper, less frequent features still needed to be accessible. Pull up the drawer and you drill into the selected car, landing in Car Overview. From there, the bottom navigation moves between that car’s functions, like Car Timeline.

Fig. 4Pull up the drawer to drill into a car.

Car Timeline

Trip History got the other big change. The old app had two separate sections, Trip History and Notifications, and they overlapped: both told you when a trip started and ended. Knowing which trip caused a diagnostic trouble code to occur made the issue much easier to diagnose.

So I combined Trip History and Notifications into the Car Timeline, creating one place to review your car’s story.

The Car Timeline: trips and events, including issues, merged into one list with a map.
Fig. 5The Car Timeline.

Where it went

I handed Mojio a finished app for iOS and Android. I left before it shipped, and things changed over the following year, as they do, but most of the approach and thinking held.

White-labeled versions with my design work shipped in the US as T-Mobile SyncUp Drive.

T-Mobile SyncUp Drive’s Overview: Alex’s Accord on a map, with tiles for fuel, engine, battery, maintenance, recalls and hotspot, and a diagnostic trouble code card.
T-Mobile SyncUp Drive’s map view: the parked car in Campbell and a tow truck nearby, with the car card below.
Fig. 6The design shipped in the US as T-Mobile SyncUp Drive.